diff --git a/.github/actions/build-android/action.yml b/.github/actions/build-android/action.yml
index 86c531d52c9..874a0da82e3 100644
--- a/.github/actions/build-android/action.yml
+++ b/.github/actions/build-android/action.yml
@@ -45,17 +45,8 @@ runs:
     - name: Set gradle.properties
       working-directory: android
       run: |
-        echo "" > ./gradle.properties
-        echo -e "org.gradle.jvmargs=-Xmx4g -XX:MaxMetaspaceSize=1g -Dfile.encoding=UTF-8" >> ./gradle.properties
-        echo -e "android.useAndroidX=true" >> ./gradle.properties
-        echo -e "android.enableJetifier=true" >> ./gradle.properties
-        echo -e "android.jetifier.ignorelist=bcprov-jdk18on" >> ./gradle.properties
-        echo -e "reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64" >> ./gradle.properties
-        echo -e "newArchEnabled=true" >> ./gradle.properties
-        echo -e "hermesEnabled=true" >> ./gradle.properties
-        echo -e "edgeToEdgeEnabled=true" >> ./gradle.properties
+        printf '\n' >> ./gradle.properties
         echo -e "VERSIONCODE=${{ inputs.BUILD_VERSION }}" >> ./gradle.properties
-        echo -e "APPLICATION_ID=chat.rocket.android" >> ./gradle.properties
         echo -e "BugsnagAPIKey=${{ inputs.BUGSNAG_KEY_OFFICIAL }}" >> ./gradle.properties
         echo -e "KEYSTORE=${{ inputs.KEYSTORE_OFFICIAL }}" >> ./gradle.properties
         echo -e 'KEYSTORE_PASSWORD=${{ inputs.KEYSTORE_OFFICIAL_PASSWORD }}' >> ./gradle.properties
@@ -154,7 +145,7 @@ runs:
     - name: Upload sourcemaps/NDK symbols to Bugsnag
       run: |
         pnpm bugsnag:upload-android --variant release --app-manifest android/app/build/intermediates/merged_manifests/release/processReleaseManifest/AndroidManifest.xml
-        pnpm exec bugsnag-cli upload android-aab android/app/build/outputs/bundle/release/app-release.aab
+        pnpm exec bugsnag-cli upload android-aab --exclude "**/libratex_ffi.so*" android/app/build/outputs/bundle/release/app-release.aab
       shell: bash
 
     - name: Upload AAB
diff --git a/.github/actions/build-ios/action.yml b/.github/actions/build-ios/action.yml
index ddb2133bd5d..3b718269fb6 100644
--- a/.github/actions/build-ios/action.yml
+++ b/.github/actions/build-ios/action.yml
@@ -44,7 +44,7 @@ runs:
     - name: Set up Xcode
       uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1.7.0
       with:
-        xcode-version: '26.2.0'
+        xcode-version: '26.6'
 
     - name: Set up Ruby
       uses: ruby/setup-ruby@7372622e62b60b3cb750dcd2b9e32c247ffec26a # v1.302.0
@@ -58,9 +58,9 @@ runs:
         path: |
           ~/.pods
           ios/Pods
-        key: pods-v1-{{ checksum "ios/Podfile.lock" }}
+        key: pods-v2-${{ hashFiles('ios/Podfile.lock') }}
         restore-keys: |
-          pods-v1-
+          pods-v2-
 
     - name: pod install
       run: |
diff --git a/.github/actions/upload-ios/action.yml b/.github/actions/upload-ios/action.yml
index 781851ac8d3..2a5e75d8eb8 100644
--- a/.github/actions/upload-ios/action.yml
+++ b/.github/actions/upload-ios/action.yml
@@ -57,14 +57,14 @@ runs:
         path: |
           ~/.pods
           ios/Pods
-        key: pods-v1-{{ checksum "ios/Podfile.lock" }}
+        key: pods-v2-${{ hashFiles('ios/Podfile.lock') }}
         restore-keys: |
-          pods-v1-
+          pods-v2-
 
     - name: Set up Xcode
       uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1.7.0
       with:
-        xcode-version: '26.2.0'
+        xcode-version: '26.6'
 
     - name: Set up Ruby
       uses: ruby/setup-ruby@7372622e62b60b3cb750dcd2b9e32c247ffec26a # v1.302.0
diff --git a/.github/workflows/e2e-build-android.yml b/.github/workflows/e2e-build-android.yml
index 93ddf48c31c..89455a5af67 100644
--- a/.github/workflows/e2e-build-android.yml
+++ b/.github/workflows/e2e-build-android.yml
@@ -103,16 +103,8 @@ jobs:
       - name: Set gradle.properties
         working-directory: android
         run: |
-          echo "" > ./gradle.properties
-          echo -e "org.gradle.jvmargs=-Xmx4g -XX:MaxMetaspaceSize=1g -Dfile.encoding=UTF-8" >> ./gradle.properties
-          echo -e "android.useAndroidX=true" >> ./gradle.properties
-          echo -e "android.enableJetifier=true" >> ./gradle.properties
-          echo -e "android.jetifier.ignorelist=bcprov-jdk18on" >> ./gradle.properties
+          printf '\n' >> ./gradle.properties
           echo -e "reactNativeArchitectures=arm64-v8a,x86_64" >> ./gradle.properties
-          echo -e "APPLICATION_ID=chat.rocket.android" >> ./gradle.properties
-          echo -e "newArchEnabled=true" >> ./gradle.properties
-          echo -e "hermesEnabled=true" >> ./gradle.properties
-          echo -e "edgeToEdgeEnabled=true" >> ./gradle.properties
           echo -e "VERSIONCODE=999999" >> ./gradle.properties
           echo -e "KEYSTORE=release.keystore" >> ./gradle.properties
           echo -e 'KEYSTORE_PASSWORD=${{ secrets.KEYSTORE_OFFICIAL_PASSWORD }}' >> ./gradle.properties
diff --git a/.github/workflows/e2e-build-ios.yml b/.github/workflows/e2e-build-ios.yml
index f290a6d4228..f6f787074f2 100644
--- a/.github/workflows/e2e-build-ios.yml
+++ b/.github/workflows/e2e-build-ios.yml
@@ -68,7 +68,7 @@ jobs:
       - name: Set up Xcode
         uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1.7.0
         with:
-          xcode-version: '26.2.0'
+          xcode-version: '26.6'
 
       - name: Set up Ruby
         uses: ruby/setup-ruby@7372622e62b60b3cb750dcd2b9e32c247ffec26a # v1.302.0
diff --git a/.github/workflows/eslint.yml b/.github/workflows/eslint.yml
index 2372337e384..36a6c5ce89e 100644
--- a/.github/workflows/eslint.yml
+++ b/.github/workflows/eslint.yml
@@ -19,10 +19,13 @@ jobs:
         uses: ./.github/actions/setup-node
 
       - name: Run Oxlint
-        run: pnpm lint
+        run: pnpm exec oxlint
+
+      - name: Run TypeScript
+        run: pnpm exec tsc
 
       - name: Run Tests
-        run: pnpm test --runInBand
+        run: pnpm test
 
       - name: Validate sniffler test-map freshness
         run: node .github/scripts/validate-test-map.js
diff --git a/.github/workflows/maestro-android.yml b/.github/workflows/maestro-android.yml
index c6cf9e0c462..203b6684544 100644
--- a/.github/workflows/maestro-android.yml
+++ b/.github/workflows/maestro-android.yml
@@ -204,4 +204,5 @@ jobs:
             ~/.maestro/tests/**/*
             maestro-report.xml
             maestro-rerun-round-*.xml
+            *.mp4
           retention-days: 7
diff --git a/.github/workflows/maestro-ios.yml b/.github/workflows/maestro-ios.yml
index 3cf48779f52..e26337da799 100644
--- a/.github/workflows/maestro-ios.yml
+++ b/.github/workflows/maestro-ios.yml
@@ -26,7 +26,7 @@ jobs:
         # Match the Xcode version e2e-build-ios.yml builds with
         uses: maxim-lobanov/setup-xcode@ed7a3b1fda3918c0306d1b724322adc0b8cc0a90 # v1.7.0
         with:
-          xcode-version: '26.2.0'
+          xcode-version: '26.6'
 
       - name: Configure Simulator
         run: |
@@ -144,4 +144,5 @@ jobs:
             ~/.maestro/tests/**/*
             maestro-report.xml
             maestro-rerun-round-*.xml
+            *.mp4
           retention-days: 7
diff --git a/.github/workflows/organize_translations.yml b/.github/workflows/organize_translations.yml
index 4e2dad51c2a..12cb600686b 100644
--- a/.github/workflows/organize_translations.yml
+++ b/.github/workflows/organize_translations.yml
@@ -20,7 +20,7 @@ jobs:
     - name: Setup Node.js
       uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
       with:
-        node-version: 18 
+        node-version: 22
 
     - name: Run script to organize JSON keys
       run: node scripts/organize-translations.js
diff --git a/.maestro/helpers/assert-room-title.yaml b/.maestro/helpers/assert-room-title.yaml
new file mode 100644
index 00000000000..183c4e2556a
--- /dev/null
+++ b/.maestro/helpers/assert-room-title.yaml
@@ -0,0 +1,23 @@
+appId: ${APP_ID}
+name: Assert room title
+tags:
+  - 'util'
+
+---
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'room-view-title-${ROOM}'
+          timeout: 60000
+
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: '${ROOM}'
+          timeout: 60000
diff --git a/.maestro/helpers/clear-search-field.yaml b/.maestro/helpers/clear-search-field.yaml
new file mode 100644
index 00000000000..3ee551c0df0
--- /dev/null
+++ b/.maestro/helpers/clear-search-field.yaml
@@ -0,0 +1,18 @@
+appId: ${APP_ID}
+name: Clear search field
+tags:
+  - 'util'
+---
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          id: 'magnifyingglass'
+      - eraseText
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - tapOn:
+          id: clear-text-input
diff --git a/.maestro/helpers/close-search.yaml b/.maestro/helpers/close-search.yaml
new file mode 100644
index 00000000000..db6560964fd
--- /dev/null
+++ b/.maestro/helpers/close-search.yaml
@@ -0,0 +1,13 @@
+appId: ${APP_ID}
+name: Close search
+tags:
+  - 'util'
+---
+- runFlow:
+    when:
+      platform: iOS
+      visible:
+        text: 'Close'
+    commands:
+      - tapOn:
+          text: 'Close'
diff --git a/.maestro/helpers/go-back.yaml b/.maestro/helpers/go-back.yaml
index 667f678c475..81fd69def37 100644
--- a/.maestro/helpers/go-back.yaml
+++ b/.maestro/helpers/go-back.yaml
@@ -6,16 +6,15 @@ tags:
 ---
 - runFlow:
     when:
-      visible:
-        id: 'custom-header-back'
+      platform: Android
     commands:
       - tapOn:
-          id: 'custom-header-back'
+          id: '(custom-)?header-back'
 
 - runFlow:
     when:
-      visible:
-        id: 'header-back'
+      platform: iOS
     commands:
       - tapOn:
-          id: 'header-back'
+          text: 'Back(, .*)?'
+          retryTapIfNoChange: true
diff --git a/.maestro/helpers/login-with-deeplink.yaml b/.maestro/helpers/login-with-deeplink.yaml
index dba619eeea9..346b4659cd8 100644
--- a/.maestro/helpers/login-with-deeplink.yaml
+++ b/.maestro/helpers/login-with-deeplink.yaml
@@ -36,6 +36,11 @@ tags:
             visible: ".*isn't responding.*"
           commands:
             - tapOn: 'Wait'
+      - runFlow:
+          when:
+            visible: 'Sign in to this workspace?'
+          commands:
+            - tapOn: '(?i)login'
       - extendedWaitUntil:
           visible:
             id: 'rooms-list-view'
diff --git a/.maestro/helpers/logout.yaml b/.maestro/helpers/logout.yaml
index 70ddc19cfb7..b19b9eba4ee 100644
--- a/.maestro/helpers/logout.yaml
+++ b/.maestro/helpers/logout.yaml
@@ -14,12 +14,22 @@ tags:
 
 - runFlow:
     when:
+      platform: Android
       visible:
         id: 'rooms-list-view-sidebar'
     commands:
       - tapOn:
           id: 'rooms-list-view-sidebar'
 
+- runFlow:
+    when:
+      platform: iOS
+      visible:
+        text: 'Menu'
+    commands:
+      - tapOn:
+          text: 'Menu'
+
 - runFlow:
     when:
       platform: Android
diff --git a/.maestro/helpers/navigate-to-recent-room.yaml b/.maestro/helpers/navigate-to-recent-room.yaml
index fdfc1057707..5da07125d33 100644
--- a/.maestro/helpers/navigate-to-recent-room.yaml
+++ b/.maestro/helpers/navigate-to-recent-room.yaml
@@ -8,19 +8,23 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-search'
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-search-input'
-    timeout: 60000
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - tapOn:
+          id: 'rooms-list-view-search'
+      - extendedWaitUntil:
+          visible:
+            id: 'rooms-list-view-search-input'
+          timeout: 60000
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view-item-${ROOM}'
     timeout: 60000
 - tapOn:
     id: 'rooms-list-view-item-${ROOM}'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${ROOM}'
-    timeout: 60000
+- runFlow:
+    file: 'assert-room-title.yaml'
+    env:
+      ROOM: ${ROOM}
diff --git a/.maestro/helpers/navigate-to-room-action.yaml b/.maestro/helpers/navigate-to-room-action.yaml
index 08a0dfeb718..f9367ee7fd3 100644
--- a/.maestro/helpers/navigate-to-room-action.yaml
+++ b/.maestro/helpers/navigate-to-room-action.yaml
@@ -18,13 +18,5 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- assertVisible:
-    id: 'room-header'
-    index: 0
-- tapOn:
-    id: 'room-header'
-    index: 0
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+
+- runFlow: './open-room-actions.yaml'
diff --git a/.maestro/helpers/navigate-to-room.yaml b/.maestro/helpers/navigate-to-room.yaml
index e8eba0728b0..af619b5da61 100644
--- a/.maestro/helpers/navigate-to-room.yaml
+++ b/.maestro/helpers/navigate-to-room.yaml
@@ -4,6 +4,7 @@ tags:
   - 'util'
 
 ---
+- runFlow: './pop-to-rooms-list.yaml'
 - waitForAnimationToEnd
 - scrollUntilVisible:
     element:
@@ -11,7 +12,7 @@ tags:
 - waitForAnimationToEnd
 - tapOn:
     id: 'rooms-list-view-item-${ROOM}'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${ROOM}'
-    timeout: 60000
+- runFlow:
+    file: 'assert-room-title.yaml'
+    env:
+      ROOM: ${ROOM}
diff --git a/.maestro/helpers/open-room-actions.yaml b/.maestro/helpers/open-room-actions.yaml
new file mode 100644
index 00000000000..e351514fbfc
--- /dev/null
+++ b/.maestro/helpers/open-room-actions.yaml
@@ -0,0 +1,18 @@
+appId: ${APP_ID}
+name: Open room actions
+tags:
+  - 'util'
+
+---
+- extendedWaitUntil:
+    visible:
+      id: 'room-header'
+    timeout: 60000
+- tapOn:
+    id: 'room-header'
+    index: 0
+    retryTapIfNoChange: true
+- extendedWaitUntil:
+    visible:
+      id: 'room-actions-view'
+    timeout: 60000
diff --git a/.maestro/helpers/open-servers-list.yaml b/.maestro/helpers/open-servers-list.yaml
new file mode 100644
index 00000000000..49052b5455d
--- /dev/null
+++ b/.maestro/helpers/open-servers-list.yaml
@@ -0,0 +1,32 @@
+appId: ${APP_ID}
+name: Open servers list
+tags:
+  - 'util'
+
+---
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'Menu'
+          timeout: 60000
+      - tapOn:
+          text: '(?!\d{1,2}:\d{2}).+'
+          rightOf:
+            text: 'Menu'
+          leftOf:
+            text: 'Create new channel.*'
+          index: 0
+
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'rooms-list-header-servers-list-button'
+          timeout: 60000
+      - tapOn:
+          id: 'rooms-list-header-servers-list-button'
diff --git a/.maestro/helpers/pop-to-rooms-list.yaml b/.maestro/helpers/pop-to-rooms-list.yaml
new file mode 100644
index 00000000000..1e8fb0abeb0
--- /dev/null
+++ b/.maestro/helpers/pop-to-rooms-list.yaml
@@ -0,0 +1,30 @@
+appId: ${APP_ID}
+name: Pop to rooms list
+tags:
+  - 'util'
+
+---
+- repeat:
+    times: 4
+    while:
+      notVisible:
+        id: 'rooms-list-view'
+    commands:
+      - runFlow:
+          when:
+            platform: Android
+            visible:
+              id: '(custom-)?header-back'
+          commands:
+            - tapOn:
+                id: '(custom-)?header-back'
+      - runFlow:
+          when:
+            platform: iOS
+            visible:
+              text: 'Back(, .*)?'
+          commands:
+            - tapOn:
+                text: 'Back(, .*)?'
+      - waitForAnimationToEnd:
+          timeout: 5000
diff --git a/.maestro/helpers/search-and-navigate-room.yaml b/.maestro/helpers/search-and-navigate-room.yaml
index ba8479a1c02..da3bdf0b8e1 100644
--- a/.maestro/helpers/search-and-navigate-room.yaml
+++ b/.maestro/helpers/search-and-navigate-room.yaml
@@ -3,7 +3,14 @@ name: Search and navigate room
 tags:
   - 'util'
 ---
+- extendedWaitUntil:
+    visible:
+      id: 'rooms-list-view'
+    timeout: 60000
 - runFlow:
+    when:
+      notVisible:
+        id: 'rooms-list-view-item-${ROOM}'
     file: '../helpers/search-room.yaml'
     env:
       ROOM: ${ROOM}
diff --git a/.maestro/helpers/search-room.yaml b/.maestro/helpers/search-room.yaml
index 6314ba6f9af..17dfdc0668f 100644
--- a/.maestro/helpers/search-room.yaml
+++ b/.maestro/helpers/search-room.yaml
@@ -3,18 +3,31 @@ name: Search room
 tags:
   - 'util'
 ---
+- runFlow: './pop-to-rooms-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
 - waitForAnimationToEnd:
     timeout: 5000
-- tapOn:
-    id: 'rooms-list-view-search'
-- tapOn:
-    id: 'rooms-list-view-search-input'
-- inputText:
-    text: ${ROOM}
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          id: 'magnifyingglass'
+      - inputText:
+          text: ${ROOM}
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - tapOn:
+          id: 'rooms-list-view-search'
+      - tapOn:
+          id: 'rooms-list-view-search-input'
+      - inputText:
+          text: ${ROOM}
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view-item-${ROOM}'
diff --git a/.maestro/helpers/select-header-filter.yaml b/.maestro/helpers/select-header-filter.yaml
new file mode 100644
index 00000000000..7a577c1cd3d
--- /dev/null
+++ b/.maestro/helpers/select-header-filter.yaml
@@ -0,0 +1,37 @@
+appId: ${APP_ID}
+name: Select header filter
+tags:
+  - 'util'
+---
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'Filter'
+          timeout: 60000
+      - tapOn:
+          text: 'Filter'
+      - extendedWaitUntil:
+          visible:
+            text: ${IOS_OPTION}
+          timeout: 60000
+      - tapOn:
+          text: ${IOS_OPTION}
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: ${ANDROID_FILTER_ID}
+          timeout: 60000
+      - tapOn:
+          id: ${ANDROID_FILTER_ID}
+      - extendedWaitUntil:
+          visible:
+            id: ${ANDROID_OPTION_ID}
+          timeout: 60000
+      - tapOn:
+          id: ${ANDROID_OPTION_ID}
diff --git a/.maestro/helpers/tap-header-item.yaml b/.maestro/helpers/tap-header-item.yaml
new file mode 100644
index 00000000000..963ba9f797c
--- /dev/null
+++ b/.maestro/helpers/tap-header-item.yaml
@@ -0,0 +1,21 @@
+appId: ${APP_ID}
+name: Tap header item
+tags:
+  - 'util'
+
+---
+# iOS native header items (unstable_headerLeftItems/RightItems) carry no accessibilityIdentifier,
+# only a label. Android keeps the JS-rendered header, matched by testID as before.
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn:
+          id: ${ANDROID_ID}
+
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          text: ${IOS_LABEL}
diff --git a/.maestro/helpers/tap-search-field.yaml b/.maestro/helpers/tap-search-field.yaml
new file mode 100644
index 00000000000..a2f14c3f691
--- /dev/null
+++ b/.maestro/helpers/tap-search-field.yaml
@@ -0,0 +1,33 @@
+appId: ${APP_ID}
+name: Tap search field
+tags:
+  - 'util'
+---
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - runFlow:
+          when:
+            notVisible:
+              id: 'magnifyingglass'
+          commands:
+            - swipe:
+                start: 50%, 30%
+                end: 50%, 60%
+      - extendedWaitUntil:
+          visible:
+            id: 'magnifyingglass'
+          timeout: 60000
+      - tapOn:
+          id: 'magnifyingglass'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: ${SEARCH_ID}
+          timeout: 60000
+      - tapOn:
+          id: ${SEARCH_ID}
diff --git a/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml b/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml
index a2bf50b79a6..17c2280bfdc 100644
--- a/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml
+++ b/.maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml
@@ -18,11 +18,27 @@ tags:
 # Show alerts as Toasts
 - tapOn: 'Menu'
 - tapOn: 'Accessibility & appearance'
-- tapOn: '.*Show alerts as.*'
-- assertVisible: 'Toasts. Dismissed automatically. Checked'
-- assertVisible: 'Dialogs. Require manual dismissal. Unchecked'
-- tapOn:
-    id: 'action-sheet-handle'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn: 'Toasts'
+      - assertVisible:
+          text: 'Toasts'
+          selected: true
+      - assertVisible:
+          text: 'Dialogs'
+          selected: false
+      - tapOn: 'Toasts'
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn: '.*Show alerts as.*'
+      - assertVisible: 'Toasts. Dismissed automatically. Checked'
+      - assertVisible: 'Dialogs. Require manual dismissal. Unchecked'
+      - tapOn:
+          id: 'action-sheet-handle'
 - waitForAnimationToEnd:
     timeout: 5000
 - tapOn: 'Menu'
@@ -37,9 +53,23 @@ tags:
 
 # Show alerts as Dialogs
 - tapOn: 'Accessibility & appearance'
-- tapOn: '.*Show alerts as.*'
-- assertVisible: 'Toasts. Dismissed automatically. Checked'
-- tapOn: 'Dialogs. Require manual dismissal. Unchecked'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn: 'Toasts'
+      - assertVisible:
+          text: 'Toasts'
+          selected: true
+      - tapOn: 'Dialogs'
+      - assertVisible: 'Dialogs'
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - tapOn: '.*Show alerts as.*'
+      - assertVisible: 'Toasts. Dismissed automatically. Checked'
+      - tapOn: 'Dialogs. Require manual dismissal. Unchecked'
 - tapOn: 'Menu'
 - tapOn: 'Edit status'
 - tapOn:
diff --git a/.maestro/tests/assorted/accessibility-and-appearance.yaml b/.maestro/tests/assorted/accessibility-and-appearance.yaml
index 04a79a29fcd..dec998f84f7 100644
--- a/.maestro/tests/assorted/accessibility-and-appearance.yaml
+++ b/.maestro/tests/assorted/accessibility-and-appearance.yaml
@@ -95,8 +95,7 @@ tags:
     timeout: 60000
 
 # should disable mentions with @ symbol
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 - runFlow:
     file: './utils/go-to-accessibility-appearance.yaml'
 
@@ -134,8 +133,7 @@ tags:
     timeout: 60000
 
 # should enable rooms with # symbol
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 - runFlow:
     file: './utils/go-to-accessibility-appearance.yaml'
 
@@ -169,8 +167,7 @@ tags:
     timeout: 60000
 
 # should disable mentions with # symbol
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 - runFlow:
     file: './utils/go-to-accessibility-appearance.yaml'
 
diff --git a/.maestro/tests/assorted/admin-panel.yaml b/.maestro/tests/assorted/admin-panel.yaml
index e783063497f..7380dfca90a 100644
--- a/.maestro/tests/assorted/admin-panel.yaml
+++ b/.maestro/tests/assorted/admin-panel.yaml
@@ -19,8 +19,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
diff --git a/.maestro/tests/assorted/broadcast.yaml b/.maestro/tests/assorted/broadcast.yaml
index 254c6b78b1b..633472aa649 100644
--- a/.maestro/tests/assorted/broadcast.yaml
+++ b/.maestro/tests/assorted/broadcast.yaml
@@ -19,12 +19,11 @@ tags:
       PASSWORD: ${output.user.password}
 
 # should create broadcast room
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: 'new-message-view'
@@ -39,8 +38,10 @@ tags:
     visible:
       id: 'select-users-view'
     timeout: 60000
-- tapOn:
-    id: 'select-users-view-search'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - inputText: ${output.otherUser.username}
 - extendedWaitUntil:
     visible:
@@ -52,6 +53,7 @@ tags:
     visible:
       id: 'selected-user-${output.otherUser.username}'
     timeout: 60000
+- runFlow: '../../helpers/close-search.yaml'
 - assertVisible:
     id: 'selected-users-view-submit'
 - tapOn:
@@ -76,15 +78,11 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'create-channel-submit'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room}'
-- tapOn:
-    id: 'room-header'
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room}
+- runFlow: '../../helpers/open-room-actions.yaml'
 - tapOn:
     id: 'room-actions-info'
 - extendedWaitUntil:
@@ -117,10 +115,10 @@ tags:
     file: '../../helpers/search-and-navigate-room.yaml'
     env:
       ROOM: ${output.room}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room}
 
 # should not have message composer
 - assertNotVisible:
@@ -139,10 +137,10 @@ tags:
     id: 'message-broadcast-reply'
 - tapOn:
     id: 'message-broadcast-reply'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.user.username}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.user.username}
 
 # should reply broadcasted message
 - assertVisible:
@@ -165,6 +163,7 @@ tags:
     timeout: 60000
 - tapOn:
     text: 'Jump to message'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room}'
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room}
diff --git a/.maestro/tests/assorted/change-avatar.yaml b/.maestro/tests/assorted/change-avatar.yaml
index 72285dfc884..087c693591e 100644
--- a/.maestro/tests/assorted/change-avatar.yaml
+++ b/.maestro/tests/assorted/change-avatar.yaml
@@ -16,12 +16,11 @@ tags:
     env:
       USERNAME: ${output.user.username}
       PASSWORD: ${output.user.password}
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
@@ -56,8 +55,7 @@ tags:
     id: 'reset-avatar-suggestion'
 
 # should appear the discard alert when click the back icon
-- tapOn:
-    id: 'header-back'
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       text: '.*Discard changes?.*'
@@ -68,8 +66,7 @@ tags:
     timeout: 60000
 - tapOn:
     text: '.*Cancel.*'
-- tapOn:
-    id: 'header-back'
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       text: '.*Discard changes?.*'
diff --git a/.maestro/tests/assorted/changeserver.yaml b/.maestro/tests/assorted/changeserver.yaml
index 897eabe427d..6ae06a0747b 100644
--- a/.maestro/tests/assorted/changeserver.yaml
+++ b/.maestro/tests/assorted/changeserver.yaml
@@ -18,12 +18,7 @@ tags:
       PASSWORD: ${output.user.password}
 
 # should open the servers list, have the server add button and create workspace button
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-header-servers-list'
@@ -57,12 +52,7 @@ tags:
     timeout: 60000
 
 # should add server and create new user
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-header-servers-list'
@@ -107,14 +97,9 @@ tags:
       server: ${output.data.alternateServer}
 
 # should change back to main server
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
 - waitForAnimationToEnd:
     timeout: 5000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-header-servers-list'
@@ -154,12 +139,7 @@ tags:
       server: ${output.data.server}
 
 # should test swipe to delete on alternate server
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'server-item-${output.data.alternateServer}'
@@ -198,12 +178,7 @@ tags:
 # verify alternate server is deleted
 - waitForAnimationToEnd:
     timeout: 500
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     notVisible:
       id: 'server-item-${output.data.alternateServer}'
diff --git a/.maestro/tests/assorted/channel-deeplink.yaml b/.maestro/tests/assorted/channel-deeplink.yaml
index 6edcc747621..5f1d4ea0110 100644
--- a/.maestro/tests/assorted/channel-deeplink.yaml
+++ b/.maestro/tests/assorted/channel-deeplink.yaml
@@ -24,10 +24,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=group/', output.group.name)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.group.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.group.name}
 
 # open group using id
 - killApp
@@ -35,10 +35,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=group/', output.group._id)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.group.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.group.name}
 
 # open channel using name
 - killApp
@@ -46,10 +46,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=channel/', output.channel.name)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.channel.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.channel.name}
 
 # open channel using id
 - killApp
@@ -57,7 +57,7 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=channel/', output.channel._id)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.channel.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.channel.name}
diff --git a/.maestro/tests/assorted/deeplink.yaml b/.maestro/tests/assorted/deeplink.yaml
index 50cd775b78e..eef191bd36e 100644
--- a/.maestro/tests/assorted/deeplink.yaml
+++ b/.maestro/tests/assorted/deeplink.yaml
@@ -37,10 +37,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('auth', output.data.server, 'userId=', output.login.userId, '&token=', output.login.authToken, '&path=group/', output.room.name)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -70,10 +70,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('auth', output.data.server, 'userId=', output.login.userId, '&token=', output.login.authToken, '&path=group/', output.room.name)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -94,10 +94,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=group/', output.room.name)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 
 # should navigate to the thread using path
 - stopApp: ${APP_ID}
@@ -105,10 +105,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=group/', output.room.name, '/thread/', output.result.message._id)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.threadMessage}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.threadMessage}
 
 # should navigate to the room using rid
 - stopApp: ${APP_ID}
@@ -116,10 +116,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'rid=', output.room._id)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -132,10 +132,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=group/', output.room.name)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 
 # should simulate a tap on a push notification and navigate to the room
 # we are skipping this because we can't send push on iOS simulator and for android we have similar test
@@ -146,12 +146,7 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'server-item-${output.data.alternateServer}'
@@ -167,10 +162,10 @@ tags:
     file: '../../helpers/open-deeplink.yaml'
     env:
       link: ${output.utils.getDeepLink('room', output.data.server, 'path=group/', output.room.name)}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 
 # should add a not existing server and fallback to the previous one
 - stopApp: ${APP_ID}
@@ -227,12 +222,7 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'server-item-${output.data.alternateServer}'
@@ -343,8 +333,18 @@ tags:
     visible:
       id: 'new-server-view'
     timeout: 60000
-- assertNotVisible:
-    id: 'room-view-title-${output.room.name}'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertNotVisible:
+          id: 'room-view-title-${output.room.name}'
+- runFlow:
+    when:
+      platform: ios
+    commands:
+      - assertNotVisible:
+          text: '${output.room.name}'
 
 # should show a security confirmation prompt on deep link login and sign in when confirmed
 - runFlow:
@@ -376,10 +376,10 @@ tags:
     commands:
       - tapOn:
           text: 'Login'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/assorted/delete-server.yaml b/.maestro/tests/assorted/delete-server.yaml
index 7e63bee1ea9..f48a289776d 100644
--- a/.maestro/tests/assorted/delete-server.yaml
+++ b/.maestro/tests/assorted/delete-server.yaml
@@ -22,12 +22,7 @@ tags:
       server: ${output.data.server}
 
 # should add server
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-header-server-add'
@@ -67,12 +62,7 @@ tags:
       server: ${output.data.alternateServer}
 
 # should delete server
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'server-item-${output.data.server}'
@@ -109,12 +99,7 @@ tags:
           retryTapIfNoChange: true
 - waitForAnimationToEnd:
     timeout: 300
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-header-servers-list'
diff --git a/.maestro/tests/assorted/display-perf.yaml b/.maestro/tests/assorted/display-perf.yaml
index 54927e65a37..bbdaf0b54d7 100644
--- a/.maestro/tests/assorted/display-perf.yaml
+++ b/.maestro/tests/assorted/display-perf.yaml
@@ -30,18 +30,44 @@ tags:
     label: 'Should have room item'
 
 # should have create channel button
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-    label: 'Should have create channel button'
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'rooms-list-view-create-channel'
+          timeout: 60000
+          label: 'Should have create channel button'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'Create new channel, team, direct message or discussion'
+          timeout: 60000
+          label: 'Should have create channel button'
 
 # should have sidebar button
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-    label: 'Should have sidebar button'
+- runFlow:
+    when:
+      platform: Android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'rooms-list-view-sidebar'
+          timeout: 60000
+          label: 'Should have sidebar button'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'Menu'
+          timeout: 60000
+          label: 'Should have sidebar button'
 
 # should go to Display Preferences
 - runFlow:
diff --git a/.maestro/tests/assorted/i18n.yaml b/.maestro/tests/assorted/i18n.yaml
index b4be402f7b2..928eed1f68a 100644
--- a/.maestro/tests/assorted/i18n.yaml
+++ b/.maestro/tests/assorted/i18n.yaml
@@ -25,8 +25,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
@@ -54,8 +57,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
diff --git a/.maestro/tests/assorted/in-app-notification.yaml b/.maestro/tests/assorted/in-app-notification.yaml
index 7b60d11506f..aa0a6cfe914 100644
--- a/.maestro/tests/assorted/in-app-notification.yaml
+++ b/.maestro/tests/assorted/in-app-notification.yaml
@@ -28,10 +28,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'in-app-notification-Message in DM'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.sender.username}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.sender.username}
 - runFlow: '../../helpers/go-back.yaml'
 
 # receive in another room
@@ -46,10 +46,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'in-app-notification-Another msg'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.sender.username}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.sender.username}
 
 # should tap back and go back to RoomsListView
 - runFlow: '../../helpers/go-back.yaml'
diff --git a/.maestro/tests/assorted/join-from-directory.yaml b/.maestro/tests/assorted/join-from-directory.yaml
index 748345c4f5d..c9673976a5b 100644
--- a/.maestro/tests/assorted/join-from-directory.yaml
+++ b/.maestro/tests/assorted/join-from-directory.yaml
@@ -22,26 +22,23 @@ tags:
       PASSWORD: ${output.user.password}
 
 # should tap directory
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-directory'
-    timeout: 60000
 - waitForAnimationToEnd:
     timeout: 10000
-- tapOn:
-    id: 'rooms-list-view-directory'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-directory'
+      IOS_LABEL: 'Directory'
 - extendedWaitUntil:
     visible:
       id: 'directory-view'
     timeout: 60000
 
 # should search public channel and navigate
-- extendedWaitUntil:
-    visible:
-      id: 'directory-view-search'
-    timeout: 60000
-- tapOn:
-    id: 'directory-view-search'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'directory-view-search'
 - inputText: join-from-directory
 - extendedWaitUntil:
     visible:
@@ -53,56 +50,60 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-join-from-directory'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'join-from-directory'
 
 # should navigate to thread messages view and load messages
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-threads'
-    timeout: 60000
-- tapOn:
-    id: 'room-view-header-threads'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'room-view-header-threads'
+      IOS_LABEL: 'Threads'
 - extendedWaitUntil:
     visible:
       id: 'thread-messages-view-${output.thread}'
     timeout: 60000
-- tapOn:
-    id: 'custom-header-back'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-threads'
-    timeout: 60000
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'room-view-header-threads'
+          timeout: 60000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'Threads'
+          timeout: 60000
 
 # should search user and navigate
-- tapOn:
-    id: 'header-back'
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-directory'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-directory'
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-directory'
+      IOS_LABEL: 'Directory'
 - extendedWaitUntil:
     visible:
       id: 'directory-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'directory-view-filter'
-    timeout: 60000
-- tapOn:
-    id: 'directory-view-filter'
-- extendedWaitUntil:
-    visible:
-      id: 'directory-switch-users'
-    timeout: 60000
-- tapOn:
-    id: 'directory-switch-users'
-- tapOn:
-    id: 'directory-view-search'
+- runFlow:
+    file: '../../helpers/select-header-filter.yaml'
+    env:
+      ANDROID_FILTER_ID: 'directory-view-filter'
+      ANDROID_OPTION_ID: 'directory-switch-users'
+      IOS_OPTION: 'Users'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'directory-view-search'
 - inputText: ${output.otherUser.username}
 - runFlow:
     when:
@@ -119,38 +120,32 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.otherUser.username}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.otherUser.username}
 
 # should search team and navigate
-- tapOn:
-    id: 'header-back'
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-directory'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-directory'
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-directory'
+      IOS_LABEL: 'Directory'
 - extendedWaitUntil:
     visible:
       id: 'directory-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'directory-view-filter'
-    timeout: 60000
-- tapOn:
-    id: 'directory-view-filter'
-- extendedWaitUntil:
-    visible:
-      id: 'directory-switch-teams'
-    timeout: 60000
-- tapOn:
-    id: 'directory-switch-teams'
-- tapOn:
-    id: 'directory-view-search'
+- runFlow:
+    file: '../../helpers/select-header-filter.yaml'
+    env:
+      ANDROID_FILTER_ID: 'directory-view-filter'
+      ANDROID_OPTION_ID: 'directory-switch-teams'
+      IOS_OPTION: 'Teams'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'directory-view-search'
 - inputText: ${output.team}
 - extendedWaitUntil:
     visible:
@@ -162,7 +157,7 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.team}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.team}
diff --git a/.maestro/tests/assorted/join-public-room.yaml b/.maestro/tests/assorted/join-public-room.yaml
index c7f82ad1bd9..c6210a77381 100644
--- a/.maestro/tests/assorted/join-public-room.yaml
+++ b/.maestro/tests/assorted/join-public-room.yaml
@@ -25,8 +25,18 @@ tags:
     id: room-view
 
 # should have actions button
-- assertVisible:
-    id: room-header
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: room-header
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - assertVisible:
+          text: 'More'
 
 # should have join
 - assertVisible:
diff --git a/.maestro/tests/assorted/profile.yaml b/.maestro/tests/assorted/profile.yaml
index 257cc297509..e973fcfe20a 100644
--- a/.maestro/tests/assorted/profile.yaml
+++ b/.maestro/tests/assorted/profile.yaml
@@ -14,12 +14,11 @@ tags:
     env:
       USERNAME: ${output.user.username}
       PASSWORD: ${output.user.password}
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
diff --git a/.maestro/tests/assorted/screen-lock.yaml b/.maestro/tests/assorted/screen-lock.yaml
index 4ea169bfcb4..7fb93da90df 100644
--- a/.maestro/tests/assorted/screen-lock.yaml
+++ b/.maestro/tests/assorted/screen-lock.yaml
@@ -20,8 +20,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-settings'
@@ -122,8 +125,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-settings'
diff --git a/.maestro/tests/assorted/setting.yaml b/.maestro/tests/assorted/setting.yaml
index 9186da79f1e..3d4a08d2143 100644
--- a/.maestro/tests/assorted/setting.yaml
+++ b/.maestro/tests/assorted/setting.yaml
@@ -20,8 +20,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
@@ -177,10 +180,11 @@ tags:
     timeout: 60000
 
 # should navigate to legalview
-- assertVisible:
-    id: 'rooms-list-view-sidebar'
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
diff --git a/.maestro/tests/assorted/status.yaml b/.maestro/tests/assorted/status.yaml
index 88e5f418369..63ef6bcc4fc 100644
--- a/.maestro/tests/assorted/status.yaml
+++ b/.maestro/tests/assorted/status.yaml
@@ -14,12 +14,11 @@ tags:
     env:
       USERNAME: ${output.user.username}
       PASSWORD: ${output.user.password}
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
diff --git a/.maestro/tests/assorted/user-preferences.yaml b/.maestro/tests/assorted/user-preferences.yaml
index 80e026160c5..5e6baa77684 100644
--- a/.maestro/tests/assorted/user-preferences.yaml
+++ b/.maestro/tests/assorted/user-preferences.yaml
@@ -89,8 +89,7 @@ tags:
     id: push-troubleshoot-view-push-gateway-connection
 - assertVisible:
     id: push-troubleshoot-view-notification-delay
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # should have alert in Email
 - assertVisible:
@@ -105,8 +104,7 @@ tags:
     id: notification-preferences-emailNotificationMode-nothing
 - tapOn:
     id: action-sheet-handle
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # ASCII should not be converted to emoji (Android only)
 - runFlow:
@@ -114,8 +112,7 @@ tags:
     when:
       platform: Android
     commands:
-      - tapOn:
-          id: 'custom-header-back'
+      - runFlow: '../../helpers/go-back.yaml'
       - extendedWaitUntil:
           visible:
             id: 'profile-view'
@@ -162,8 +159,7 @@ tags:
     when:
       platform: Android
     commands:
-      - tapOn:
-          id: 'header-back'
+      - runFlow: '../../helpers/go-back.yaml'
       - runFlow:
           file: './utils/go-to-user-preference.yaml'
       - extendedWaitUntil:
@@ -172,8 +168,7 @@ tags:
           timeout: 60000
       - tapOn:
           id: 'preferences-view-convert-ascii-to-emoji'
-      - tapOn:
-          id: 'custom-header-back'
+      - runFlow: '../../helpers/go-back.yaml'
       - extendedWaitUntil:
           visible:
             id: 'profile-view'
diff --git a/.maestro/tests/assorted/utils/check-server.yaml b/.maestro/tests/assorted/utils/check-server.yaml
index 7e180616e21..486c3e14d43 100644
--- a/.maestro/tests/assorted/utils/check-server.yaml
+++ b/.maestro/tests/assorted/utils/check-server.yaml
@@ -4,12 +4,11 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
diff --git a/.maestro/tests/assorted/utils/go-to-accessibility-appearance.yaml b/.maestro/tests/assorted/utils/go-to-accessibility-appearance.yaml
index f54a4946e4c..42b2309f656 100644
--- a/.maestro/tests/assorted/utils/go-to-accessibility-appearance.yaml
+++ b/.maestro/tests/assorted/utils/go-to-accessibility-appearance.yaml
@@ -4,12 +4,11 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-accessibility'
diff --git a/.maestro/tests/assorted/utils/go-to-display-pref.yaml b/.maestro/tests/assorted/utils/go-to-display-pref.yaml
index 4acea68390c..110ae664ff4 100644
--- a/.maestro/tests/assorted/utils/go-to-display-pref.yaml
+++ b/.maestro/tests/assorted/utils/go-to-display-pref.yaml
@@ -4,12 +4,11 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-accessibility'
diff --git a/.maestro/tests/assorted/utils/go-to-room-list.yaml b/.maestro/tests/assorted/utils/go-to-room-list.yaml
index 6734380e054..5dc8737c39e 100644
--- a/.maestro/tests/assorted/utils/go-to-room-list.yaml
+++ b/.maestro/tests/assorted/utils/go-to-room-list.yaml
@@ -4,12 +4,9 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: 'custom-header-back'
-    timeout: 60000
-- tapOn:
-    id: 'custom-header-back'
+- waitForAnimationToEnd:
+    timeout: 10000
+- runFlow: '../../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'accessibility-view-drawer'
diff --git a/.maestro/tests/assorted/utils/go-to-user-preference.yaml b/.maestro/tests/assorted/utils/go-to-user-preference.yaml
index 3a735db6b03..18ac81e4df5 100644
--- a/.maestro/tests/assorted/utils/go-to-user-preference.yaml
+++ b/.maestro/tests/assorted/utils/go-to-user-preference.yaml
@@ -4,12 +4,11 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-profile'
diff --git a/.maestro/tests/assorted/utils/nav-to-language.yaml b/.maestro/tests/assorted/utils/nav-to-language.yaml
index e92b341fad1..1cfd88f8d61 100644
--- a/.maestro/tests/assorted/utils/nav-to-language.yaml
+++ b/.maestro/tests/assorted/utils/nav-to-language.yaml
@@ -8,12 +8,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-sidebar'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: 'sidebar-view'
diff --git a/.maestro/tests/e2ee/flows/create-e2ee-room.yaml b/.maestro/tests/e2ee/flows/create-e2ee-room.yaml
index 02219c31d1d..4c88fb8f384 100644
--- a/.maestro/tests/e2ee/flows/create-e2ee-room.yaml
+++ b/.maestro/tests/e2ee/flows/create-e2ee-room.yaml
@@ -4,12 +4,11 @@ tags:
   - 'flow'
 ---
 - launchApp
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: 'new-message-view'
@@ -23,8 +22,10 @@ tags:
     visible:
       id: 'select-users-view'
     timeout: 60000
-- tapOn:
-    id: 'select-users-view-search'
+- runFlow:
+    file: '../../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - inputText: ${USER_TO_ADD}
 - extendedWaitUntil:
     visible:
@@ -53,7 +54,7 @@ tags:
     id: 'create-channel-encrypted'
 - tapOn:
     id: 'create-channel-submit'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${ROOM}'
-    timeout: 60000
+- runFlow:
+    file: '../../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${ROOM}
diff --git a/.maestro/tests/e2ee/flows/reset-keys-and-send.yaml b/.maestro/tests/e2ee/flows/reset-keys-and-send.yaml
index f607b8d3957..9a2ab1da641 100644
--- a/.maestro/tests/e2ee/flows/reset-keys-and-send.yaml
+++ b/.maestro/tests/e2ee/flows/reset-keys-and-send.yaml
@@ -39,12 +39,33 @@ env:
     visible:
       text: '.*The encryption keys for the room need to be updated, another room member needs to be online for this to happen.*'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-encryption'
-    timeout: 60000
-- tapOn:
-    id: 'room-view-header-encryption'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'room-view-header-encryption'
+          timeout: 60000
+      - tapOn:
+          id: 'room-view-header-encryption'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - runFlow:
+          when:
+            notVisible:
+              text: 'Encrypted'
+          commands:
+            - tapOn:
+                text: 'More'
+      - extendedWaitUntil:
+          visible:
+            text: 'Encrypted'
+          timeout: 60000
+      - tapOn:
+          text: 'Encrypted'
 - extendedWaitUntil:
     visible:
       id: 'e2ee-toggle-room-view'
@@ -69,10 +90,10 @@ env:
     file: '../../../helpers/navigate-to-room.yaml'
     env:
       ROOM: ${ROOM}
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${ROOM}'
-    timeout: 60000
+- runFlow:
+    file: '../../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${ROOM}
 - runFlow:
     file: '../../../helpers/send-message.yaml'
     env:
diff --git a/.maestro/tests/e2ee/utils/navigate-to-e2ee-security.yaml b/.maestro/tests/e2ee/utils/navigate-to-e2ee-security.yaml
index 00c21e89233..e37a6e5bd0e 100644
--- a/.maestro/tests/e2ee/utils/navigate-to-e2ee-security.yaml
+++ b/.maestro/tests/e2ee/utils/navigate-to-e2ee-security.yaml
@@ -18,13 +18,11 @@ tags:
       visible: 'Enter E2EE password'
     commands:
       - assertVisible: Enter E2EE password
-- extendedWaitUntil:
-    visible:
-      id: rooms-list-view-sidebar
-      enabled: true
-    timeout: 60000
-- tapOn:
-    id: rooms-list-view-sidebar
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - extendedWaitUntil:
     visible:
       id: sidebar-view
diff --git a/.maestro/tests/keyboardNavigation/keyboard-navigation-components.yaml b/.maestro/tests/keyboardNavigation/keyboard-navigation-components.yaml
index da7b8376cad..341680e0429 100644
--- a/.maestro/tests/keyboardNavigation/keyboard-navigation-components.yaml
+++ b/.maestro/tests/keyboardNavigation/keyboard-navigation-components.yaml
@@ -72,8 +72,7 @@ tags:
 - pressKey: enter
 
 # open Toasts and Dialogs action sheet and navigate through options
-- tapOn:
-    id: 'custom-header-back'
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'accessibility-view-list'
diff --git a/.maestro/tests/keyboardNavigation/keyboard-navigation-onboarding.yaml b/.maestro/tests/keyboardNavigation/keyboard-navigation-onboarding.yaml
index 8d48340f4ef..c40ca6d8223 100644
--- a/.maestro/tests/keyboardNavigation/keyboard-navigation-onboarding.yaml
+++ b/.maestro/tests/keyboardNavigation/keyboard-navigation-onboarding.yaml
@@ -31,21 +31,49 @@ tags:
     visible:
       id: 'login-view'
     timeout: 60000
-- pressKey: Remote Dpad Down
-- waitForAnimationToEnd:
-    timeout: 1000
-- pressKey: Remote Dpad Down
-- waitForAnimationToEnd:
-    timeout: 1000
-- pressKey: Remote Dpad Down
-- waitForAnimationToEnd:
-    timeout: 1000
-- pressKey: Remote Dpad Down
+- repeat:
+    times: 10
+    while:
+      notVisible:
+        id: 'login-view-email'
+        focused: true
+    commands:
+      - pressKey: Remote Dpad Down
+      - waitForAnimationToEnd:
+          timeout: 1000
+- assertVisible:
+    id: 'login-view-email'
+    focused: true
 - inputText: ${output.user.email}
 - pressKey: enter
-- waitForAnimationToEnd:
-    timeout: 1000
+- repeat:
+    times: 10
+    while:
+      notVisible:
+        id: 'login-view-password'
+        focused: true
+    commands:
+      - pressKey: Remote Dpad Down
+      - waitForAnimationToEnd:
+          timeout: 1000
+- assertVisible:
+    id: 'login-view-password'
+    focused: true
 - inputText: ${output.user.password}
+- hideKeyboard
+- repeat:
+    times: 10
+    while:
+      notVisible:
+        id: 'login-view-submit'
+        focused: true
+    commands:
+      - pressKey: Remote Dpad Down
+      - waitForAnimationToEnd:
+          timeout: 1000
+- assertVisible:
+    id: 'login-view-submit'
+    focused: true
 - pressKey: enter
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/onboarding/roomslist.yaml b/.maestro/tests/onboarding/roomslist.yaml
index ca236a66b74..2421a01478b 100644
--- a/.maestro/tests/onboarding/roomslist.yaml
+++ b/.maestro/tests/onboarding/roomslist.yaml
@@ -19,10 +19,22 @@ tags:
     id: 'rooms-list-view'
 - assertVisible:
     id: 'rooms-list-view-item-general'
-- assertVisible:
-    id: 'rooms-list-view-create-channel'
-- assertVisible:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: 'rooms-list-view-create-channel'
+      - assertVisible:
+          id: 'rooms-list-view-sidebar'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - assertVisible:
+          text: 'Create new channel, team, direct message or discussion'
+      - assertVisible:
+          text: 'Menu'
 - runFlow:
     file: ../../helpers/search-room.yaml
     env:
diff --git a/.maestro/tests/performance/scroll-room-to-top.yaml b/.maestro/tests/performance/scroll-room-to-top.yaml
new file mode 100644
index 00000000000..cbd8dc26ffe
--- /dev/null
+++ b/.maestro/tests/performance/scroll-room-to-top.yaml
@@ -0,0 +1,35 @@
+appId: ${APP_ID}
+name: Scroll room to top
+env:
+  ROOM: message-variations-tester
+onFlowStart:
+  - runFlow: '../../helpers/setup.yaml'
+tags:
+  - 'performance'
+  - 'util'
+---
+- runFlow:
+    file: '../../helpers/login-with-deeplink.yaml'
+    env:
+      USERNAME: ${output.account.adminUser}
+      PASSWORD: ${output.account.adminPassword}
+      CLEAR_STATE: true
+- startRecording: scroll-room-to-top
+- runFlow:
+    file: '../../helpers/search-and-navigate-room.yaml'
+    env:
+      ROOM: ${ROOM}
+- extendedWaitUntil:
+    visible:
+      id: 'room-view'
+    timeout: 60000
+- repeat:
+    while:
+      notVisible:
+        text: '.*SYSTEM MESSAGES.*'
+    commands:
+      - swipe:
+          start: 50%, 20%
+          end: 50%, 95%
+          duration: 40
+- stopRecording
diff --git a/.maestro/tests/room/create-dm-group.yaml b/.maestro/tests/room/create-dm-group.yaml
index 12750ea7d0d..340078ba699 100644
--- a/.maestro/tests/room/create-dm-group.yaml
+++ b/.maestro/tests/room/create-dm-group.yaml
@@ -18,12 +18,11 @@ tags:
     env:
       USERNAME: ${output.user.username}
       PASSWORD: ${output.user.password}
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 
 # should have new message screen
 - extendedWaitUntil:
@@ -46,12 +45,10 @@ tags:
     id: 'new-message-view-create-direct-message'
 
 # should add users
-- extendedWaitUntil:
-    visible:
-      id: 'select-users-view-search'
-    timeout: 60000
-- tapOn:
-    id: 'select-users-view-search'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - inputText: 'rocket.cat'
 - extendedWaitUntil:
     visible:
@@ -59,8 +56,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'select-users-view-item-rocket.cat'
-- tapOn:
-    id: 'select-users-view-search'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - eraseText
 - inputText: ${output.otherUser.username}
 - extendedWaitUntil:
@@ -77,7 +76,7 @@ tags:
     id: 'selected-users-view-submit'
 
 # check Group DM exist
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-rocket.cat, ${output.otherUser.username}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'rocket.cat, ${output.otherUser.username}'
diff --git a/.maestro/tests/room/create-room.yaml b/.maestro/tests/room/create-room.yaml
index d7dc2f2df39..fc8219920eb 100644
--- a/.maestro/tests/room/create-room.yaml
+++ b/.maestro/tests/room/create-room.yaml
@@ -15,12 +15,11 @@ tags:
       USERNAME: ${output.user.username}
       PASSWORD: ${output.user.password}
 
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 
 # should have new message screen
 - extendedWaitUntil:
@@ -45,8 +44,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: 'new-message-view'
@@ -70,10 +72,10 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-rocket.cat'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'rocket.cat'
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -81,12 +83,11 @@ tags:
     timeout: 60000
 
 # should navigate to select users
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: 'new-message-view'
@@ -103,12 +104,10 @@ tags:
     timeout: 60000
 
 # should search users
-- extendedWaitUntil:
-    visible:
-      id: 'select-users-view-search'
-    timeout: 60000
-- tapOn:
-    id: 'select-users-view-search'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - inputText: 'rocket.cat'
 - extendedWaitUntil:
     visible:
@@ -203,10 +202,10 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: ${'room-view-title-' + output.publicRoomName}
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.publicRoomName}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -223,12 +222,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: 'new-message-view'
@@ -269,10 +267,10 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: ${'room-view-title-' + output.privateRoomName}
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.privateRoomName}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -289,12 +287,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-view-create-channel'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: 'new-message-view'
@@ -333,10 +330,10 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: ${'room-view-title-' + output.emptyRoomName}
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.emptyRoomName}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/room/discussion.yaml b/.maestro/tests/room/discussion.yaml
index 3fc7f536218..380306dec08 100644
--- a/.maestro/tests/room/discussion.yaml
+++ b/.maestro/tests/room/discussion.yaml
@@ -25,10 +25,11 @@ tags:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- assertVisible:
-    id: 'rooms-list-view-create-channel'
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: 'new-message-view'
@@ -44,12 +45,10 @@ tags:
       id: 'select-users-view'
     timeout: 60000
 # Select users in SelectedUsersView
-- extendedWaitUntil:
-    visible:
-      id: 'select-users-view-search'
-    timeout: 60000
-- tapOn:
-    id: 'select-users-view-search'
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - inputText: ${output.selectUser}
 - extendedWaitUntil:
     visible:
@@ -89,18 +88,17 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.discussionFromNewMessage}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.discussionFromNewMessage}
 - runFlow: '../../helpers/hide-keyboard.yaml'
 - runFlow:
     when:
       visible:
         id: 'room-view'
     commands:
-      - tapOn:
-          id: 'header-back'
+      - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view-item-${output.discussionFromNewMessage}'
@@ -142,10 +140,10 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.discussionFromMessageComposer}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.discussionFromMessageComposer}
 
 # Create Discussion from action sheet
 - extendedWaitUntil:
@@ -183,21 +181,13 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-message'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'message'
 
 # Check RoomActionsView render
-- assertVisible:
-    id: room-header
-- tapOn:
-    id: room-header
-    retryTapIfNoChange: true
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow: '../../helpers/open-room-actions.yaml'
 
 # should have room actions screen
 - assertVisible:
@@ -259,20 +249,17 @@ tags:
     id: room-info-view-edit-button
 
 # should go back to main room
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-view'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-view-messages'
     timeout: 60000
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view'
@@ -283,12 +270,7 @@ tags:
       ROOM: ${output.room.name}
 
 # should navigate to DiscussionsView
-- extendedWaitUntil:
-    visible:
-      id: 'room-header'
-    timeout: 60000
-- tapOn:
-    id: 'room-header'
+- runFlow: '../../helpers/open-room-actions.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-discussions'
@@ -307,7 +289,7 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'discussions-view-${output.discussionFromNewMessage}'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.discussionFromNewMessage}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.discussionFromNewMessage}
diff --git a/.maestro/tests/room/ignoreuser.yaml b/.maestro/tests/room/ignoreuser.yaml
index f2ea05b2a37..90fe1d4b380 100644
--- a/.maestro/tests/room/ignoreuser.yaml
+++ b/.maestro/tests/room/ignoreuser.yaml
@@ -224,10 +224,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'report-user-view-submit'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.otherUser.username}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.otherUser.username}
 
 # should go to user info view from a channel
 - runFlow: '../../helpers/go-back.yaml'
@@ -281,7 +281,7 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'report-user-view-submit'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
diff --git a/.maestro/tests/room/jump-to-message.yaml b/.maestro/tests/room/jump-to-message.yaml
index e6cfb9dcd03..4c966f24015 100644
--- a/.maestro/tests/room/jump-to-message.yaml
+++ b/.maestro/tests/room/jump-to-message.yaml
@@ -85,12 +85,24 @@ tags:
     file: '../../helpers/search-and-navigate-room.yaml'
     env:
       ROOM: 'jumping'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-search'
-    timeout: 60000
-- tapOn:
-    id: 'room-view-search'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          text: 'More'
+      - tapOn:
+          text: 'Search messages'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'room-view-search'
+          timeout: 60000
+      - tapOn:
+          id: 'room-view-search'
 - extendedWaitUntil:
     visible:
       id: 'search-messages-view'
@@ -183,8 +195,7 @@ tags:
     visible:
       id: 'message-content-202'
     timeout: 60000
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # should navigate to a thread from another room
 - runFlow:
@@ -208,14 +219,13 @@ tags:
     file: './utils/expect-thread-messages.yaml'
     env:
       message: Go to jumping-thread's thread
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # should tap on thread message from main room
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-jumping-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'jumping-thread'
 - extendedWaitUntil:
     visible:
       text: '.*thread message sent to main room.*'
@@ -227,14 +237,13 @@ tags:
     file: './utils/expect-thread-messages.yaml'
     env:
       message: 'thread message sent to main room'
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # should tap on quote
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-jumping-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'jumping-thread'
 - extendedWaitUntil:
     visible:
       id: '.*reply-.*-quoted.*'
@@ -252,16 +261,27 @@ tags:
     file: './utils/expect-thread-messages.yaml'
     env:
       message: 'quoted'
-- tapOn:
-    id: 'header-back'
+- runFlow: '../../helpers/go-back.yaml'
 
 # should jump from search message
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-jumping-thread'
-    timeout: 60000
-- tapOn:
-    id: 'room-view-search'
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'jumping-thread'
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - tapOn:
+          text: 'More'
+      - tapOn:
+          text: 'Search messages'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - tapOn:
+          id: 'room-view-search'
 - extendedWaitUntil:
     visible:
       id: 'search-messages-view'
diff --git a/.maestro/tests/room/message-markdown-click.yaml b/.maestro/tests/room/message-markdown-click.yaml
index f0a746f2648..c6ea511cd20 100644
--- a/.maestro/tests/room/message-markdown-click.yaml
+++ b/.maestro/tests/room/message-markdown-click.yaml
@@ -57,14 +57,13 @@ tags:
     text: '.*detox-public.*'
 
 # Go back to room
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # Wait for room view to be visible again
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-maestro-message-clickable-test'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: maestro-message-clickable-test
 
 # Tap on the URL link to open alert
 - runFlow:
@@ -137,61 +136,58 @@ tags:
     text: '.*e2e_admin.*'
 
 # Go back to room
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # Wait for room view to be visible again
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-maestro-message-clickable-test'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: maestro-message-clickable-test
 
 # 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
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: message with thread
 
 # Go back to main room
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # Wait for room view to be visible again
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-maestro-message-clickable-test'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: maestro-message-clickable-test
 
 # 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
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: message with thread
 
 # Go back to main room
-- tapOn:
-    id: header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # Wait for room view to be visible again
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-maestro-message-clickable-test'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: maestro-message-clickable-test
 
 # 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
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: message with thread
diff --git a/.maestro/tests/room/room-actions.yaml b/.maestro/tests/room/room-actions.yaml
index 52a1d7332a9..da3f531a434 100644
--- a/.maestro/tests/room/room-actions.yaml
+++ b/.maestro/tests/room/room-actions.yaml
@@ -93,14 +93,12 @@ tags:
     visible:
       id: 'mentioned-messages-view'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-view'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # should star and show in starred message
 - runFlow:
@@ -131,12 +129,7 @@ tags:
     notVisible:
       text: '.*Message Starred.*'
     timeout: 60000
-- tapOn:
-    id: 'room-header'
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow: '../../helpers/open-room-actions.yaml'
 - tapOn:
     id: 'room-actions-starred'
     retryTapIfNoChange: true
@@ -149,14 +142,12 @@ tags:
       id: 'message-content-messageToStar'
     timeout: 60000
 # should unstar
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-view'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: message-content-messageToStar
@@ -181,12 +172,7 @@ tags:
     notVisible:
       text: '.*Message Unstarred.*'
     timeout: 60000
-- tapOn:
-    id: 'room-header'
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow: '../../helpers/open-room-actions.yaml'
 - tapOn:
     id: 'room-actions-starred'
     retryTapIfNoChange: true
@@ -198,14 +184,12 @@ tags:
     notVisible:
       id: 'message-content-messageToStar'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-view'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 
 # should pin a message and show in pinned
 - runFlow:
@@ -236,12 +220,7 @@ tags:
     visible:
       text: '.*Pinned a message:.*'
     timeout: 60000
-- tapOn:
-    id: 'room-header'
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow: '../../helpers/open-room-actions.yaml'
 - tapOn: Pinned
 - extendedWaitUntil:
     visible:
@@ -261,8 +240,7 @@ tags:
     notVisible:
       id: 'message-content-messageToPin'
     timeout: 60000
-- tapOn:
-    id: 'custom-header-back'
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-view'
@@ -324,8 +302,7 @@ tags:
       id: 'notification-preference-view-email-alert'
     timeout: 60000
 
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-view'
@@ -387,12 +364,10 @@ tags:
     visible:
       id: 'selected-user-rocket.cat'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'select-users-view-search'
-    timeout: 60000
-- tapOn:
-    id: select-users-view-search
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - inputText: ${output.otherUser.username}
 - extendedWaitUntil:
     visible:
@@ -406,8 +381,7 @@ tags:
     timeout: 60000
 - tapOn:
     id: selected-users-view-submit
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       text: '.*3 members.*'
@@ -420,18 +394,12 @@ tags:
     visible:
       id: 'room-members-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-members-view-filter'
-    timeout: 60000
-- tapOn:
-    id: 'room-members-view-filter'
-- extendedWaitUntil:
-    visible:
-      id: 'room-members-view-toggle-status-all'
-    timeout: 60000
-- tapOn:
-    id: 'room-members-view-toggle-status-all'
+- runFlow:
+    file: '../../helpers/select-header-filter.yaml'
+    env:
+      ANDROID_FILTER_ID: 'room-members-view-filter'
+      ANDROID_OPTION_ID: 'room-members-view-toggle-status-all'
+      IOS_OPTION: 'All'
 - extendedWaitUntil:
     notVisible:
       id: 'room-members-view-toggle-status-all'
@@ -440,8 +408,7 @@ tags:
     visible:
       id: 'room-members-view-item-${output.otherUser.username}'
     timeout: 60000
-- tapOn:
-    id: 'custom-header-back'
+- runFlow: '../../helpers/go-back.yaml'
 
 # should filter user
 - tapOn:
@@ -450,12 +417,10 @@ tags:
     visible:
       id: 'room-members-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-members-view-search'
-    timeout: 60000
-- tapOn:
-    id: room-members-view-search
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'room-members-view-search'
 - inputText: 'rocket'
 - tapOn:
     id: room-members-view
@@ -467,8 +432,7 @@ tags:
     notVisible:
       id: 'room-members-view-item-${output.otherUser.username}'
     timeout: 60000
-- tapOn:
-    id: clear-text-input
+- runFlow: '../../helpers/clear-search-field.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-members-view-item-rocket.cat'
@@ -697,14 +661,12 @@ tags:
     visible:
       text: 'User has been ignored'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-view'
     timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       text: '.*Message ignored. Tap to display it.*'
@@ -717,12 +679,7 @@ tags:
     timeout: 60000
 
 # should navigate to direct message
-- tapOn:
-    id: 'room-header'
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow: '../../helpers/open-room-actions.yaml'
 - tapOn:
     id: 'room-actions-members'
 - extendedWaitUntil:
@@ -745,10 +702,10 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.otherUser.username}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.otherUser.username}
 - tapOn: Back
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/room/room-info.yaml b/.maestro/tests/room/room-info.yaml
index 7859a2a7fa1..0078cc1f46f 100644
--- a/.maestro/tests/room/room-info.yaml
+++ b/.maestro/tests/room/room-info.yaml
@@ -141,8 +141,7 @@ tags:
     timeout: 60000
 
 # should reset form
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - tapOn:
     id: room-info-view-edit-button
 - extendedWaitUntil:
@@ -278,8 +277,7 @@ tags:
     id: 'room-info-edit-view-react-when-ro'
 
 # should change room name
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - tapOn:
     id: room-info-view-edit-button
 - evalScript: ${output.newroomname = output.room.name + 'new'}
@@ -305,8 +303,7 @@ tags:
           visible:
             text: '.*Settings succesfully changed.*'
           timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-info-view'
@@ -367,8 +364,7 @@ tags:
           visible:
             text: '.*Settings succesfully changed.*'
           timeout: 60000
-- tapOn:
-    id: custom-header-back
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-info-view'
diff --git a/.maestro/tests/room/room.yaml b/.maestro/tests/room/room.yaml
index a719d7f004c..092470c6269 100644
--- a/.maestro/tests/room/room.yaml
+++ b/.maestro/tests/room/room.yaml
@@ -483,10 +483,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: message-actions-reply-in-dm
-- extendedWaitUntil:
-    visible:
-      id: room-view-title-${output.replyUser.username}
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.replyUser.username}
 - extendedWaitUntil:
     visible:
       id: message-composer-input
diff --git a/.maestro/tests/room/search-member.yaml b/.maestro/tests/room/search-member.yaml
index 40c7e07a35f..9fe42658adc 100644
--- a/.maestro/tests/room/search-member.yaml
+++ b/.maestro/tests/room/search-member.yaml
@@ -20,22 +20,15 @@ tags:
     file: '../../helpers/navigate-to-room.yaml'
     env:
       ROOM: 'general'
-- tapOn:
-    id: room-header
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow: '../../helpers/open-room-actions.yaml'
 - tapOn:
     id: 'room-actions-members'
-- extendedWaitUntil:
-    visible:
-      id: 'room-members-view-search'
-    timeout: 60000
 
 # should search in all users
-- tapOn:
-    id: room-members-view-search
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'room-members-view-search'
 - inputText: rohit.bansal
 - extendedWaitUntil:
     visible:
@@ -43,40 +36,37 @@ tags:
     timeout: 60000
 
 # use online status and it should use the text filter
-- tapOn:
-    id: room-members-view-filter
-- extendedWaitUntil:
-    visible:
-      id: 'room-members-view-toggle-status-online'
-    timeout: 60000
-- tapOn:
-    id: room-members-view-toggle-status-online
+- runFlow:
+    file: '../../helpers/select-header-filter.yaml'
+    env:
+      ANDROID_FILTER_ID: 'room-members-view-filter'
+      ANDROID_OPTION_ID: 'room-members-view-toggle-status-online'
+      IOS_OPTION: 'Online'
 - extendedWaitUntil:
     visible:
       text: 'No members found'
     timeout: 60000
 
 # use all status again and it should use text filter
-- tapOn:
-    id: room-members-view-filter
-- extendedWaitUntil:
-    visible:
-      id: 'room-members-view-toggle-status-all'
-    timeout: 60000
-- tapOn:
-    id: room-members-view-toggle-status-all
+- runFlow:
+    file: '../../helpers/select-header-filter.yaml'
+    env:
+      ANDROID_FILTER_ID: 'room-members-view-filter'
+      ANDROID_OPTION_ID: 'room-members-view-toggle-status-all'
+      IOS_OPTION: 'All'
 - extendedWaitUntil:
     visible:
       id: 'room-members-view-item-rohit.bansal'
     timeout: 60000
-- tapOn:
-    id: clear-text-input
+- runFlow: '../../helpers/clear-search-field.yaml'
 
 - evalScript: ${output.secondUser = output.utils.createUser()}
 
 # should search for new user in all list
-- tapOn:
-    id: room-members-view-search
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'room-members-view-search'
 - inputText: ${output.secondUser.username}
 - extendedWaitUntil:
     visible:
@@ -84,8 +74,10 @@ tags:
     timeout: 60000
 
 # Verify "No members found" message appears correctly when search returns no results
-- tapOn:
-    id: room-members-view-search
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'room-members-view-search'
 - inputText: nonexistentuser12345
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/room/servers-list-small-screen.yaml b/.maestro/tests/room/servers-list-small-screen.yaml
index 685822b104b..ed2c7216818 100644
--- a/.maestro/tests/room/servers-list-small-screen.yaml
+++ b/.maestro/tests/room/servers-list-small-screen.yaml
@@ -20,12 +20,7 @@ tags:
 
 # should fully render the Workspaces action sheet on small screens
 # (regression for small-screen ServersList — the Add Server button was cut off on iPhone SE)
-- extendedWaitUntil:
-    visible:
-      id: 'rooms-list-header-servers-list-button'
-    timeout: 60000
-- tapOn:
-    id: 'rooms-list-header-servers-list-button'
+- runFlow: '../../helpers/open-servers-list.yaml'
 - waitForAnimationToEnd
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/room/share-message.yaml b/.maestro/tests/room/share-message.yaml
index 461818f2f37..0448192fe26 100644
--- a/.maestro/tests/room/share-message.yaml
+++ b/.maestro/tests/room/share-message.yaml
@@ -89,10 +89,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'forward-message-view-send'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 
 # should go to otherUser DM and verify if exist both messages
 - runFlow: '../../helpers/go-back.yaml'
diff --git a/.maestro/tests/room/threads.yaml b/.maestro/tests/room/threads.yaml
index f45f17151b4..181e690beda 100644
--- a/.maestro/tests/room/threads.yaml
+++ b/.maestro/tests/room/threads.yaml
@@ -23,22 +23,46 @@ tags:
       ROOM: ${output.room.name}
 
 # should have room screen
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 
 # should have actions button
-- extendedWaitUntil:
-    visible:
-      id: 'room-header'
-    timeout: 60000
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'room-header'
+          timeout: 60000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'More'
+          timeout: 60000
 
 # should have threads button
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-threads'
-    timeout: 60000
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'room-view-header-threads'
+          timeout: 60000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'Threads'
+          timeout: 60000
 
 # should create thread
 - runFlow:
@@ -61,10 +85,10 @@ tags:
     timeout: 60000
 - tapOn:
     text: 'Reply in thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
 - extendedWaitUntil:
     visible:
       id: 'message-composer-input-thread'
@@ -78,41 +102,50 @@ tags:
     visible:
       id: 'message-content-replied'
     timeout: 60000
-- tapOn:
-    id: 'header-back'
+- runFlow: '../../helpers/go-back.yaml'
 # should navigate to thread from button
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - extendedWaitUntil:
     visible:
       id: 'message-thread-button-thread'
     timeout: 60000
 - tapOn:
     id: 'message-thread-button-thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
 
 # should toggle follow thread
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-unfollow'
-    timeout: 60000
-- tapOn:
-    id: 'room-view-header-unfollow'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-follow'
-    timeout: 60000
-- tapOn:
-    id: 'room-view-header-follow'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-unfollow'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'room-view-header-unfollow'
+      IOS_LABEL: 'Unfollow thread'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'room-view-header-follow'
+      IOS_LABEL: 'Follow thread'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          visible:
+            id: 'room-view-header-unfollow'
+          timeout: 60000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          visible:
+            text: 'Unfollow thread'
+          timeout: 60000
 
 # should send message in thread only
 - runFlow:
@@ -120,16 +153,27 @@ tags:
     env:
       message: threadonly
       isThread: 'true'
-- tapOn:
-    id: 'header-back'
-- extendedWaitUntil:
-    notVisible:
-      id: 'room-view-title-thread'
-    timeout: 5000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 5000
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            id: 'room-view-title-thread'
+          timeout: 5000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            text: 'thread'
+          timeout: 5000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - extendedWaitUntil:
     notVisible:
       id: 'message-content-threadonly'
@@ -142,10 +186,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'message-thread-button-thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
 - tapOn:
     id: 'message-composer-input-thread'
 - inputText: 'sendToChannel'
@@ -153,16 +197,27 @@ tags:
     id: send-to-channel-unchecked
 - tapOn:
     id: message-composer-send
-- tapOn:
-    id: header-back
-- extendedWaitUntil:
-    notVisible:
-      id: 'room-view-title-thread'
-    timeout: 5000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 5000
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            id: 'room-view-title-thread'
+          timeout: 5000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            text: 'thread'
+          timeout: 5000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - extendedWaitUntil:
     visible:
       text: '.*sendToChannel.*'
@@ -186,36 +241,45 @@ tags:
     id: 'message-composer-send-to-channel'
 - tapOn:
     id: 'message-composer-send'
-- tapOn:
-    id: 'header-back'
-- extendedWaitUntil:
-    notVisible:
-      id: 'room-view-title-thread'
-    timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            id: 'room-view-title-thread'
+          timeout: 60000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            text: 'thread'
+          timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - extendedWaitUntil:
     visible:
       id: 'message-content-navthreadname'
     timeout: 60000
 - tapOn:
     id: 'message-content-navthreadname'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
-- tapOn:
-    id: 'header-back'
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
+- runFlow: '../../helpers/go-back.yaml'
 
 # should navigate to thread from threads view
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-header-threads'
-    timeout: 60000
-- tapOn:
-    id: 'room-view-header-threads'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'room-view-header-threads'
+      IOS_LABEL: 'Threads'
 - extendedWaitUntil:
     visible:
       id: 'thread-messages-view'
@@ -226,12 +290,11 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'thread-messages-view-thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
-- tapOn:
-    id: 'header-back'
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
+- runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-view-messages'
@@ -244,15 +307,14 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'message-thread-button-thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
 - tapOn:
     id: 'message-composer-input-thread'
 - inputText: 'draftthread'
-- tapOn:
-    id: 'header-back'
+- runFlow: '../../helpers/go-back.yaml'
 
 - extendedWaitUntil:
     visible:
@@ -260,10 +322,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'message-thread-button-thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
 - extendedWaitUntil:
     visible:
       text: '.*draftthread.*'
@@ -271,8 +333,7 @@ tags:
 - tapOn:
     id: 'message-composer-input-thread'
 - eraseText
-- tapOn:
-    id: 'header-back'
+- runFlow: '../../helpers/go-back.yaml'
 
 - extendedWaitUntil:
     visible:
@@ -280,10 +341,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'message-thread-button-thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread'
 - extendedWaitUntil:
     notVisible:
       text: '.*draftthread.*'
@@ -292,16 +353,27 @@ tags:
     visible:
       text: '.*Add thread reply.*'
     timeout: 60000
-- tapOn:
-    id: 'header-back'
-- extendedWaitUntil:
-    notVisible:
-      id: 'room-view-title-thread'
-    timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            id: 'room-view-title-thread'
+          timeout: 60000
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - extendedWaitUntil:
+          notVisible:
+            text: 'thread'
+          timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 
 # should create thread delete the message and the thread show the correct number of messages
 - runFlow:
@@ -324,10 +396,10 @@ tags:
     timeout: 60000
 - tapOn:
     text: 'Reply in thread'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread-message-count'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread-message-count'
 - extendedWaitUntil:
     visible:
       id: 'message-composer-input-thread'
@@ -374,12 +446,11 @@ tags:
       text: '.*You will not be able to recover this message.*'
     timeout: 60000
 - tapOn: 'DELETE'
-- tapOn:
-    id: 'header-back'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.room.name}'
-    timeout: 60000
+- runFlow: '../../helpers/go-back.yaml'
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.room.name}
 - extendedWaitUntil:
     visible:
       id: 'thread-count-0'
diff --git a/.maestro/tests/room/unread-badge.yaml b/.maestro/tests/room/unread-badge.yaml
index c52cfff178b..f0054edfa1b 100644
--- a/.maestro/tests/room/unread-badge.yaml
+++ b/.maestro/tests/room/unread-badge.yaml
@@ -34,9 +34,7 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'rooms-list-view-item-${output.otherUser.username}'
-- tapOn:
-    id: header-back
-    retryTapIfNoChange: true
+- runFlow: '../../helpers/go-back.yaml'
 - waitForAnimationToEnd:
     timeout: 5000
 - extendedWaitUntil:
@@ -62,9 +60,7 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'rooms-list-view-item-${output.otherUser.username}'
-- tapOn:
-    id: header-back
-    retryTapIfNoChange: true
+- runFlow: '../../helpers/go-back.yaml'
 - waitForAnimationToEnd:
     timeout: 5000
 - extendedWaitUntil:
@@ -91,9 +87,7 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'rooms-list-view-item-${output.otherUser.username}'
-- tapOn:
-    id: header-back
-    retryTapIfNoChange: true
+- runFlow: '../../helpers/go-back.yaml'
 - waitForAnimationToEnd:
     timeout: 5000
 - extendedWaitUntil:
@@ -120,9 +114,7 @@ tags:
     timeout: 60000
 - tapOn:
     id: 'rooms-list-view-item-${output.otherUser.username}'
-- tapOn:
-    id: header-back
-    retryTapIfNoChange: true
+- runFlow: '../../helpers/go-back.yaml'
 - waitForAnimationToEnd:
     timeout: 5000
 - extendedWaitUntil:
diff --git a/.maestro/tests/room/utils/clear-cache.yaml b/.maestro/tests/room/utils/clear-cache.yaml
index bf087ac3e01..d54f70f408a 100644
--- a/.maestro/tests/room/utils/clear-cache.yaml
+++ b/.maestro/tests/room/utils/clear-cache.yaml
@@ -8,14 +8,16 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- tapOn:
-    id: 'header-back'
+- runFlow: '../../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
       id: 'rooms-list-view'
     timeout: 60000
-- tapOn:
-    id: 'rooms-list-view-sidebar'
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-sidebar'
+      IOS_LABEL: 'Menu'
 - waitForAnimationToEnd:
     timeout: 60000
 - extendedWaitUntil:
diff --git a/.maestro/tests/room/utils/expect-thread-messages.yaml b/.maestro/tests/room/utils/expect-thread-messages.yaml
index 5f3fbc3ae44..ec204c19e36 100644
--- a/.maestro/tests/room/utils/expect-thread-messages.yaml
+++ b/.maestro/tests/room/utils/expect-thread-messages.yaml
@@ -4,10 +4,10 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-thread 1'
-    timeout: 60000
+- runFlow:
+    file: '../../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: 'thread 1'
 - extendedWaitUntil:
     visible:
       id: '.*message-content-${message}.*'
diff --git a/.maestro/tests/room/utils/navigate-to-info-view.yaml b/.maestro/tests/room/utils/navigate-to-info-view.yaml
index c2b33f0a718..71308b4d3dd 100644
--- a/.maestro/tests/room/utils/navigate-to-info-view.yaml
+++ b/.maestro/tests/room/utils/navigate-to-info-view.yaml
@@ -4,16 +4,7 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: room-header
-    timeout: 60000
-- tapOn:
-    id: room-header
-- extendedWaitUntil:
-    visible:
-      id: room-actions-view
-    timeout: 60000
+- runFlow: '../../../helpers/open-room-actions.yaml'
 - assertVisible:
     id: room-actions-info
 - tapOn:
diff --git a/.maestro/tests/room/utils/navigate-to-room-info.yaml b/.maestro/tests/room/utils/navigate-to-room-info.yaml
index b440852dcbe..4c419f0c9d2 100644
--- a/.maestro/tests/room/utils/navigate-to-room-info.yaml
+++ b/.maestro/tests/room/utils/navigate-to-room-info.yaml
@@ -8,16 +8,7 @@ tags:
     file: '../../../helpers/search-and-navigate-room.yaml'
     env:
       ROOM: ${ROOM}
-- extendedWaitUntil:
-    visible:
-      id: 'room-header'
-    timeout: 60000
-- tapOn:
-    id: 'room-header'
-- extendedWaitUntil:
-    visible:
-      id: 'room-actions-view'
-    timeout: 60000
+- runFlow: '../../../helpers/open-room-actions.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-info'
diff --git a/.maestro/tests/teams/convert-team.yaml b/.maestro/tests/teams/convert-team.yaml
index 9820ad29154..0442b800a1b 100644
--- a/.maestro/tests/teams/convert-team.yaml
+++ b/.maestro/tests/teams/convert-team.yaml
@@ -42,10 +42,10 @@ tags:
     text: 'Convert'
 - tapOn:
     text: 'Convert'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.publicChannelToBeConverted}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.publicChannelToBeConverted}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -74,10 +74,10 @@ tags:
     text: 'Convert'
 - tapOn:
     text: 'Convert'
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.toBeConverted}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.toBeConverted}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
@@ -124,12 +124,7 @@ tags:
     text: 'Yes, move it!'
 - tapOn:
     text: 'Yes, move it!'
-- extendedWaitUntil:
-    visible:
-      id: 'room-header'
-    timeout: 60000
-- tapOn:
-    id: 'room-header'
+- runFlow: '../../helpers/open-room-actions.yaml'
 - extendedWaitUntil:
     visible:
       id: 'room-actions-teams'
@@ -178,10 +173,10 @@ tags:
     visible:
       id: 'room-view'
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: 'room-view-title-${output.toBeConverted}'
-    timeout: 60000
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.toBeConverted}
 - runFlow: '../../helpers/go-back.yaml'
 - extendedWaitUntil:
     visible:
diff --git a/.maestro/tests/teams/create-team.yaml b/.maestro/tests/teams/create-team.yaml
index a587cd06daf..fbc106dd3ff 100644
--- a/.maestro/tests/teams/create-team.yaml
+++ b/.maestro/tests/teams/create-team.yaml
@@ -17,10 +17,11 @@ tags:
       USERNAME: ${output.user.username}
       PASSWORD: ${output.user.password}
 
-- assertVisible:
-    id: 'rooms-list-view-create-channel'
-- tapOn:
-    id: 'rooms-list-view-create-channel'
+- runFlow:
+    file: '../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - assertVisible:
     id: 'new-message-view-create-team'
 - tapOn:
@@ -39,10 +40,11 @@ tags:
     id: 'create-channel-submit'
 - assertVisible:
     id: 'room-view-messages'
-- assertVisible:
-    id: 'room-view-title-${output.teamname}'
-- tapOn:
-    id: 'room-header'
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.teamname}
+- runFlow: '../../helpers/open-room-actions.yaml'
 - assertVisible:
     id: 'room-actions-info'
 - tapOn:
diff --git a/.maestro/tests/teams/team.yaml b/.maestro/tests/teams/team.yaml
index 91274b1131c..4b64887b3ce 100644
--- a/.maestro/tests/teams/team.yaml
+++ b/.maestro/tests/teams/team.yaml
@@ -25,18 +25,39 @@ tags:
       ROOM: ${output.team}
 
 # Team Header
-- assertVisible:
-    id: room-header
-- assertVisible:
-    id: room-view-header-call
-- assertVisible:
-    id: room-view-header-threads
-- assertVisible:
-    id: room-view-search
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: room-header
+      - assertVisible:
+          id: room-view-search
+      - assertVisible:
+          id: room-view-header-call
+      - assertVisible:
+          id: room-view-header-threads
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - assertVisible:
+          text: '.*Call.*'
+      - assertVisible:
+          text: 'Threads'
+      - tapOn:
+          text: 'More'
+      - extendedWaitUntil:
+          visible:
+            id: 'action-sheet'
+          timeout: 60000
+      - assertVisible:
+          text: 'Search messages'
+      - tapOn:
+          id: 'action-sheet-handle'
 
 # Team Action Usage
-- tapOn:
-    id: room-header
+- runFlow: '../../helpers/open-room-actions.yaml'
 - tapOn:
     id: room-actions-teams
 - extendedWaitUntil:
@@ -46,15 +67,30 @@ tags:
     label: Should navigate to team channels view
 
 # Team Channels Header
-- assertVisible:
-    id: room-header
-    label: Should have actions button
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: room-header
+          label: Should have actions button
 - assertVisible:
     id: team-channels-view-create
     label: Should have team channels button
-- assertVisible:
-    id: team-channels-view-search
-    label: Should have search button
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - assertVisible:
+          id: magnifyingglass
+          label: Should have system search bar
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: team-channels-view-search
+          label: Should have search button
 
 # Team Channels Header Usage
 - tapOn:
@@ -78,13 +114,11 @@ tags:
 # Create new channel for team
 - tapOn:
     id: add-channel-team-view-create-channel
-- assertVisible:
-    id: select-users-view-search
-- tapOn:
-    id: select-users-view-search
-- inputText:
-    id: select-users-view-search
-    text: rocket.cat
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
+- inputText: rocket.cat
 - extendedWaitUntil:
     visible:
       id: select-users-view-item-rocket.cat
@@ -119,10 +153,19 @@ tags:
       id: room-view
     timeout: 60000
     label: should navigate to room view
-- assertVisible:
-    id: room-header
-- tapOn:
-    id: room-header
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: room-header
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - assertVisible:
+          text: 'More'
+- runFlow: '../../helpers/open-room-actions.yaml'
 - assertVisible:
     id: room-actions-teams
 - tapOn:
@@ -141,18 +184,42 @@ tags:
     id: rooms-list-view-item-${output.privateRoomName}
 - tapOn:
     id: rooms-list-view-item-${output.privateRoomName}
-- extendedWaitUntil:
-    visible:
-      id: room-view-title-${output.privateRoomName}
-    timeout: 60000
-- assertVisible:
-    id: room-view-title-${output.privateRoomName}
-- assertVisible:
-    id: room-view-header-call
-- assertVisible:
-    id: room-view-header-threads
-- assertVisible:
-    id: room-view-search
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.privateRoomName}
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.privateRoomName}
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: room-view-header-call
+      - assertVisible:
+          id: room-view-header-threads
+      - assertVisible:
+          id: room-view-search
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - assertVisible:
+          text: '.*Call.*'
+      - assertVisible:
+          text: 'Threads'
+      - tapOn:
+          text: 'More'
+      - extendedWaitUntil:
+          visible:
+            id: 'action-sheet'
+          timeout: 60000
+      - assertVisible:
+          text: 'Search messages'
+      - tapOn:
+          id: 'action-sheet-handle'
 - runFlow: '../../helpers/go-back.yaml'
 
 # should add existing channel to team
@@ -160,10 +227,19 @@ tags:
     file: '../../helpers/navigate-to-room.yaml'
     env:
       ROOM: ${output.team}
-- assertVisible:
-    id: room-header
-- tapOn:
-    id: room-header
+- runFlow:
+    when:
+      platform: android
+    commands:
+      - assertVisible:
+          id: room-header
+- runFlow:
+    when:
+      platform: iOS
+    commands:
+      - assertVisible:
+          text: 'More'
+- runFlow: '../../helpers/open-room-actions.yaml'
 - assertVisible:
     id: room-actions-teams
 - tapOn:
@@ -198,12 +274,11 @@ tags:
     label: should have submit button
 - tapOn:
     id: add-existing-channel-view-submit
-- extendedWaitUntil:
-    visible:
-      id: room-view-title-${output.team}
-    timeout: 60000
-- tapOn:
-    id: room-header
+- runFlow:
+    file: '../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${output.team}
+- runFlow: '../../helpers/open-room-actions.yaml'
 - assertVisible:
     id: room-actions-teams
 - tapOn:
@@ -272,12 +347,7 @@ tags:
     visible:
       id: room-view
     timeout: 60000
-- tapOn:
-    id: room-header
-- extendedWaitUntil:
-    visible:
-      id: room-actions-view
-    timeout: 60000
+- runFlow: '../../helpers/open-room-actions.yaml'
 
 # should add users to the team
 - tapOn:
@@ -292,10 +362,10 @@ tags:
     timeout: 60000
 - tapOn:
     id: room-actions-add-user
-- assertVisible:
-    id: select-users-view-search
-- tapOn:
-    id: select-users-view-search
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - inputText: rocket.cat
 - runFlow: '../../helpers/hide-keyboard.yaml'
 - extendedWaitUntil:
@@ -308,12 +378,10 @@ tags:
     visible:
       id: selected-user-rocket.cat
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: select-users-view-search
-    timeout: 60000
-- tapOn:
-    id: select-users-view-search
+- runFlow:
+    file: '../../helpers/tap-search-field.yaml'
+    env:
+      SEARCH_ID: 'select-users-view-search'
 - eraseText
 - inputText: ${output.secondUser.username}
 - runFlow: '../../helpers/hide-keyboard.yaml'
@@ -332,16 +400,12 @@ tags:
 - tapOn:
     id: selected-users-view-submit
 
-- assertVisible:
-    id: room-members-view-filter
-- tapOn:
-    id: room-members-view-filter
-- extendedWaitUntil:
-    visible:
-      id: room-members-view-toggle-status-all
-    timeout: 60000
-- tapOn:
-    id: room-members-view-toggle-status-all
+- runFlow:
+    file: '../../helpers/select-header-filter.yaml'
+    env:
+      ANDROID_FILTER_ID: 'room-members-view-filter'
+      ANDROID_OPTION_ID: 'room-members-view-toggle-status-all'
+      IOS_OPTION: 'All'
 - extendedWaitUntil:
     visible:
       id: room-members-view-item-${output.secondUser.username}
diff --git a/.maestro/tests/teams/utils/create-channel.yaml b/.maestro/tests/teams/utils/create-channel.yaml
index b84015412ad..63cadb5feaf 100644
--- a/.maestro/tests/teams/utils/create-channel.yaml
+++ b/.maestro/tests/teams/utils/create-channel.yaml
@@ -3,12 +3,11 @@ tags:
   - 'util'
 
 ---
-- extendedWaitUntil:
-    visible:
-      id: rooms-list-view-create-channel
-    timeout: 60000
-- tapOn:
-    id: rooms-list-view-create-channel
+- runFlow:
+    file: '../../../helpers/tap-header-item.yaml'
+    env:
+      ANDROID_ID: 'rooms-list-view-create-channel'
+      IOS_LABEL: 'Create new channel, team, direct message or discussion'
 - extendedWaitUntil:
     visible:
       id: new-message-view
@@ -54,10 +53,10 @@ tags:
     visible:
       id: room-view
     timeout: 60000
-- extendedWaitUntil:
-    visible:
-      id: room-view-title-${channelName}
-    timeout: 60000
+- runFlow:
+    file: '../../../helpers/assert-room-title.yaml'
+    env:
+      ROOM: ${channelName}
 - runFlow: ../../../helpers/go-back.yaml
 - extendedWaitUntil:
     visible:
diff --git a/.sniffler/config.json b/.sniffler/config.json
index f7726236c8e..0fc3c6ca471 100644
--- a/.sniffler/config.json
+++ b/.sniffler/config.json
@@ -28,6 +28,7 @@
 			"app/lib/methods/getUsersPresence.ts",
 			"app/sagas/index.js",
 			"app/sagas/init.js",
+			"app/sagas/preloadNativeHeaderIcons.js",
 			"app/lib/methods/loggedInServer.ts",
 			"app/sagas/state.js",
 			"app/sagas/selectServer.ts",
diff --git a/.sniffler/test-map.json b/.sniffler/test-map.json
index 4ac3ebed352..bd67980093a 100644
--- a/.sniffler/test-map.json
+++ b/.sniffler/test-map.json
@@ -1,7 +1,7 @@
 [
 	{
 		"test": ".maestro/tests/accessibilityAndAppearance/ToastsAndDialogs.yml",
-		"dependsOn": ["app/views/StatusView/**"]
+		"dependsOn": ["app/views/StatusView/**", "app/views/SidebarView/**"]
 	},
 	{
 		"test": ".maestro/tests/assorted/accessibility-and-appearance.yaml",
@@ -406,7 +406,7 @@
 		"test": ".maestro/tests/teams/convert-team.yaml",
 		"dependsOn": [
 			"app/views/RoomActionsView/**",
-			"app/views/SelectListView.tsx",
+			"app/views/SelectListView/**",
 			"app/views/CreateChannelView/**",
 			"app/views/NewMessageView/**",
 			"app/views/SelectedUsersView/**",
@@ -436,7 +436,7 @@
 			"app/views/AddExistingChannelView/**",
 			"app/views/RoomMembersView/**",
 			"app/views/SelectedUsersView/**",
-			"app/views/SelectListView.tsx",
+			"app/views/SelectListView/**",
 			"app/views/CreateChannelView/**",
 			"app/sagas/room.js",
 			"app/sagas/createChannel.js"
diff --git a/CLAUDE.md b/CLAUDE.md
index 048929f381f..6391983df5b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Project Overview
 
-Rocket.Chat React Native mobile client. Single-package React Native app (not a monorepo) using pnpm. Supports iOS 13.4+ and Android 6.0+.
+Rocket.Chat React Native mobile client. Single-package React Native app (not a monorepo) using pnpm. Supports iOS 16.4+ and Android 6.0+.
 
 Read CONTEXT.md.
 
diff --git a/Gemfile.lock b/Gemfile.lock
index a85e179d53b..7b85556bf9a 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -178,7 +178,7 @@ GEM
       xml-simple
     fastlane-sirp (1.0.0)
       sysrandom (~> 1.0)
-    ffi (1.17.1)
+    ffi (1.17.4)
     fourflusher (2.3.1)
     fuzzy_match (2.0.4)
     gh_inspector (1.1.3)
diff --git a/README.md b/README.md
index ed7fb227d16..3ce08b95d7f 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # Rocket.Chat Mobile
 
 - **Supported server versions:** 0.70.0+
-- **Supported iOS versions**: 13.4+
+- **Supported iOS versions**: 16.4+
 - **Supported Android versions**: 6.0+
 
 ## Download
diff --git a/__mocks__/react-native-mmkv.js b/__mocks__/react-native-mmkv.js
index c0e1cedee61..2426b2b20e6 100644
--- a/__mocks__/react-native-mmkv.js
+++ b/__mocks__/react-native-mmkv.js
@@ -1,27 +1,16 @@
-// Mock for react-native-mmkv
-const { useState, useEffect, useRef, useMemo, useCallback } = require('react');
+const { useState, useEffect, useCallback } = require('react');
 
 // Shared storage between instances with the same id
 const storageInstances = new Map();
-let defaultInstance = null;
 
-export const Mode = {
-	SINGLE_PROCESS: 'single-process',
-	MULTI_PROCESS: 'multi-process'
-};
-
-// MMKV Instance class
 class MMKVInstance {
 	constructor(config = {}) {
-		const { id = 'mmkv.default', path, encryptionKey, mode, readOnly } = config;
+		const { id = 'mmkv.default', path, encryptionKey, mode } = config;
 		this.id = id;
 		this.path = path;
 		this.encryptionKey = encryptionKey;
 		this.mode = mode;
-		this.isReadOnly = readOnly || false;
-		this._size = 0;
 
-		// Share storage between instances with the same id
 		if (!storageInstances.has(this.id)) {
 			storageInstances.set(this.id, {
 				storage: new Map(),
@@ -34,16 +23,8 @@ class MMKVInstance {
 		this.listeners = instance.listeners;
 	}
 
-	get size() {
-		return this._size;
-	}
-
 	set(key, value) {
-		if (this.isReadOnly) {
-			throw new Error('Cannot set value in read-only instance');
-		}
 		this.storage.set(key, value);
-		this._size = this.storage.size;
 		this.notifyListeners(key);
 	}
 
@@ -62,22 +43,13 @@ class MMKVInstance {
 		return typeof value === 'boolean' ? value : undefined;
 	}
 
-	getBuffer(key) {
-		const value = this.storage.get(key);
-		return value instanceof ArrayBuffer ? value : undefined;
-	}
-
 	contains(key) {
 		return this.storage.has(key);
 	}
 
 	remove(key) {
-		if (this.isReadOnly) {
-			throw new Error('Cannot remove value in read-only instance');
-		}
 		const deleted = this.storage.delete(key);
 		if (deleted) {
-			this._size = this.storage.size;
 			this.notifyListeners(key);
 		}
 		return deleted;
@@ -88,39 +60,10 @@ class MMKVInstance {
 	}
 
 	clearAll() {
-		if (this.isReadOnly) {
-			throw new Error('Cannot clear read-only instance');
-		}
 		this.storage.clear();
-		this._size = 0;
-		// Notify about clear (pass undefined to indicate clear all)
 		this.notifyListeners(undefined);
 	}
 
-	recrypt(key) {
-		this.encryptionKey = key;
-	}
-
-	trim() {
-		// No-op for mock
-	}
-
-	importAllFrom(other) {
-		if (this.isReadOnly) {
-			throw new Error('Cannot import values into read-only instance');
-		}
-		let count = 0;
-		for (const [key, value] of other.storage.entries()) {
-			this.storage.set(key, value);
-			count++;
-		}
-		this._size = this.storage.size;
-		if (count > 0) {
-			this.notifyListeners(undefined);
-		}
-		return count;
-	}
-
 	addOnValueChangedListener(callback) {
 		this.listeners.push(callback);
 		return {
@@ -144,202 +87,37 @@ class MMKVInstance {
 	}
 }
 
-// Factory function to create MMKV instances
 export function createMMKV(configuration) {
 	return new MMKVInstance(configuration);
 }
 
-// Get default instance
-function getDefaultMMKVInstance() {
-	if (defaultInstance == null) {
-		defaultInstance = createMMKV();
-	}
-	return defaultInstance;
-}
-
-// Top-level functions
-export function existsMMKV(id) {
-	return storageInstances.has(id);
-}
-
-export function deleteMMKV(id) {
-	const instance = storageInstances.get(id);
-	instance?.storage.clear();
-	instance?.listeners.splice(0);
-
-	const deleted = storageInstances.delete(id);
-	if (defaultInstance?.id === id) {
-		defaultInstance = null;
-	}
-	return deleted;
-}
+export function useMMKVString(key, instance) {
+	const [value, setValue] = useState(() => instance.getString(key));
 
-// Helper function for configuration comparison
-function isConfigurationEqual(left, right) {
-	if (left == null || right == null) {
-		return left == null && right == null;
-	}
-
-	return (
-		left.encryptionKey === right.encryptionKey &&
-		left.id === right.id &&
-		left.path === right.path &&
-		left.mode === right.mode &&
-		left.readOnly === right.readOnly
+	const set = useCallback(
+		v => {
+			const newValue = typeof v === 'function' ? v(instance.getString(key)) : v;
+			if (newValue === undefined) {
+				instance.remove(key);
+				return;
+			}
+			if (typeof newValue !== 'string') {
+				throw new Error(`MMKV: Type ${typeof newValue} is not supported!`);
+			}
+			instance.set(key, newValue);
+		},
+		[key, instance]
 	);
-}
-
-/**
- * Use the default, shared MMKV instance or a custom instance with configuration
- */
-export function useMMKV(configuration) {
-	const configurationRef = useRef();
-	const instanceRef = useRef();
-
-	if (configuration == null) {
-		return getDefaultMMKVInstance();
-	}
-
-	if (!instanceRef.current || !isConfigurationEqual(configurationRef.current, configuration)) {
-		configurationRef.current = configuration;
-		instanceRef.current = createMMKV(configuration);
-	}
-
-	return instanceRef.current;
-}
-
-/**
- * Listen for changes in the given MMKV storage instance
- */
-export function useMMKVListener(valueChangedListener, instance) {
-	const ref = useRef(valueChangedListener);
-	const mmkv = instance ?? getDefaultMMKVInstance();
 
 	useEffect(() => {
-		ref.current = valueChangedListener;
-	}, [valueChangedListener]);
-
-	useEffect(() => {
-		const listener = mmkv.addOnValueChangedListener(changedKey => {
-			ref.current(changedKey);
+		setValue(instance.getString(key));
+		const listener = instance.addOnValueChangedListener(changedKey => {
+			if (changedKey === undefined || changedKey === key) {
+				setValue(instance.getString(key));
+			}
 		});
 		return () => listener.remove();
-	}, [mmkv]);
-}
+	}, [key, instance]);
 
-/**
- * Get a list of all keys that exist in the given MMKV instance
- */
-export function useMMKVKeys(instance) {
-	const mmkv = instance ?? getDefaultMMKVInstance();
-	const [allKeys, setKeys] = useState(() => mmkv.getAllKeys());
-
-	useEffect(() => {
-		setKeys(mmkv.getAllKeys());
-	}, [mmkv]);
-
-	useMMKVListener(key => {
-		if (key === undefined) {
-			setKeys(() => mmkv.getAllKeys());
-			return;
-		}
-
-		const currentlyHasKey = allKeys.includes(key);
-		const hasKey = mmkv.contains(key);
-		if (hasKey !== currentlyHasKey) {
-			setKeys(() => mmkv.getAllKeys());
-		}
-	}, mmkv);
-
-	return allKeys;
+	return [value, set];
 }
-
-/**
- * Create a custom MMKV hook for a specific type
- */
-function createMMKVHook(getter, onSet) {
-	return (key, instance) => {
-		const mmkv = instance ?? getDefaultMMKVInstance();
-
-		const [bump, setBump] = useState(0);
-		const value = useMemo(() => getter(mmkv, key), [mmkv, key, bump]);
-
-		const set = useCallback(
-			v => {
-				const newValue = typeof v === 'function' ? v(getter(mmkv, key)) : v;
-				if (onSet) {
-					onSet(mmkv, key, newValue);
-					return;
-				}
-				switch (typeof newValue) {
-					case 'number':
-					case 'string':
-					case 'boolean':
-						mmkv.set(key, newValue);
-						break;
-					case 'undefined':
-						mmkv.remove(key);
-						break;
-					case 'object':
-						if (newValue instanceof ArrayBuffer) {
-							mmkv.set(key, newValue);
-							break;
-						} else {
-							throw new Error(`MMKV: Type object (${newValue}) is not supported!`);
-						}
-					default:
-						throw new Error(`MMKV: Type ${typeof newValue} is not supported!`);
-				}
-			},
-			[key, mmkv, onSet]
-		);
-
-		useEffect(() => {
-			const listener = mmkv.addOnValueChangedListener(changedKey => {
-				if (changedKey === undefined || changedKey === key) {
-					setBump(b => b + 1);
-				}
-			});
-			return () => listener.remove();
-		}, [key, mmkv]);
-
-		return [value, set];
-	};
-}
-
-/**
- * Use the string value of the given key from the given MMKV storage instance
- */
-export const useMMKVString = createMMKVHook((instance, key) => instance.getString(key));
-
-/**
- * Use the number value of the given key from the given MMKV storage instance
- */
-export const useMMKVNumber = createMMKVHook((instance, key) => instance.getNumber(key));
-
-/**
- * Use the boolean value of the given key from the given MMKV storage instance
- */
-export const useMMKVBoolean = createMMKVHook((instance, key) => instance.getBoolean(key));
-
-/**
- * Use the object value (JSON stringified) of the given key from the given MMKV storage instance
- */
-export const useMMKVObject = createMMKVHook(
-	(instance, key) => {
-		const stored = instance.getString(key);
-		return stored ? JSON.parse(stored) : undefined;
-	},
-	(mmkv, key, value) => {
-		if (value === undefined) {
-			mmkv.remove(key);
-			return;
-		}
-		mmkv.set(key, JSON.stringify(value));
-	}
-);
-
-/**
- * Use the buffer value of the given key from the given MMKV storage instance
- */
-export const useMMKVBuffer = createMMKVHook((instance, key) => instance.getBuffer(key));
diff --git a/__mocks__/react-native-plain-text.js b/__mocks__/react-native-plain-text.js
new file mode 100644
index 00000000000..b8767cc1b5f
--- /dev/null
+++ b/__mocks__/react-native-plain-text.js
@@ -0,0 +1,3 @@
+const { Text } = require('react-native');
+
+module.exports = { PlainText: Text };
diff --git a/android/app/build.gradle b/android/app/build.gradle
index d282923fc23..ffbf6561738 100644
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -142,9 +142,9 @@ dependencies {
     implementation project(':watermelondb-jsi')
 
     implementation "com.google.code.gson:gson:2.8.9"
-    implementation "io.github.zhongwuzw:mmkv:2.2.4"
+    implementation "io.github.zhongwuzw:mmkv:2.4.1"
     implementation "com.github.bumptech.glide:glide:${rootProject.ext.glideVersion}"
-    implementation 'com.facebook.soloader:soloader:0.10.4'
+    implementation "androidx.localbroadcastmanager:localbroadcastmanager:1.1.0"
     
     // For SecureKeystore (EncryptedSharedPreferences)
     implementation 'androidx.security:security-crypto:1.1.0'
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index 0e9fdce9400..c6a739a6ef3 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -4,6 +4,10 @@
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+    <uses-permission
+        android:name="android.permission.WRITE_EXTERNAL_STORAGE"
+        android:maxSdkVersion="32"
+        tools:replace="android:maxSdkVersion" />
 
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
diff --git a/android/app/src/main/java/chat/rocket/reactnative/MainApplication.kt b/android/app/src/main/java/chat/rocket/reactnative/MainApplication.kt
index 4ed84b04061..2e54ab1cd40 100644
--- a/android/app/src/main/java/chat/rocket/reactnative/MainApplication.kt
+++ b/android/app/src/main/java/chat/rocket/reactnative/MainApplication.kt
@@ -22,7 +22,7 @@ import chat.rocket.reactnative.storage.SecureStoragePackage;
 import chat.rocket.reactnative.notification.VideoConfTurboPackage
 import chat.rocket.reactnative.notification.PushNotificationTurboPackage
 import chat.rocket.reactnative.VoipTurboPackage
-import chat.rocket.reactnative.scroll.InvertedScrollPackage
+import chat.rocket.reactnative.scroll.VisualOrderScrollPackage
 import chat.rocket.reactnative.input.ExternalInputPackage
 import chat.rocket.reactnative.biometric.BiometricEnrollmentPackage
 
@@ -50,7 +50,7 @@ open class MainApplication : Application(), ReactApplication {
               add(PushNotificationTurboPackage())
               add(VoipTurboPackage())
               add(SecureStoragePackage())
-              add(InvertedScrollPackage())
+              add(VisualOrderScrollPackage())
               add(ExternalInputPackage())
               add(BiometricEnrollmentPackage())
             }
diff --git a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentView.java b/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentView.java
deleted file mode 100644
index 3e097bc0420..00000000000
--- a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentView.java
+++ /dev/null
@@ -1,81 +0,0 @@
-package chat.rocket.reactnative.scroll;
-
-import android.graphics.Rect;
-import android.view.MotionEvent;
-import android.view.View;
-import com.facebook.react.views.view.ReactViewGroup;
-import java.util.ArrayList;
-import java.util.Collections;
-
-/**
- * Content view for inverted FlatLists. Reports its children to accessibility in reversed order so
- * TalkBack traversal matches the visual order (newest-first) when used inside InvertedScrollView.
- */
-public class InvertedScrollContentView extends ReactViewGroup {
-
-  private boolean mIsInvertedContent = false;
-
-  public InvertedScrollContentView(android.content.Context context) {
-    super(context);
-  }
-
-  public void setIsInvertedContent(boolean isInverted) {
-    mIsInvertedContent = isInverted;
-  }
-
-  @Override
-  public void addChildrenForAccessibility(ArrayList<View> outChildren) {
-    super.addChildrenForAccessibility(outChildren);
-    if (mIsInvertedContent) {
-      Collections.reverse(outChildren);
-    }
-  }
-
-  @Override
-  protected boolean onRequestFocusInDescendants(int direction, Rect previouslyFocusedRect) {
-    if (mIsInvertedContent) {
-      for (int i = getChildCount() - 1; i >= 0; i--) {
-        View child = getChildAt(i);
-        if (child.getVisibility() == VISIBLE) {
-          if (child.requestFocus(direction, previouslyFocusedRect)) {
-            return true;
-          }
-        }
-      }
-      return false;
-    }
-    return super.onRequestFocusInDescendants(direction, previouslyFocusedRect);
-  }
-
-  @Override
-  public void addFocusables(ArrayList<View> views, int direction, int focusableMode) {
-    super.addFocusables(views, direction, focusableMode);
-    if (mIsInvertedContent) {
-      // Find indices of focusables that are children of this view
-      ArrayList<Integer> childIndices = new ArrayList<>();
-      for (int i = 0; i < views.size(); i++) {
-        View v = views.get(i);
-        if (v.getParent() == this) {
-          childIndices.add(i);
-        }
-      }
-      // Reverse only the sublist of children focusables
-      int n = childIndices.size();
-      for (int i = 0; i < n / 2; i++) {
-        int idx1 = childIndices.get(i);
-        int idx2 = childIndices.get(n - 1 - i);
-        View temp = views.get(idx1);
-        views.set(idx1, views.get(idx2));
-        views.set(idx2, temp);
-      }
-    }
-  }
-
-  @Override
-  public boolean onTouchEvent(MotionEvent event) {
-    // Match the stock vertical Android ScrollView content host, which is a plain non-clickable
-    // View. This container exists only to preserve inverted accessibility/focus order and should
-    // never consume fallback taps that miss transformed children after scrolling.
-    return false;
-  }
-}
diff --git a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentViewManager.java b/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentViewManager.java
deleted file mode 100644
index 095c2463424..00000000000
--- a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollContentViewManager.java
+++ /dev/null
@@ -1,31 +0,0 @@
-package chat.rocket.reactnative.scroll;
-
-import com.facebook.react.module.annotations.ReactModule;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.views.view.ReactViewManager;
-
-/**
- * View manager for InvertedScrollContentView. Behaves like a View but reports children in reversed
- * order for accessibility so TalkBack matches the visual order in inverted lists.
- */
-@ReactModule(name = InvertedScrollContentViewManager.REACT_CLASS)
-public class InvertedScrollContentViewManager extends ReactViewManager {
-
-  public static final String REACT_CLASS = "InvertedScrollContentView";
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  @Override
-  public InvertedScrollContentView createViewInstance(ThemedReactContext context) {
-    return new InvertedScrollContentView(context);
-  }
-
-  @ReactProp(name = "isInvertedContent")
-  public void setIsInvertedContent(InvertedScrollContentView view, boolean isInverted) {
-    view.setIsInvertedContent(isInverted);
-  }
-}
diff --git a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollViewManager.java b/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollViewManager.java
deleted file mode 100644
index 30ad13084d7..00000000000
--- a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollViewManager.java
+++ /dev/null
@@ -1,33 +0,0 @@
-package chat.rocket.reactnative.scroll;
-
-import androidx.annotation.Nullable;
-import com.facebook.react.module.annotations.ReactModule;
-import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.views.scroll.ReactScrollViewManager;
-
-/**
- * View manager for {@link InvertedScrollView}. Registers as "InvertedScrollView" to avoid
- * collision with core RCTScrollView. Inherits all ScrollView props from ReactScrollViewManager;
- * FlatList passes isInvertedVirtualizedList when inverted, which is applied by the parent setter.
- */
-@ReactModule(name = InvertedScrollViewManager.REACT_CLASS)
-public class InvertedScrollViewManager extends ReactScrollViewManager {
-
-  public static final String REACT_CLASS = "InvertedScrollView";
-
-  @Override
-  public String getName() {
-    return REACT_CLASS;
-  }
-
-  @Override
-  public InvertedScrollView createViewInstance(ThemedReactContext context) {
-    return new InvertedScrollView(context);
-  }
-
-  @ReactProp(name = "exitFocusNativeId")
-  public void setExitFocusNativeId(InvertedScrollView view, @Nullable String nativeId) {
-    view.setExitFocusNativeId(nativeId);
-  }
-}
diff --git a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollPackage.java b/android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollPackage.java
similarity index 67%
rename from android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollPackage.java
rename to android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollPackage.java
index 05e6a7be0d5..2f475154882 100644
--- a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollPackage.java
+++ b/android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollPackage.java
@@ -7,7 +7,7 @@
 import java.util.Collections;
 import java.util.List;
 
-public class InvertedScrollPackage implements ReactPackage {
+public class VisualOrderScrollPackage implements ReactPackage {
 
   @Override
   public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
@@ -16,9 +16,6 @@ public List<NativeModule> createNativeModules(ReactApplicationContext reactConte
 
   @Override
   public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
-    List<ViewManager> managers = new java.util.ArrayList<>();
-    managers.add(new InvertedScrollViewManager());
-    managers.add(new InvertedScrollContentViewManager());
-    return managers;
+    return Collections.singletonList(new VisualOrderScrollViewManager());
   }
 }
diff --git a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollView.java b/android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollView.java
similarity index 55%
rename from android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollView.java
rename to android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollView.java
index 9ab9731390f..a9dddd487a0 100644
--- a/android/app/src/main/java/chat/rocket/reactnative/scroll/InvertedScrollView.java
+++ b/android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollView.java
@@ -8,23 +8,20 @@
 import androidx.annotation.Nullable;
 import com.facebook.react.uimanager.util.ReactFindViewUtil;
 import com.facebook.react.views.scroll.ReactScrollView;
+import java.util.ArrayList;
+import java.util.Comparator;
 import java.util.HashMap;
+import java.util.List;
 import java.util.Map;
 
-/**
- * Custom ScrollView for inverted FlatLists that corrects keyboard navigation so it follows
- * the visual order instead of the inverted view-tree order.
- *
- * Both Tab/Shift+Tab and DPAD arrows navigate between FlatList cells (direct children of the
- * content view) to avoid loops caused by inner focusable elements within a single message.
- * Boundary exit uses ReactFindViewUtil to find a tagged exit-target view by nativeID.
- */
-public class InvertedScrollView extends ReactScrollView {
+public class VisualOrderScrollView extends ReactScrollView {
+
+  private static final Comparator<View> TOP_TO_BOTTOM = Comparator.comparingInt(VisualOrderScrollView::screenTop);
 
   private final Map<Integer, Boolean> mKeyConsumedMap = new HashMap<>();
   private volatile @Nullable String mExitFocusNativeId;
 
-  public InvertedScrollView(Context context) {
+  public VisualOrderScrollView(Context context) {
     super(context);
   }
 
@@ -56,32 +53,23 @@ public boolean dispatchKeyEvent(KeyEvent event) {
     return super.dispatchKeyEvent(event);
   }
 
-  /**
-   * Shared navigation logic for Tab and DPAD.
-   * @param isForward true = visual down (Tab / DPAD_DOWN), false = visual up (Shift+Tab / DPAD_UP)
-   */
   private boolean handleCellNavigation(boolean isForward) {
     View focused = findFocus();
     if (focused == null || getChildCount() == 0) {
       return false;
     }
 
-    View firstChild = getChildAt(0);
-    if (!(firstChild instanceof ViewGroup)) {
-      return false;
-    }
-    ViewGroup contentView = (ViewGroup) firstChild;
-    int cellIndex = findContainingCellIndex(contentView, focused);
-    if (cellIndex < 0) {
+    View cell = findContainingCell(getChildAt(0), focused);
+    if (cell == null) {
       return false;
     }
 
-    int step = isForward ? -1 : 1;
-    int focusDir = isForward ? View.FOCUS_UP : View.FOCUS_DOWN;
+    List<View> cells = visibleCellsTopToBottom((ViewGroup) cell.getParent());
+    int step = isForward ? 1 : -1;
+    int focusDirection = isForward ? View.FOCUS_DOWN : View.FOCUS_UP;
 
-    for (int i = cellIndex + step; i >= 0 && i < contentView.getChildCount(); i += step) {
-      View cell = contentView.getChildAt(i);
-      if (cell != null && cell.getVisibility() == VISIBLE && cell.requestFocus(focusDir)) {
+    for (int i = cells.indexOf(cell) + step; i >= 0 && i < cells.size(); i += step) {
+      if (cells.get(i).requestFocus(focusDirection)) {
         return true;
       }
     }
@@ -95,23 +83,43 @@ private boolean handleCellNavigation(boolean isForward) {
     return false;
   }
 
-  private int findContainingCellIndex(ViewGroup contentView, View focused) {
+  private @Nullable View findContainingCell(View contentView, View focused) {
     View current = focused;
-    while (current != null && current.getParent() != contentView) {
-      ViewParent p = current.getParent();
-      if (p instanceof View) {
-        current = (View) p;
-      } else {
-        return -1;
+    while (current != null) {
+      ViewParent parent = current.getParent();
+      if (!(parent instanceof View)) {
+        return null;
       }
+      if (parent.getParent() == contentView) {
+        return current;
+      }
+      current = (View) parent;
     }
-    return current != null ? contentView.indexOfChild(current) : -1;
+    return null;
   }
 
-  private View findExitTarget() {
+  private List<View> visibleCellsTopToBottom(ViewGroup cellsParent) {
+    List<View> cells = new ArrayList<>();
+    for (int i = 0; i < cellsParent.getChildCount(); i++) {
+      View child = cellsParent.getChildAt(i);
+      if (child.getVisibility() == VISIBLE) {
+        cells.add(child);
+      }
+    }
+    cells.sort(TOP_TO_BOTTOM);
+    return cells;
+  }
+
+  private @Nullable View findExitTarget() {
     if (mExitFocusNativeId != null) {
       return ReactFindViewUtil.findView(getRootView(), mExitFocusNativeId);
     }
     return null;
   }
+
+  private static int screenTop(View view) {
+    int[] location = new int[2];
+    view.getLocationOnScreen(location);
+    return location[1];
+  }
 }
diff --git a/android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollViewManager.java b/android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollViewManager.java
new file mode 100644
index 00000000000..fa038838e6f
--- /dev/null
+++ b/android/app/src/main/java/chat/rocket/reactnative/scroll/VisualOrderScrollViewManager.java
@@ -0,0 +1,28 @@
+package chat.rocket.reactnative.scroll;
+
+import androidx.annotation.Nullable;
+import com.facebook.react.module.annotations.ReactModule;
+import com.facebook.react.uimanager.ThemedReactContext;
+import com.facebook.react.uimanager.annotations.ReactProp;
+import com.facebook.react.views.scroll.ReactScrollViewManager;
+
+@ReactModule(name = VisualOrderScrollViewManager.REACT_CLASS)
+public class VisualOrderScrollViewManager extends ReactScrollViewManager {
+
+  public static final String REACT_CLASS = "VisualOrderScrollView";
+
+  @Override
+  public String getName() {
+    return REACT_CLASS;
+  }
+
+  @Override
+  public VisualOrderScrollView createViewInstance(ThemedReactContext context) {
+    return new VisualOrderScrollView(context);
+  }
+
+  @ReactProp(name = "exitFocusNativeId")
+  public void setExitFocusNativeId(VisualOrderScrollView view, @Nullable String nativeId) {
+    view.setExitFocusNativeId(nativeId);
+  }
+}
diff --git a/android/gradle/wrapper/gradle-wrapper.properties b/android/gradle/wrapper/gradle-wrapper.properties
index 42f0071e3f1..bc79d447cc6 100644
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.14.3-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.3.1-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
diff --git a/android/settings.gradle b/android/settings.gradle
index 9bb0709a8db..291937214cc 100644
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -1,6 +1,14 @@
-pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
-plugins { id("com.facebook.react.settings") }
-extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+pluginManagement {
+    includeBuild("../node_modules/@react-native/gradle-plugin")
+    includeBuild("../node_modules/expo-modules-autolinking/android/expo-gradle-plugin")
+}
+plugins {
+    id("com.facebook.react.settings")
+    id("expo-autolinking-settings")
+}
+extensions.configure(com.facebook.react.ReactSettingsExtension) { ex ->
+    ex.autolinkLibrariesFromCommand(expoAutolinking.rnConfigCommand)
+}
 rootProject.name = 'RocketChatRN'
 include ':watermelondb-jsi'
 project(':watermelondb-jsi').projectDir = new File(rootProject.projectDir, '../node_modules/@nozbe/watermelondb/native/android-jsi')
@@ -8,5 +16,4 @@ include ':app'
 
 includeBuild('../node_modules/@react-native/gradle-plugin')
 
-apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle");
-useExpoModules()
\ No newline at end of file
+expoAutolinking.useExpoModules()
diff --git a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
index ac33d69fb79..7bcf87bd2dd 100644
--- a/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
+++ b/app/containers/ActionSheet/ActionSheetContentWithInputAndSubmit/index.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, createRef, type ReactElement } from 'react';
-import { StyleSheet, Text, type TextInputProps, View } from 'react-native';
+import { StyleSheet, type TextInputProps, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
 import i18n from '~/i18n';
@@ -167,9 +168,13 @@ const ActionSheetContentWithInputAndSubmit = ({
 			<>
 				<View accessible accessibilityLabel={title} style={styles.titleContainer}>
 					{iconName ? <CustomIcon name={iconName} size={32} color={iconColor || colors.buttonBackgroundDangerDefault} /> : null}
-					<Text style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0 }]}>{title}</Text>
+					<PlainText style={[styles.titleContainerText, { color: colors.fontDefault, paddingLeft: iconName ? 12 : 0 }]}>
+						{title}
+					</PlainText>
 				</View>
-				{description ? <Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</Text> : null}
+				{description ? (
+					<PlainText style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{description}</PlainText>
+				) : null}
 				{customText}
 			</>
 			{showInput ? renderInputs() : null}
diff --git a/app/containers/ActionSheet/BottomSheetContent.tsx b/app/containers/ActionSheet/BottomSheetContent.tsx
index 23a80ebbf45..e8b3a745439 100644
--- a/app/containers/ActionSheet/BottomSheetContent.tsx
+++ b/app/containers/ActionSheet/BottomSheetContent.tsx
@@ -1,4 +1,5 @@
-import { FlatList, Text, View, type ViewProps } from 'react-native';
+import { FlatList, View, type ViewProps } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { memo, type ReactElement } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -49,7 +50,7 @@ const BottomSheetContent = memo(
 					onPress={hide}
 					style={[styles.button, { backgroundColor: colors.surfaceHover, height }]}
 					accessibilityLabel={I18n.t('Cancel')}>
-					<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</Text>
+					<PlainText style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Cancel')}</PlainText>
 				</Touch>
 			) : null;
 
diff --git a/app/containers/ActionSheet/Handle.tsx b/app/containers/ActionSheet/Handle.tsx
index 874a655028c..3d4d23a1192 100644
--- a/app/containers/ActionSheet/Handle.tsx
+++ b/app/containers/ActionSheet/Handle.tsx
@@ -1,7 +1,7 @@
-import { forwardRef, type ComponentType, type Ref } from 'react';
+import { forwardRef } from 'react';
 import { View } from 'react-native';
-import { RectButton } from 'react-native-gesture-handler';
 
+import { RectButton } from '~/containers/GestureButtons';
 import styles from './styles';
 import { themes } from '~/lib/constants/colors';
 import { useTheme } from '~/theme';
@@ -13,7 +13,7 @@ export const Handle = forwardRef<View, { onPress: () => void }>(({ onPress }, re
 	// We should use RectButton from gesture-handler to avoid issues with the keyboard
 	return (
 		<RectButton
-			ref={ref as Ref<ComponentType>}
+			ref={ref}
 			onPress={onPress}
 			style={styles.handle}
 			testID='action-sheet-handle'
diff --git a/app/containers/ActionSheet/Item.tsx b/app/containers/ActionSheet/Item.tsx
index e7db8158fbe..8afcb338411 100644
--- a/app/containers/ActionSheet/Item.tsx
+++ b/app/containers/ActionSheet/Item.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { CustomIcon } from '../CustomIcon';
 import { useTheme } from '~/theme';
@@ -49,15 +50,15 @@ export const Item = memo(({ item, hide }: IActionSheetItem) => {
 				testID={item.testID}>
 				{item.icon ? <CustomIcon name={item.icon} size={24} color={color} /> : null}
 				<View style={styles.titleContainer}>
-					<Text numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
+					<PlainText numberOfLines={1} style={[styles.title, { color, marginLeft: item.icon ? 16 : 0 }]}>
 						{item.title}
-					</Text>
+					</PlainText>
 					{item?.subtitle ? (
-						<Text
+						<PlainText
 							numberOfLines={1}
 							style={[styles.subtitle, { color: colors.fontSecondaryInfo, marginLeft: item.icon ? 16 : 0 }]}>
 							{item.subtitle}
-						</Text>
+						</PlainText>
 					) : null}
 				</View>
 				{item.right ? <View style={styles.rightContainer}>{item.right ? item.right() : null}</View> : null}
diff --git a/app/containers/ActionSheet/styles.ts b/app/containers/ActionSheet/styles.ts
index be6d260b9e3..ecbb9be14e3 100644
--- a/app/containers/ActionSheet/styles.ts
+++ b/app/containers/ActionSheet/styles.ts
@@ -39,7 +39,7 @@ export default StyleSheet.create({
 		margin: 8
 	},
 	backdrop: {
-		...StyleSheet.absoluteFillObject
+		...StyleSheet.absoluteFill
 	},
 	button: {
 		marginHorizontal: 16,
diff --git a/app/containers/AltTextLabel.tsx b/app/containers/AltTextLabel.tsx
index 2570186dbc9..cda34144d49 100644
--- a/app/containers/AltTextLabel.tsx
+++ b/app/containers/AltTextLabel.tsx
@@ -1,4 +1,5 @@
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useActionSheet } from './ActionSheet';
 import I18n from '../i18n';
@@ -42,8 +43,8 @@ const AltTextActionSheetContent = ({ altText }: { altText: string }) => {
 
 	return (
 		<View style={styles.altTextContent}>
-			<Text style={[styles.altTextTitle, { color: colors.fontTitlesLabels }]}>{I18n.t('Alt_text')}</Text>
-			<Text style={[styles.altTextBody, { color: colors.fontDefault }]}>{altText}</Text>
+			<PlainText style={[styles.altTextTitle, { color: colors.fontTitlesLabels }]}>{I18n.t('Alt_text')}</PlainText>
+			<PlainText style={[styles.altTextBody, { color: colors.fontDefault }]}>{altText}</PlainText>
 		</View>
 	);
 };
@@ -75,7 +76,7 @@ const AltTextLabel = ({ altText, testID }: TAltTextLabelProps) => {
 			accessibilityRole='button'
 			accessibilityLabel={I18n.t('Alt_text')}
 			style={[styles.container, { backgroundColor: colors.surfaceNeutral }]}>
-			<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t('Alt')}</Text>
+			<PlainText style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t('Alt')}</PlainText>
 		</Pressable>
 	);
 };
diff --git a/app/containers/AudioPlayer/Seek.test.tsx b/app/containers/AudioPlayer/Seek.test.tsx
index ce7668c55a7..489f489763d 100644
--- a/app/containers/AudioPlayer/Seek.test.tsx
+++ b/app/containers/AudioPlayer/Seek.test.tsx
@@ -1,44 +1,48 @@
 import { act, render, renderHook } from '@testing-library/react-native';
-import { Gesture, State } from 'react-native-gesture-handler';
+import { State, usePanGesture } from 'react-native-gesture-handler';
 import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
 import { useSharedValue } from 'react-native-reanimated';
 
 import Seek from './Seek';
 
 jest.mock('~/theme', () => ({ useTheme: () => ({ colors: {} }) }));
+jest.mock('react-native-gesture-handler', () => {
+	const actual = jest.requireActual('react-native-gesture-handler');
+	return { ...actual, usePanGesture: jest.fn(actual.usePanGesture) };
+});
 
 const setup = () => {
-	const pan = jest.spyOn(Gesture, 'Pan');
 	const { result } = renderHook(() => ({ currentTime: useSharedValue(30), duration: useSharedValue(120) }));
 	const { currentTime, duration } = result.current;
 	const onChangeTime = jest.fn();
 	render(<Seek currentTime={currentTime} duration={duration} loaded onChangeTime={onChangeTime} />);
-	return { gesture: pan.mock.results[0].value, currentTime, onChangeTime };
+	const { results } = jest.mocked(usePanGesture).mock;
+	return { gesture: results[results.length - 1].value, currentTime, onChangeTime };
 };
 
-afterEach(() => jest.restoreAllMocks());
+afterEach(() => jest.clearAllMocks());
 
-test('a tap that never starts dragging preserves the paused position', () => {
+test('a tap that never starts dragging preserves the paused position', async () => {
 	const { gesture, currentTime, onChangeTime } = setup();
-	act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.FAILED }]));
+	await act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.FAILED }]));
 	expect(currentTime.value).toBe(30);
 	expect(onChangeTime).not.toHaveBeenCalled();
 });
 
-test('a cancelled drag restores its starting position without seeking', () => {
+test('a cancelled drag restores its starting position without seeking', async () => {
 	const { gesture, currentTime, onChangeTime } = setup();
-	act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.ACTIVE }, { state: State.CANCELLED }]));
+	await act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.ACTIVE }, { state: State.CANCELLED }]));
 	expect(currentTime.value).toBe(30);
 	expect(onChangeTime).not.toHaveBeenCalled();
 
 	currentTime.value = 45;
-	act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.FAILED }]));
+	await act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.FAILED }]));
 	expect(currentTime.value).toBe(45);
 });
 
-test('a completed drag seeks in seconds', () => {
+test('a completed drag seeks in seconds', async () => {
 	const { gesture, onChangeTime } = setup();
-	act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.ACTIVE }, { state: State.END }]));
+	await act(() => fireGestureHandler(gesture, [{ state: State.BEGAN }, { state: State.ACTIVE }, { state: State.END }]));
 	expect(onChangeTime).toHaveBeenCalledTimes(1);
 	expect(onChangeTime).toHaveBeenCalledWith(30);
 });
diff --git a/app/containers/AudioPlayer/Seek.tsx b/app/containers/AudioPlayer/Seek.tsx
index ebef805872b..31c884f93f7 100644
--- a/app/containers/AudioPlayer/Seek.tsx
+++ b/app/containers/AudioPlayer/Seek.tsx
@@ -1,5 +1,5 @@
 import { type LayoutChangeEvent, View, TextInput, type TextInputProps, TouchableNativeFeedback } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
 import Animated, {
 	type SharedValue,
 	useAnimatedProps,
@@ -65,31 +65,32 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
 		maxWidth.value = width;
 	};
 
-	const panGesture = Gesture.Pan()
-		.enabled(loaded)
-		.activeOffsetX([-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X])
-		.onStart(() => {
+	const panGesture = usePanGesture({
+		enabled: loaded,
+		activeOffsetX: [-ACTIVE_OFFSET_X, ACTIVE_OFFSET_X],
+		onActivate: () => {
 			isPanning.value = true;
 			contextX.value = translateX.value;
 			savedTranslateX.value = translateX.value;
 			savedCurrentTime.value = currentTime.value;
 			scale.value = withTiming(1.3, { duration: 150 });
-		})
-		.onUpdate(event => {
+		},
+		onUpdate: event => {
 			const newX = contextX.value + event.translationX;
 			translateX.value = clamp(newX, 0, maxWidth.value);
-		})
-		.onFinalize((_, didSucceed) => {
+		},
+		onFinalize: event => {
 			if (!isPanning.value) return;
 			isPanning.value = false;
 			scale.value = withTiming(1, { duration: 150 });
-			if (didSucceed) {
-				scheduleOnRN(onChangeTime, currentTime.value);
-			} else {
+			if (event.canceled) {
 				translateX.value = savedTranslateX.value;
 				currentTime.value = savedCurrentTime.value;
+			} else {
+				scheduleOnRN(onChangeTime, currentTime.value);
 			}
-		});
+		}
+	});
 
 	useDerivedValue(() => {
 		if (isPanning.value) {
diff --git a/app/containers/Avatar/Avatar.tsx b/app/containers/Avatar/Avatar.tsx
index 926a74d841e..15c1dddd9fc 100644
--- a/app/containers/Avatar/Avatar.tsx
+++ b/app/containers/Avatar/Avatar.tsx
@@ -10,6 +10,7 @@ import { SubscriptionType } from '~/definitions';
 import { type IAvatar } from './interfaces';
 import I18n from '~/i18n';
 import Touch from '../Touch';
+import { isIOS26OrLater } from '~/lib/methods/helpers/deviceInfo';
 
 const Avatar = memo(
 	({
@@ -28,7 +29,7 @@ const Avatar = memo(
 		serverVersion,
 		text,
 		size = 25,
-		borderRadius = 4,
+		borderRadius = isIOS26OrLater ? 8 : 4,
 		type = SubscriptionType.DIRECT,
 		avatarExternalProviderUrl,
 		roomAvatarExternalProviderUrl,
diff --git a/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap b/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
index ecb8f0874b4..7be341954a9 100644
--- a/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
+++ b/app/containers/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -34,6 +34,7 @@ exports[`Story Snapshots: AvatarBase64 should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -51,6 +52,8 @@ exports[`Story Snapshots: AvatarBase64 should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -91,6 +94,7 @@ exports[`Story Snapshots: AvatarExternalProviderUrl should match snapshot 1`] =
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -108,6 +112,8 @@ exports[`Story Snapshots: AvatarExternalProviderUrl should match snapshot 1`] =
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -148,6 +154,7 @@ exports[`Story Snapshots: AvatarPath should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -165,6 +172,8 @@ exports[`Story Snapshots: AvatarPath should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -205,6 +214,7 @@ exports[`Story Snapshots: AvatarRoomId should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -222,6 +232,8 @@ exports[`Story Snapshots: AvatarRoomId should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -262,6 +274,7 @@ exports[`Story Snapshots: AvatarText should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -279,6 +292,8 @@ exports[`Story Snapshots: AvatarText should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -319,6 +334,7 @@ exports[`Story Snapshots: AvatarUrl should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -336,6 +352,8 @@ exports[`Story Snapshots: AvatarUrl should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -376,6 +394,7 @@ exports[`Story Snapshots: Channel should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -393,6 +412,8 @@ exports[`Story Snapshots: Channel should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -433,6 +454,7 @@ exports[`Story Snapshots: Children should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -450,6 +472,8 @@ exports[`Story Snapshots: Children should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -529,6 +553,7 @@ exports[`Story Snapshots: CustomBorderRadius should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -546,6 +571,8 @@ exports[`Story Snapshots: CustomBorderRadius should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -588,6 +615,7 @@ exports[`Story Snapshots: CustomStyle should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -605,6 +633,8 @@ exports[`Story Snapshots: CustomStyle should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -645,6 +675,7 @@ exports[`Story Snapshots: Direct should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -662,6 +693,8 @@ exports[`Story Snapshots: Direct should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -712,6 +745,7 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
       onLoadStart={[Function]}
       onProgress={[Function]}
       placeholder={[]}
+      sfEffect={null}
       source={
         [
           {
@@ -726,6 +760,8 @@ exports[`Story Snapshots: Emoji should match snapshot 1`] = `
           "width": 56,
         }
       }
+      symbolSize={null}
+      symbolWeight={null}
       transition={null}
       width={56}
     />
@@ -767,6 +803,7 @@ exports[`Story Snapshots: RoomAvatarExternalProviderUrl should match snapshot 1`
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -784,6 +821,8 @@ exports[`Story Snapshots: RoomAvatarExternalProviderUrl should match snapshot 1`
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -824,6 +863,7 @@ exports[`Story Snapshots: Static should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -841,6 +881,8 @@ exports[`Story Snapshots: Static should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -884,60 +926,63 @@ exports[`Story Snapshots: Touchable should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[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,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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="Avatar's avatar"
         accessible={true}
@@ -961,6 +1006,7 @@ exports[`Story Snapshots: Touchable should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -978,11 +1024,13 @@ exports[`Story Snapshots: Touchable should match snapshot 1`] = `
               "width": 56,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={56}
         />
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
 </View>
 `;
@@ -1021,6 +1069,7 @@ exports[`Story Snapshots: WithETag should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -1038,6 +1087,8 @@ exports[`Story Snapshots: WithETag should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -1078,6 +1129,7 @@ exports[`Story Snapshots: WithoutETag should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -1095,6 +1147,8 @@ exports[`Story Snapshots: WithoutETag should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
@@ -1135,6 +1189,7 @@ exports[`Story Snapshots: WrongServer should match snapshot 1`] = `
     onProgress={[Function]}
     placeholder={[]}
     priority="high"
+    sfEffect={null}
     source={
       [
         {
@@ -1152,6 +1207,8 @@ exports[`Story Snapshots: WrongServer should match snapshot 1`] = `
         "width": 56,
       }
     }
+    symbolSize={null}
+    symbolWeight={null}
     transition={null}
     width={56}
   />
diff --git a/app/containers/BackgroundContainer/__snapshots__/index.test.tsx.snap b/app/containers/BackgroundContainer/__snapshots__/index.test.tsx.snap
index 0a5d30836a0..d0e6e88fac0 100644
--- a/app/containers/BackgroundContainer/__snapshots__/index.test.tsx.snap
+++ b/app/containers/BackgroundContainer/__snapshots__/index.test.tsx.snap
@@ -42,6 +42,16 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
       }
     />
   </View>
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
+    }
+    contentInsetAdjustmentBehavior="automatic"
+  >
+    <View />
+  </RCTScrollView>
 </View>
 `;
 
@@ -87,26 +97,37 @@ exports[`Story Snapshots: BlackThemeLoading should match snapshot 1`] = `
       }
     />
   </View>
-  <ActivityIndicator
-    color="#9EA2A8"
-    style={
+  <RCTScrollView
+    contentContainerStyle={
       {
-        "backgroundColor": "transparent",
-        "fontFamily": "Inter",
-        "fontSize": 16,
-        "fontVariant": [
-          "tabular-nums",
-        ],
-        "fontWeight": "400",
-        "left": 0,
-        "paddingHorizontal": 24,
-        "position": "absolute",
-        "right": 0,
-        "textAlign": "center",
-        "top": 60,
+        "flex": 1,
       }
     }
-  />
+    contentInsetAdjustmentBehavior="automatic"
+  >
+    <View>
+      <ActivityIndicator
+        color="#9EA2A8"
+        style={
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontVariant": [
+              "tabular-nums",
+            ],
+            "fontWeight": "400",
+            "left": 0,
+            "paddingHorizontal": 24,
+            "position": "absolute",
+            "right": 0,
+            "textAlign": "center",
+            "top": 60,
+          }
+        }
+      />
+    </View>
+  </RCTScrollView>
 </View>
 `;
 
@@ -152,32 +173,46 @@ exports[`Story Snapshots: BlackThemeText should match snapshot 1`] = `
       }
     />
   </View>
-  <Text
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "left": 0,
-          "paddingHorizontal": 24,
-          "position": "absolute",
-          "right": 0,
-          "textAlign": "center",
-          "top": 60,
-        },
-        {
-          "color": "#9EA2A8",
-        },
-      ]
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
     }
+    contentInsetAdjustmentBehavior="automatic"
   >
-    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>
+      <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"
+        accessibilityRole="text"
+        accessible={true}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontVariant": [
+                "tabular-nums",
+              ],
+              "fontWeight": "400",
+              "left": 0,
+              "paddingHorizontal": 24,
+              "position": "absolute",
+              "right": 0,
+              "textAlign": "center",
+              "top": 60,
+            },
+            {
+              "color": "#9EA2A8",
+            },
+          ]
+        }
+      >
+        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>
+  </RCTScrollView>
 </View>
 `;
 
@@ -223,26 +258,37 @@ exports[`Story Snapshots: DarkThemeLoading should match snapshot 1`] = `
       }
     />
   </View>
-  <ActivityIndicator
-    color="#9EA2A8"
-    style={
+  <RCTScrollView
+    contentContainerStyle={
       {
-        "backgroundColor": "transparent",
-        "fontFamily": "Inter",
-        "fontSize": 16,
-        "fontVariant": [
-          "tabular-nums",
-        ],
-        "fontWeight": "400",
-        "left": 0,
-        "paddingHorizontal": 24,
-        "position": "absolute",
-        "right": 0,
-        "textAlign": "center",
-        "top": 60,
+        "flex": 1,
       }
     }
-  />
+    contentInsetAdjustmentBehavior="automatic"
+  >
+    <View>
+      <ActivityIndicator
+        color="#9EA2A8"
+        style={
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontVariant": [
+              "tabular-nums",
+            ],
+            "fontWeight": "400",
+            "left": 0,
+            "paddingHorizontal": 24,
+            "position": "absolute",
+            "right": 0,
+            "textAlign": "center",
+            "top": 60,
+          }
+        }
+      />
+    </View>
+  </RCTScrollView>
 </View>
 `;
 
@@ -288,32 +334,46 @@ exports[`Story Snapshots: DarkThemeText should match snapshot 1`] = `
       }
     />
   </View>
-  <Text
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "left": 0,
-          "paddingHorizontal": 24,
-          "position": "absolute",
-          "right": 0,
-          "textAlign": "center",
-          "top": 60,
-        },
-        {
-          "color": "#9EA2A8",
-        },
-      ]
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
     }
+    contentInsetAdjustmentBehavior="automatic"
   >
-    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>
+      <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"
+        accessibilityRole="text"
+        accessible={true}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontVariant": [
+                "tabular-nums",
+              ],
+              "fontWeight": "400",
+              "left": 0,
+              "paddingHorizontal": 24,
+              "position": "absolute",
+              "right": 0,
+              "textAlign": "center",
+              "top": 60,
+            },
+            {
+              "color": "#9EA2A8",
+            },
+          ]
+        }
+      >
+        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>
+  </RCTScrollView>
 </View>
 `;
 
@@ -359,26 +419,37 @@ exports[`Story Snapshots: Loading should match snapshot 1`] = `
       }
     />
   </View>
-  <ActivityIndicator
-    color="#6C727A"
-    style={
+  <RCTScrollView
+    contentContainerStyle={
       {
-        "backgroundColor": "transparent",
-        "fontFamily": "Inter",
-        "fontSize": 16,
-        "fontVariant": [
-          "tabular-nums",
-        ],
-        "fontWeight": "400",
-        "left": 0,
-        "paddingHorizontal": 24,
-        "position": "absolute",
-        "right": 0,
-        "textAlign": "center",
-        "top": 60,
+        "flex": 1,
       }
     }
-  />
+    contentInsetAdjustmentBehavior="automatic"
+  >
+    <View>
+      <ActivityIndicator
+        color="#6C727A"
+        style={
+          {
+            "backgroundColor": "transparent",
+            "fontFamily": "Inter",
+            "fontSize": 16,
+            "fontVariant": [
+              "tabular-nums",
+            ],
+            "fontWeight": "400",
+            "left": 0,
+            "paddingHorizontal": 24,
+            "position": "absolute",
+            "right": 0,
+            "textAlign": "center",
+            "top": 60,
+          }
+        }
+      />
+    </View>
+  </RCTScrollView>
 </View>
 `;
 
@@ -424,32 +495,46 @@ exports[`Story Snapshots: LongText should match snapshot 1`] = `
       }
     />
   </View>
-  <Text
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "left": 0,
-          "paddingHorizontal": 24,
-          "position": "absolute",
-          "right": 0,
-          "textAlign": "center",
-          "top": 60,
-        },
-        {
-          "color": "#6C727A",
-        },
-      ]
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
     }
+    contentInsetAdjustmentBehavior="automatic"
   >
-    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>
+      <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"
+        accessibilityRole="text"
+        accessible={true}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontVariant": [
+                "tabular-nums",
+              ],
+              "fontWeight": "400",
+              "left": 0,
+              "paddingHorizontal": 24,
+              "position": "absolute",
+              "right": 0,
+              "textAlign": "center",
+              "top": 60,
+            },
+            {
+              "color": "#6C727A",
+            },
+          ]
+        }
+      >
+        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>
+  </RCTScrollView>
 </View>
 `;
 
@@ -495,31 +580,45 @@ exports[`Story Snapshots: Text should match snapshot 1`] = `
       }
     />
   </View>
-  <Text
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "left": 0,
-          "paddingHorizontal": 24,
-          "position": "absolute",
-          "right": 0,
-          "textAlign": "center",
-          "top": 60,
-        },
-        {
-          "color": "#6C727A",
-        },
-      ]
+  <RCTScrollView
+    contentContainerStyle={
+      {
+        "flex": 1,
+      }
     }
+    contentInsetAdjustmentBehavior="automatic"
   >
-    Text here
-  </Text>
+    <View>
+      <Text
+        accessibilityLabel="Text here"
+        accessibilityRole="text"
+        accessible={true}
+        style={
+          [
+            {
+              "backgroundColor": "transparent",
+              "fontFamily": "Inter",
+              "fontSize": 16,
+              "fontVariant": [
+                "tabular-nums",
+              ],
+              "fontWeight": "400",
+              "left": 0,
+              "paddingHorizontal": 24,
+              "position": "absolute",
+              "right": 0,
+              "textAlign": "center",
+              "top": 60,
+            },
+            {
+              "color": "#6C727A",
+            },
+          ]
+        }
+      >
+        Text here
+      </Text>
+    </View>
+  </RCTScrollView>
 </View>
 `;
diff --git a/app/containers/BackgroundContainer/index.tsx b/app/containers/BackgroundContainer/index.tsx
index 57a64dad1d5..364c344b930 100644
--- a/app/containers/BackgroundContainer/index.tsx
+++ b/app/containers/BackgroundContainer/index.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { ActivityIndicator, ImageBackground, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, ImageBackground, ScrollView, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import sharedStyles from '~/views/Styles';
@@ -36,9 +37,11 @@ const BackgroundContainer = ({ text, loading }: IBackgroundContainer): ReactElem
 	return (
 		<View style={styles.container}>
 			<ImageBackground source={{ uri: `message_empty_${theme}` }} style={styles.image} />
-			{text && !loading ? <Text style={[styles.text, { color: themes[theme].fontHint }]}>{text}</Text> : null}
-			{/* @ts-ignore */}
-			{loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
+			<ScrollView contentContainerStyle={styles.container} contentInsetAdjustmentBehavior='automatic'>
+				{text && !loading ? <PlainText style={[styles.text, { color: themes[theme].fontHint }]}>{text}</PlainText> : null}
+				{/* @ts-ignore */}
+				{loading ? <ActivityIndicator style={styles.text} color={themes[theme].fontHint} /> : null}
+			</ScrollView>
 		</View>
 	);
 };
diff --git a/app/containers/Button/Button.test.tsx b/app/containers/Button/Button.test.tsx
index 06829aa76b3..e9d4e2c0c25 100644
--- a/app/containers/Button/Button.test.tsx
+++ b/app/containers/Button/Button.test.tsx
@@ -48,10 +48,9 @@ describe('ButtonTests', () => {
 		expect(ButtonTitle.props.children).toEqual(testProps.title);
 	});
 
-	test('find button using accessibilityLabel', async () => {
-		const { getByLabelText } = render(<TestButton />);
-		const Button = await getByLabelText(testProps.title);
-		expect(Button).toBeTruthy();
+	test('find button using accessibilityLabel', () => {
+		const { getByTestId } = render(<TestButton />);
+		expect(getByTestId(testProps.testID).props.accessibilityLabel).toBe(testProps.title);
 	});
 
 	test('title not visible while loading', async () => {
@@ -63,7 +62,7 @@ describe('ButtonTests', () => {
 	test('disabled button is in disabled state', async () => {
 		const { findByTestId } = render(<TestButton disabled={true} />);
 		const button = await findByTestId(testProps.testID);
-		expect(button.props.enabled).toBe(false);
+		expect(button).toBeDisabled();
 	});
 
 	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 1b0415bde25..a8ff522bd92 100644
--- a/app/containers/Button/__snapshots__/Button.test.tsx.snap
+++ b/app/containers/Button/__snapshots__/Button.test.tsx.snap
@@ -1,59 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Story Snapshots: CustomButton should match snapshot 1`] = `
-<RNGestureHandlerButton
+<View
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  activeOpacity={0.105}
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  activeUnderlayOpacity={0.105}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  enabled={true}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
-        "backgroundColor": "purple",
-        "borderRadius": 4,
         "justifyContent": "center",
-        "marginBottom": 12,
-        "padding": 10,
         "paddingHorizontal": 16,
         "paddingVertical": 14,
       },
       {
-        "cursor": undefined,
+        "borderRadius": 4,
+        "marginBottom": 12,
+      },
+      {
+        "backgroundColor": "purple",
+      },
+      {},
+      {
+        "padding": 10,
       },
     ]
   }
   testID="testButton"
   underlayColor="black"
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "black",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": 4,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -79,62 +87,69 @@ exports[`Story Snapshots: CustomButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`Story Snapshots: DisabledButton should match snapshot 1`] = `
-<RNGestureHandlerButton
+<View
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  activeOpacity={0.105}
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  activeUnderlayOpacity={0.105}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  enabled={false}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
-        "backgroundColor": "#D1EBFE",
-        "borderRadius": 4,
         "justifyContent": "center",
-        "marginBottom": 12,
         "paddingHorizontal": 16,
         "paddingVertical": 14,
       },
       {
-        "cursor": undefined,
+        "borderRadius": 4,
+        "marginBottom": 12,
       },
+      {
+        "backgroundColor": "#D1EBFE",
+      },
+      {},
+      undefined,
     ]
   }
   testID="testButton"
   underlayColor="black"
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "black",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": 4,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -156,61 +171,65 @@ exports[`Story Snapshots: DisabledButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`Story Snapshots: DisabledLoadingButton should match snapshot 1`] = `
-<RNGestureHandlerButton
+<View
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  activeOpacity={0.105}
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  activeUnderlayOpacity={0.105}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  enabled={false}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
-        "backgroundColor": "#D1EBFE",
-        "borderRadius": 4,
         "justifyContent": "center",
-        "marginBottom": 12,
         "paddingHorizontal": 16,
         "paddingVertical": 14,
       },
       {
-        "cursor": undefined,
+        "borderRadius": 4,
+        "marginBottom": 12,
+      },
+      {
+        "backgroundColor": "#D1EBFE",
       },
+      {},
+      undefined,
     ]
   }
   testID="testButton"
   underlayColor="black"
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "black",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": 4,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
   <ActivityIndicator
     color="#FFFFFF"
     style={
@@ -219,61 +238,65 @@ exports[`Story Snapshots: DisabledLoadingButton should match snapshot 1`] = `
       }
     }
   />
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`Story Snapshots: LoadingButton should match snapshot 1`] = `
-<RNGestureHandlerButton
+<View
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  activeOpacity={0.105}
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": true,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  activeUnderlayOpacity={0.105}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  enabled={false}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
-        "backgroundColor": "#D1EBFE",
-        "borderRadius": 4,
         "justifyContent": "center",
-        "marginBottom": 12,
         "paddingHorizontal": 16,
         "paddingVertical": 14,
       },
       {
-        "cursor": undefined,
+        "borderRadius": 4,
+        "marginBottom": 12,
+      },
+      {
+        "backgroundColor": "#D1EBFE",
       },
+      {},
+      undefined,
     ]
   }
   testID="testButton"
   underlayColor="black"
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "black",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": 4,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
   <ActivityIndicator
     color="#FFFFFF"
     style={
@@ -282,62 +305,69 @@ exports[`Story Snapshots: LoadingButton should match snapshot 1`] = `
       }
     }
   />
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`Story Snapshots: PrimaryButton should match snapshot 1`] = `
-<RNGestureHandlerButton
+<View
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  activeOpacity={0.105}
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  activeUnderlayOpacity={0.105}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  enabled={true}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
-        "backgroundColor": "#156FF5",
-        "borderRadius": 4,
         "justifyContent": "center",
-        "marginBottom": 12,
         "paddingHorizontal": 16,
         "paddingVertical": 14,
       },
       {
-        "cursor": undefined,
+        "borderRadius": 4,
+        "marginBottom": 12,
+      },
+      {
+        "backgroundColor": "#156FF5",
       },
+      {},
+      undefined,
     ]
   }
   testID="testButton"
   underlayColor="black"
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "black",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": 4,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -359,62 +389,69 @@ exports[`Story Snapshots: PrimaryButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`Story Snapshots: SecondaryButton should match snapshot 1`] = `
-<RNGestureHandlerButton
+<View
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  activeOpacity={0.105}
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  activeUnderlayOpacity={0.105}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  enabled={true}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
-        "backgroundColor": "#E4E7EA",
-        "borderRadius": 4,
         "justifyContent": "center",
-        "marginBottom": 12,
         "paddingHorizontal": 16,
         "paddingVertical": 14,
       },
       {
-        "cursor": undefined,
+        "borderRadius": 4,
+        "marginBottom": 12,
+      },
+      {
+        "backgroundColor": "#E4E7EA",
       },
+      {},
+      undefined,
     ]
   }
   testID="testButton"
   underlayColor="black"
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "black",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": 4,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -436,62 +473,69 @@ exports[`Story Snapshots: SecondaryButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`Story Snapshots: SmallButton should match snapshot 1`] = `
-<RNGestureHandlerButton
+<View
   accessibilityLabel="Press me!"
   accessibilityRole="button"
-  activeOpacity={0.105}
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
+  activeUnderlayOpacity={0.105}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  enabled={true}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  focusable={true}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
         "alignSelf": "center",
-        "backgroundColor": "#156FF5",
-        "borderRadius": 4,
-        "marginBottom": 12,
         "paddingHorizontal": 12,
         "paddingVertical": 8,
       },
       {
-        "cursor": undefined,
+        "borderRadius": 4,
+        "marginBottom": 12,
+      },
+      {
+        "backgroundColor": "#156FF5",
       },
+      {},
+      undefined,
     ]
   }
   testID="testButton"
   underlayColor="black"
 >
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "black",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": 4,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -515,5 +559,5 @@ exports[`Story Snapshots: SmallButton should match snapshot 1`] = `
   >
     Press me!
   </Text>
-</RNGestureHandlerButton>
+</View>
 `;
diff --git a/app/containers/Button/index.tsx b/app/containers/Button/index.tsx
index bbd625b5f1d..8e751797f73 100644
--- a/app/containers/Button/index.tsx
+++ b/app/containers/Button/index.tsx
@@ -1,13 +1,17 @@
 import { type FC } from 'react';
-import { type StyleProp, StyleSheet, Text, type TextStyle, type ViewStyle } from 'react-native';
-import { RectButton, type RectButtonProps } from 'react-native-gesture-handler';
+import { type Insets, type StyleProp, StyleSheet, type TextStyle, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import sharedStyles from '~/views/Styles';
 import ActivityIndicator from '../ActivityIndicator';
+import { RectButton } from '../GestureButtons';
 
-interface IButtonProps extends Omit<RectButtonProps, 'children' | 'enabled'> {
+interface IButtonProps {
 	title: string;
+	testID?: string;
+	hitSlop?: number | Insets;
+	accessibilityLabel?: string;
 	onPress: () => void;
 	type?: 'primary' | 'secondary';
 	backgroundColor?: string;
@@ -61,7 +65,9 @@ const Button: FC<IButtonProps> = ({
 	style,
 	styleText,
 	small,
-	...otherProps
+	testID,
+	hitSlop,
+	accessibilityLabel
 }) => {
 	const { colors } = useTheme();
 	const isPrimary = type === 'primary';
@@ -90,12 +96,17 @@ const Button: FC<IButtonProps> = ({
 	return (
 		<RectButton
 			onPress={onPress}
-			enabled={!isDisabled}
+			disabled={isDisabled}
 			style={containerStyle}
-			accessibilityLabel={title}
-			accessibilityRole='button'
-			{...otherProps}>
-			{loading ? <ActivityIndicator color={resolvedTextColor} style={{ padding: 0 }} /> : <Text style={textStyle}>{title}</Text>}
+			testID={testID}
+			hitSlop={hitSlop}
+			accessibilityLabel={accessibilityLabel ?? title}
+			accessibilityRole='button'>
+			{loading ? (
+				<ActivityIndicator color={resolvedTextColor} style={{ padding: 0 }} />
+			) : (
+				<PlainText style={textStyle}>{title}</PlainText>
+			)}
 		</RectButton>
 	);
 };
diff --git a/app/containers/CallHeader.tsx b/app/containers/CallHeader.tsx
index 51ccf7e3eb9..f89bd39ea43 100644
--- a/app/containers/CallHeader.tsx
+++ b/app/containers/CallHeader.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { A11y } from 'react-native-a11y-order';
 
 import { useAppSelector } from '../lib/hooks/useAppSelector';
@@ -44,7 +45,7 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 			<View>
 				<View style={style.actionSheetHeader}>
 					<View style={style.rowContainer}>
-						<Text style={style.actionSheetHeaderTitle}>{title}</Text>
+						<PlainText style={style.actionSheetHeaderTitle}>{title}</PlainText>
 						{calling && direct ? <DotsLoader /> : null}
 					</View>
 					<View style={style.actionSheetHeaderButtons}>
@@ -54,7 +55,7 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 								onPress={() => setCam(!cam)}
 								style={[style.iconCallContainerRight, { backgroundColor: handleColors(cam).button }]}
 								hitSlop={BUTTON_HIT_SLOP}
-								enabled={!calling}>
+								disabled={calling}>
 								<CustomIcon name={cam ? 'camera-filled' : 'camera-disabled'} size={24} color={handleColors(cam).icon} />
 							</Touch>
 						</A11y.Index>
@@ -64,7 +65,7 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 								onPress={() => setMic(!mic)}
 								style={[style.iconCallContainer, { backgroundColor: handleColors(mic).button }]}
 								hitSlop={BUTTON_HIT_SLOP}
-								enabled={!calling}>
+								disabled={calling}>
 								<CustomIcon name={mic ? 'mic' : 'mic-off'} size={24} color={handleColors(mic).icon} />
 							</Touch>
 						</A11y.Index>
@@ -73,9 +74,9 @@ export const CallHeader = ({ mic, cam, setCam, setMic, title, avatar, uid, name,
 				<View style={style.actionSheetUsernameContainer}>
 					<AvatarContainer text={avatar} size={36} />
 					{direct ? <StatusContainer size={16} id={uid} style={style.statusContainerMargin} /> : null}
-					<Text style={{ ...style.actionSheetUsername, marginLeft: !direct ? 8 : 0 }} numberOfLines={1}>
+					<PlainText style={{ ...style.actionSheetUsername, marginLeft: !direct ? 8 : 0 }} numberOfLines={1}>
 						{name}
-					</Text>
+					</PlainText>
 				</View>
 			</View>
 		</A11y.Order>
diff --git a/app/containers/ChangePasswordRequired.tsx b/app/containers/ChangePasswordRequired.tsx
index 3433652c667..a3cc8f21fff 100644
--- a/app/containers/ChangePasswordRequired.tsx
+++ b/app/containers/ChangePasswordRequired.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { type NavigationProp, type NavigationState } from '@react-navigation/native';
 
@@ -28,8 +29,10 @@ export const ChangePasswordRequired = ({ navigation }: IChangePasswordRequired)
 			<View style={styles.iconContainer}>
 				<CustomIcon name='info' size={36} color={colors.statusFontWarning} />
 			</View>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('You_need_to_change_your_password')}</Text>
-			<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('To_continue_using_RocketChat')}</Text>
+			<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>
+				{I18n.t('You_need_to_change_your_password')}
+			</PlainText>
+			<PlainText style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('To_continue_using_RocketChat')}</PlainText>
 			<Button
 				testID='change-password-required-button'
 				title={I18n.t('Change_password')}
diff --git a/app/containers/Chip/__snapshots__/Chip.test.tsx.snap b/app/containers/Chip/__snapshots__/Chip.test.tsx.snap
index 724d28a710d..c9e3366a6d1 100644
--- a/app/containers/Chip/__snapshots__/Chip.test.tsx.snap
+++ b/app/containers/Chip/__snapshots__/Chip.test.tsx.snap
@@ -80,6 +80,9 @@ exports[`Story Snapshots: ChipFullWidth should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Full Width Text With Long Text That Should Be Wrapped"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -208,6 +211,7 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -225,6 +229,8 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = `
               "width": 28,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={28}
         />
@@ -242,6 +248,9 @@ exports[`Story Snapshots: ChipText should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Rocket.Cat"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -396,6 +405,7 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -413,6 +423,8 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = `
               "width": 28,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={28}
         />
@@ -430,6 +442,9 @@ exports[`Story Snapshots: ChipWithShortText should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Short"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -561,6 +576,9 @@ exports[`Story Snapshots: ChipWithoutAvatar should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Without Avatar"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -692,6 +710,9 @@ exports[`Story Snapshots: ChipWithoutAvatarAndIcon should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Without Avatar and Icon"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -820,6 +841,7 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -837,6 +859,8 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = `
               "width": 28,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={28}
         />
@@ -854,6 +878,9 @@ exports[`Story Snapshots: ChipWithoutIcon should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Without Icon"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
diff --git a/app/containers/Chip/index.tsx b/app/containers/Chip/index.tsx
index 216aa2b998f..4ccb039c0f9 100644
--- a/app/containers/Chip/index.tsx
+++ b/app/containers/Chip/index.tsx
@@ -1,4 +1,5 @@
-import { Pressable, StyleSheet, View, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import { CustomIcon } from '../CustomIcon';
@@ -63,9 +64,9 @@ const Chip = ({ avatar, text, onPress, testID, style, fullWidth }: IChip) => {
 			<View style={styles.container}>
 				{avatar ? <Avatar text={avatar} size={28} style={styles.avatar} /> : null}
 				<View style={[styles.textContainer, fullWidth && { maxWidth: undefined }]}>
-					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
+					<PlainText style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{text}
-					</Text>
+					</PlainText>
 				</View>
 				{onPress ? <CustomIcon name='close' size={16} /> : null}
 			</View>
diff --git a/app/containers/ContextMenuButton/ContextMenuButton.ios.tsx b/app/containers/ContextMenuButton/ContextMenuButton.ios.tsx
new file mode 100644
index 00000000000..bf3caea5e09
--- /dev/null
+++ b/app/containers/ContextMenuButton/ContextMenuButton.ios.tsx
@@ -0,0 +1,30 @@
+import { Button, Image, Label } from '@expo/ui/swift-ui';
+import { disabled } from '@expo/ui/swift-ui/modifiers';
+
+import { type TIconsName } from '../CustomIcon';
+import { useTheme } from '~/theme';
+import { useIconImageUri } from './useIconImageUri';
+
+const ICON_SIZE = 24;
+
+interface IContextMenuButton {
+	title: string;
+	icon?: TIconsName;
+	onPress: () => void;
+	testID?: string;
+	danger?: boolean;
+	enabled?: boolean;
+}
+
+const ContextMenuButton = ({ title, icon, onPress, testID, danger, enabled = true }: IContextMenuButton) => {
+	const { colors } = useTheme();
+	const iconUri = useIconImageUri(icon, ICON_SIZE, danger ? colors.fontDanger : colors.fontDefault);
+
+	return (
+		<Button testID={testID} role={danger ? 'destructive' : 'default'} onPress={onPress} modifiers={[disabled(!enabled)]}>
+			<Label title={title} icon={iconUri ? <Image uiImage={iconUri} /> : undefined} />
+		</Button>
+	);
+};
+
+export default ContextMenuButton;
diff --git a/app/containers/ContextMenuButton/useIconImageUri.ts b/app/containers/ContextMenuButton/useIconImageUri.ts
new file mode 100644
index 00000000000..25ceb05c3f8
--- /dev/null
+++ b/app/containers/ContextMenuButton/useIconImageUri.ts
@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+
+import { IconSet, type TIconsName } from '../CustomIcon';
+
+const imageUris = new Map<string, Promise<string | undefined>>();
+
+const renderIconImage = (name: TIconsName, size: number, color: string) => {
+	const key = `${name}-${size}-${color}`;
+	const cached = imageUris.get(key);
+	if (cached) {
+		return cached;
+	}
+	const pending = IconSet.getImageSource(name, size, color).then(
+		source => source?.uri,
+		() => undefined
+	);
+	imageUris.set(key, pending);
+	return pending;
+};
+
+export const useIconImageUri = (name: TIconsName | undefined, size: number, color: string) => {
+	const [uri, setUri] = useState<string>();
+
+	useEffect(() => {
+		if (!name) {
+			return;
+		}
+		let active = true;
+		renderIconImage(name, size, color).then(renderedUri => {
+			if (active) {
+				setUri(renderedUri);
+			}
+		});
+		return () => {
+			active = false;
+		};
+	}, [name, size, color]);
+
+	return name ? uri : undefined;
+};
diff --git a/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap b/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap
index 02fd544278f..e3b93fff7d4 100644
--- a/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap
+++ b/app/containers/DirectoryItem/__snapshots__/DirectoryItem.test.tsx.snap
@@ -10,282 +10,216 @@ exports[`Story Snapshots: CustomStyle should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="Styled Room "
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item-style"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="Styled Room "
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item-style"
       >
-        <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"
+        <View
+          accessibilityLabel="S's avatar"
+          accessible={false}
           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,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               },
+              undefined,
             ]
           }
-          testID="directory-item-style"
-          underlayColor="#E4E7EA"
+          testID="avatar"
         >
-          <View
-            collapsable={false}
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={{"current":"Object"}}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={30}
+            nativeViewRef={{"current":"NativeComponent"}}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            sfEffect={null}
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/@S?format=png&size=60",
+                },
+              ]
+            }
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
+            transition={null}
+            width={30}
           />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
+          }
+        >
           <View
-            style={{}}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
           >
-            <View
+            <Text
+              allowFontScaling={false}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
+                    "color": "#1F2329",
+                    "fontSize": 16,
                   },
-                  {
-                    "height": 54,
-                  },
-                  {
-                    "backgroundColor": "#e0e0e0",
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="S's avatar"
-                accessible={false}
-                style={
                   [
                     {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
+                      "lineHeight": 16,
                     },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={30}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/@S?format=png&size=60",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    }
-                  }
-                  transition={null}
-                  width={30}
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    Styled Room
-                  </Text>
-                </View>
-                <Text
-                  accessibilityLabel="Custom style applied"
-                  numberOfLines={1}
-                  style={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                        "lineHeight": undefined,
+                        "marginRight": 4,
                       },
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 14,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
+                        "marginRight": 0,
                       },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="markdown-preview-Custom style applied"
-                >
-                  Custom style applied
-                </Text>
-              </View>
-            </View>
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              Styled Room
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "fontSize": 15,
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Custom style applied
+          </Text>
+        </View>
+      </View>
     </View>
   </View>
 </RCTScrollView>
@@ -301,280 +235,216 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="General "
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="General "
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item"
       >
-        <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"
+        <View
+          accessibilityLabel="G's avatar"
+          accessible={false}
           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,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               },
+              undefined,
             ]
           }
-          testID="directory-item"
-          underlayColor="#E4E7EA"
+          testID="avatar"
         >
-          <View
-            collapsable={false}
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={{"current":"Object"}}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={30}
+            nativeViewRef={{"current":"NativeComponent"}}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            sfEffect={null}
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/@G?format=png&size=60",
+                },
+              ]
+            }
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
+            transition={null}
+            width={30}
           />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
+          }
+        >
           <View
-            style={{}}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
           >
-            <View
+            <Text
+              allowFontScaling={false}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
+                    "color": "#1F2329",
+                    "fontSize": 16,
                   },
-                  {
-                    "height": 54,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="G's avatar"
-                accessible={false}
-                style={
                   [
                     {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    },
-                    {
-                      "marginRight": 12,
+                      "lineHeight": 16,
                     },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={30}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/@G?format=png&size=60",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    }
-                  }
-                  transition={null}
-                  width={30}
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    General
-                  </Text>
-                </View>
-                <Text
-                  accessibilityLabel="A public room"
-                  numberOfLines={1}
-                  style={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
+                        "marginRight": 4,
                       },
                       {
-                        "color": "#2F343D",
-                        "lineHeight": undefined,
+                        "marginRight": 0,
                       },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 14,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="markdown-preview-A public room"
-                >
-                  A public room
-                </Text>
-              </View>
-            </View>
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              General
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "fontSize": 15,
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            A public room
+          </Text>
+        </View>
+      </View>
     </View>
   </View>
 </RCTScrollView>
@@ -590,249 +460,183 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="Alice Johnson "
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item-dm"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="Alice Johnson "
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item-dm"
       >
-        <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"
+        <View
+          accessibilityLabel="A's avatar"
+          accessible={false}
           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,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               },
+              undefined,
             ]
           }
-          testID="directory-item-dm"
-          underlayColor="#E4E7EA"
+          testID="avatar"
         >
-          <View
-            collapsable={false}
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={{"current":"Object"}}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={30}
+            nativeViewRef={{"current":"NativeComponent"}}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            sfEffect={null}
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/A?format=png&size=60",
+                },
+              ]
+            }
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
+            transition={null}
+            width={30}
           />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
+          }
+        >
           <View
-            style={{}}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
           >
-            <View
+            <Text
+              numberOfLines={1}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
                   },
                   {
-                    "height": 54,
+                    "color": "#2F343D",
                   },
-                  undefined,
                 ]
               }
             >
-              <View
-                accessibilityLabel="A's avatar"
-                accessible={false}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={30}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/A?format=png&size=60",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    }
-                  }
-                  transition={null}
-                  width={30}
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    Alice Johnson
-                  </Text>
-                </View>
-                <Text
-                  accessibilityLabel="Hey there!"
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                        "lineHeight": undefined,
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 14,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="markdown-preview-Hey there!"
-                >
-                  Hey there!
-                </Text>
-              </View>
-            </View>
+              Alice Johnson
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "fontSize": 15,
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Hey there!
+          </Text>
+        </View>
+      </View>
     </View>
   </View>
 </RCTScrollView>
@@ -848,302 +652,241 @@ exports[`Story Snapshots: LongRoomName should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="This is a very very very very very very very long room name that should be truncated 9999 members"
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item-long"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="This is a very very very very very very very long room name that should be truncated 9999 members"
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item-long"
       >
-        <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"
+        <View
+          accessibilityLabel="L's avatar"
+          accessible={false}
           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,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               },
+              undefined,
             ]
           }
-          testID="directory-item-long"
-          underlayColor="#E4E7EA"
+          testID="avatar"
         >
-          <View
-            collapsable={false}
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={{"current":"Object"}}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={30}
+            nativeViewRef={{"current":"NativeComponent"}}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            sfEffect={null}
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/@L?format=png&size=60",
+                },
+              ]
+            }
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
+            transition={null}
+            width={30}
           />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
+          }
+        >
           <View
-            style={{}}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
           >
-            <View
+            <Text
+              allowFontScaling={false}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
-                  },
-                  {
-                    "height": 54,
+                    "color": "#1F2329",
+                    "fontSize": 16,
                   },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="L's avatar"
-                accessible={false}
-                style={
                   [
                     {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
+                      "lineHeight": 16,
                     },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={30}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/@L?format=png&size=60",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    }
-                  }
-                  transition={null}
-                  width={30}
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    This is a very very very very very very very long room name that should be truncated
-                  </Text>
-                </View>
-                <Text
-                  accessibilityLabel="Long name test"
-                  numberOfLines={1}
-                  style={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                        "lineHeight": undefined,
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 14,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
+                        "marginRight": 4,
                       },
                       {
-                        "color": "#6C727A",
+                        "marginRight": 0,
                       },
-                    ]
-                  }
-                  testID="markdown-preview-Long name test"
-                >
-                  Long name test
-                </Text>
-              </View>
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 14,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "paddingLeft": 10,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#6C727A",
-                    },
-                  ]
-                }
-              >
-                9999 members
-              </Text>
-            </View>
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              This is a very very very very very very very long room name that should be truncated
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "fontSize": 15,
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Long name test
+          </Text>
+        </View>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "paddingLeft": 10,
+                "textAlign": "left",
+              },
+              {
+                "marginTop": 0.5,
+              },
+              {
+                "color": "#6C727A",
+              },
+            ]
+          }
+        >
+          9999 members
+        </Text>
+      </View>
     </View>
   </View>
 </RCTScrollView>
@@ -1159,185 +902,144 @@ exports[`Story Snapshots: OnlyTitle should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="Just a title "
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item-title"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="Just a title "
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item-title"
       >
-        <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"
+        <View
           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,
-              },
-            ]
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
           }
-          testID="directory-item-title"
-          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,
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
               }
             }
-          />
-          <View
-            style={{}}
           >
-            <View
+            <Text
+              allowFontScaling={false}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
+                    "color": "#1F2329",
+                    "fontSize": 16,
                   },
+                  [
+                    {
+                      "lineHeight": 16,
+                    },
+                    [
+                      {
+                        "marginRight": 4,
+                      },
+                      {
+                        "marginRight": 0,
+                      },
+                    ],
+                  ],
                   {
-                    "height": 54,
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
                   },
-                  undefined,
+                  {},
                 ]
               }
             >
-              <View
-                style={
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
                   {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    Just a title
-                  </Text>
-                </View>
-              </View>
-            </View>
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              Just a title
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </View>
+      </View>
     </View>
   </View>
 </RCTScrollView>
@@ -1353,280 +1055,216 @@ exports[`Story Snapshots: TeamMain should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="Engineering Team "
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item-team"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="Engineering Team "
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item-team"
       >
-        <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"
+        <View
+          accessibilityLabel="E's avatar"
+          accessible={false}
           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,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               },
+              undefined,
             ]
           }
-          testID="directory-item-team"
-          underlayColor="#E4E7EA"
+          testID="avatar"
         >
-          <View
-            collapsable={false}
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={{"current":"Object"}}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={30}
+            nativeViewRef={{"current":"NativeComponent"}}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            sfEffect={null}
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/@E?format=png&size=60",
+                },
+              ]
+            }
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
+            transition={null}
+            width={30}
           />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
+          }
+        >
           <View
-            style={{}}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
           >
-            <View
+            <Text
+              allowFontScaling={false}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
+                    "color": "#1F2329",
+                    "fontSize": 16,
                   },
-                  {
-                    "height": 54,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="E's avatar"
-                accessible={false}
-                style={
                   [
                     {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    },
-                    {
-                      "marginRight": 12,
+                      "lineHeight": 16,
                     },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={30}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
                     [
                       {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/@E?format=png&size=60",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    }
-                  }
-                  transition={null}
-                  width={30}
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    Engineering Team
-                  </Text>
-                </View>
-                <Text
-                  accessibilityLabel="Main team room"
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                        "lineHeight": undefined,
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 14,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
+                        "marginRight": 4,
                       },
                       {
-                        "color": "#6C727A",
+                        "marginRight": 0,
                       },
-                    ]
-                  }
-                  testID="markdown-preview-Main team room"
-                >
-                  Main team room
-                </Text>
-              </View>
-            </View>
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              Engineering Team
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "fontSize": 15,
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Main team room
+          </Text>
+        </View>
+      </View>
     </View>
   </View>
 </RCTScrollView>
@@ -1642,302 +1280,241 @@ exports[`Story Snapshots: WithRightLabel should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="General 123 members"
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item-label"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="General 123 members"
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item-label"
       >
-        <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"
+        <View
+          accessibilityLabel="G's avatar"
+          accessible={false}
           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,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               },
+              undefined,
             ]
           }
-          testID="directory-item-label"
-          underlayColor="#E4E7EA"
+          testID="avatar"
         >
-          <View
-            collapsable={false}
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={{"current":"Object"}}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={30}
+            nativeViewRef={{"current":"NativeComponent"}}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            sfEffect={null}
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/@G?format=png&size=60",
+                },
+              ]
+            }
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
+            transition={null}
+            width={30}
           />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
+          }
+        >
           <View
-            style={{}}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
           >
-            <View
+            <Text
+              allowFontScaling={false}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
-                  },
-                  {
-                    "height": 54,
+                    "color": "#1F2329",
+                    "fontSize": 16,
                   },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="G's avatar"
-                accessible={false}
-                style={
                   [
                     {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
+                      "lineHeight": 16,
                     },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={30}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
-                    [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/@G?format=png&size=60",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    }
-                  }
-                  transition={null}
-                  width={30}
-                />
-              </View>
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    General
-                  </Text>
-                </View>
-                <Text
-                  accessibilityLabel="Room with label"
-                  numberOfLines={1}
-                  style={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                        "lineHeight": undefined,
+                        "marginRight": 4,
                       },
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 14,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
+                        "marginRight": 0,
                       },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
-                  }
-                  testID="markdown-preview-Room with label"
-                >
-                  Room with label
-                </Text>
-              </View>
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 14,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "paddingLeft": 10,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#6C727A",
-                    },
-                  ]
-                }
-              >
-                123 members
-              </Text>
-            </View>
+                    ],
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              General
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "fontSize": 15,
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            Room with label
+          </Text>
+        </View>
+        <Text
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 14,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "paddingLeft": 10,
+                "textAlign": "left",
+              },
+              {
+                "marginTop": 0.5,
+              },
+              {
+                "color": "#6C727A",
+              },
+            ]
+          }
+        >
+          123 members
+        </Text>
+      </View>
     </View>
   </View>
 </RCTScrollView>
@@ -1953,241 +1530,201 @@ exports[`Story Snapshots: WithoutDescription should match snapshot 1`] = `
 >
   <View>
     <View
-      accessibilityLabel="No description room "
-      accessible={true}
-      importantForAccessibility="yes"
-      testID="directory-item-no-desc"
+      style={
+        [
+          {
+            "marginHorizontal": 16,
+            "overflow": "hidden",
+          },
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 12,
+            "paddingHorizontal": 16,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "height": 54,
+          },
+          undefined,
+          undefined,
+        ]
+      }
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
+      <View
+        accessibilityLabel="No description room "
+        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}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            undefined,
+            {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "flex": 1,
+              "flexDirection": "row",
+              "gap": 12,
+            },
+            false,
             undefined,
           ]
         }
+        testID="directory-item-no-desc"
       >
-        <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"
+        <View
+          accessibilityLabel="N's avatar"
+          accessible={false}
           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,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               },
+              undefined,
             ]
           }
-          testID="directory-item-no-desc"
-          underlayColor="#E4E7EA"
+          testID="avatar"
         >
-          <View
-            collapsable={false}
+          <ViewManagerAdapter_ExpoImage
+            borderRadius={4}
+            containerViewRef={{"current":"Object"}}
+            contentFit="cover"
+            contentPosition={
+              {
+                "left": "50%",
+                "top": "50%",
+              }
+            }
+            height={30}
+            nativeViewRef={{"current":"NativeComponent"}}
+            onError={[Function]}
+            onLoad={[Function]}
+            onLoadStart={[Function]}
+            onProgress={[Function]}
+            placeholder={[]}
+            priority="high"
+            sfEffect={null}
+            source={
+              [
+                {
+                  "headers": {
+                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                  },
+                  "uri": "https://open.rocket.chat/avatar/@N?format=png&size=60",
+                },
+              ]
+            }
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "borderRadius": 4,
+                "height": 30,
+                "width": 30,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
+            transition={null}
+            width={30}
           />
+        </View>
+        <View
+          style={
+            {
+              "flex": 1,
+              "marginRight": 20,
+            }
+          }
+        >
           <View
-            style={{}}
+            style={
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "gap": 4,
+              }
+            }
           >
-            <View
+            <Text
+              allowFontScaling={false}
+              selectable={false}
               style={
                 [
                   {
-                    "alignItems": "center",
-                    "flex": 1,
-                    "flexDirection": "row",
-                    "justifyContent": "center",
-                    "paddingHorizontal": 15,
-                  },
-                  {
-                    "height": 54,
+                    "color": "#1F2329",
+                    "fontSize": 16,
                   },
-                  undefined,
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="N's avatar"
-                accessible={false}
-                style={
                   [
                     {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
+                      "lineHeight": 16,
                     },
-                    {
-                      "marginRight": 12,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={30}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
                     [
                       {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/@N?format=png&size=60",
+                        "marginRight": 4,
                       },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 30,
-                      "width": 30,
-                    }
-                  }
-                  transition={null}
-                  width={30}
-                />
-              </View>
-              <View
-                style={
+                      {
+                        "marginRight": 0,
+                      },
+                    ],
+                  ],
                   {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                  }
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    No description room
-                  </Text>
-                </View>
-              </View>
-            </View>
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+            <Text
+              numberOfLines={1}
+              style={
+                [
+                  {
+                    "flexShrink": 1,
+                    "fontSize": 17,
+                    "fontWeight": "500",
+                  },
+                  {
+                    "color": "#2F343D",
+                  },
+                ]
+              }
+            >
+              No description room
+            </Text>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </View>
+      </View>
     </View>
   </View>
 </RCTScrollView>
diff --git a/app/containers/DirectoryItem/index.ios.tsx b/app/containers/DirectoryItem/index.ios.tsx
new file mode 100644
index 00000000000..cc1492c1c51
--- /dev/null
+++ b/app/containers/DirectoryItem/index.ios.tsx
@@ -0,0 +1,66 @@
+import { type ReactElement } from 'react';
+import { Text, type ViewStyle } from 'react-native';
+
+import Avatar from '../Avatar';
+import RoomTypeIcon from '../RoomTypeIcon';
+import NativeListRow from '../NativeListRow';
+import { AVATAR_SIZE } from '../NativeListRow/constants';
+import styles from './styles';
+import { useTheme } from '~/theme';
+import usePreviewFormatText from '~/lib/hooks/usePreviewFormatText';
+
+export { ROW_HEIGHT } from '../NativeListRow/constants';
+
+interface IDirectoryItem {
+	title: string;
+	description?: string;
+	avatar?: string;
+	type: string;
+	onPress(): void;
+	testID: string;
+	style?: ViewStyle;
+	rightLabel?: string;
+	rid?: string;
+	teamMain?: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
+}
+
+const DirectoryItem = ({
+	title,
+	description,
+	avatar,
+	onPress,
+	testID,
+	rightLabel,
+	type,
+	rid,
+	teamMain,
+	isFirst,
+	isLast
+}: IDirectoryItem): ReactElement => {
+	const { colors } = useTheme();
+	const formattedDescription = usePreviewFormatText(description ?? '');
+	return (
+		<NativeListRow
+			title={title}
+			subtitle={formattedDescription || undefined}
+			onPress={onPress}
+			testID={testID}
+			accessibilityLabel={`${title || ''} ${rightLabel || ''}`}
+			isFirst={isFirst}
+			isLast={isLast}
+			leading={<Avatar accessible={false} text={avatar} size={AVATAR_SIZE} type={type} rid={rid} />}
+			titleLeading={type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} style={styles.titleIcon} /> : undefined}
+			trailing={
+				rightLabel ? (
+					<Text style={[styles.directoryItemLabel, styles.nativeRowLabel, { color: colors.fontSecondaryInfo }]}>
+						{rightLabel}
+					</Text>
+				) : undefined
+			}
+		/>
+	);
+};
+
+export default DirectoryItem;
diff --git a/app/containers/DirectoryItem/index.tsx b/app/containers/DirectoryItem/index.tsx
index 77881bd3924..d239e568638 100644
--- a/app/containers/DirectoryItem/index.tsx
+++ b/app/containers/DirectoryItem/index.tsx
@@ -1,5 +1,6 @@
 import { memo, type ReactElement } from 'react';
-import { PixelRatio, Text, View, type ViewStyle } from 'react-native';
+import { PixelRatio, View, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import Touch from '../Touch';
 import Avatar from '../Avatar';
@@ -26,13 +27,15 @@ interface IDirectoryItem {
 	rightLabel?: string;
 	rid?: string;
 	teamMain?: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
 }
 
 const DirectoryItemLabel = memo(({ text, color }: IDirectoryItemLabel) => {
 	if (!text) {
 		return null;
 	}
-	return <Text style={[styles.directoryItemLabel, { color }]}>{text}</Text>;
+	return <PlainText style={[styles.directoryItemLabel, { color }]}>{text}</PlainText>;
 });
 
 const DirectoryItem = ({
@@ -59,9 +62,9 @@ const DirectoryItem = ({
 					<View style={styles.directoryItemTextContainer}>
 						<View style={styles.directoryItemTextTitle}>
 							{type !== 'd' ? <RoomTypeIcon type={type} teamMain={teamMain} /> : null}
-							<Text style={[styles.directoryItemName, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
+							<PlainText style={[styles.directoryItemName, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 								{title}
-							</Text>
+							</PlainText>
 						</View>
 						{description ? (
 							<MarkdownPreview
diff --git a/app/containers/DirectoryItem/styles.ts b/app/containers/DirectoryItem/styles.ts
index 23298b6f5c8..8f7af1781c0 100644
--- a/app/containers/DirectoryItem/styles.ts
+++ b/app/containers/DirectoryItem/styles.ts
@@ -31,6 +31,12 @@ export default StyleSheet.create({
 		fontSize: 14,
 		...sharedStyles.textRegular
 	},
+	titleIcon: {
+		marginRight: 0
+	},
+	nativeRowLabel: {
+		marginTop: StyleSheet.hairlineWidth
+	},
 	directoryItemLabel: {
 		fontSize: 14,
 		paddingLeft: 10,
diff --git a/app/containers/EmojiPicker/Emoji.tsx b/app/containers/EmojiPicker/Emoji.tsx
index 945d98bdc30..8d1d3d65b5f 100644
--- a/app/containers/EmojiPicker/Emoji.tsx
+++ b/app/containers/EmojiPicker/Emoji.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import useShortnameToUnicode from '~/lib/hooks/useShortnameToUnicode';
 import { useCustomEmoji } from '~/lib/hooks/useCustomEmoji';
@@ -15,5 +15,5 @@ export const Emoji = ({ emoji }: IEmojiProps): ReactElement => {
 	if (customEmoji) {
 		return <CustomEmoji style={styles.customCategoryEmoji} emoji={customEmoji} />;
 	}
-	return <Text style={styles.categoryEmoji}>{formatShortnameToUnicode(`:${emoji}:`)}</Text>;
+	return <PlainText style={styles.categoryEmoji}>{formatShortnameToUnicode(`:${emoji}:`)}</PlainText>;
 };
diff --git a/app/containers/EmojiPicker/index.tsx b/app/containers/EmojiPicker/index.tsx
index 52fb60422bf..dd6a875648b 100644
--- a/app/containers/EmojiPicker/index.tsx
+++ b/app/containers/EmojiPicker/index.tsx
@@ -49,15 +49,9 @@ const EmojiPicker = ({
 	);
 
 	const renderTabItem = (tab: Route, color: string) => (
-		<CustomIcon
-			accessible
-			accessibilityLabel={tab?.accessibilityLabel}
-			size={24}
-			name={tab.title as TIconsName}
-			color={color}
-			style={styles.tabEmoji}
-			testID={`emoji-picker-tab-${tab.title}`}
-		/>
+		<View accessible accessibilityLabel={tab?.accessibilityLabel} testID={`emoji-picker-tab-${tab.title}`}>
+			<CustomIcon size={24} name={tab.title as TIconsName} color={color} style={styles.tabEmoji} />
+		</View>
 	);
 
 	return (
diff --git a/app/containers/GestureButtons/BorderlessButton.tsx b/app/containers/GestureButtons/BorderlessButton.tsx
new file mode 100644
index 00000000000..a960f434169
--- /dev/null
+++ b/app/containers/GestureButtons/BorderlessButton.tsx
@@ -0,0 +1,44 @@
+import { Touchable } from 'react-native-gesture-handler';
+
+import { isAndroid } from '~/lib/methods/helpers/deviceInfo';
+import { type IGestureButtonProps } from './types';
+
+const BorderlessButton = ({
+	children,
+	ref,
+	onPress,
+	onLongPress,
+	disabled,
+	style,
+	hitSlop,
+	testID,
+	accessible,
+	accessibilityLabel,
+	accessibilityHint,
+	accessibilityRole,
+	accessibilityState,
+	rippleColor,
+	foreground,
+	activeOpacity = 0.3
+}: IGestureButtonProps) => (
+	<Touchable
+		ref={ref}
+		onPress={onPress}
+		onLongPress={onLongPress}
+		disabled={disabled}
+		style={style}
+		hitSlop={hitSlop}
+		testID={testID}
+		accessible={accessible}
+		accessibilityLabel={accessibilityLabel}
+		accessibilityHint={accessibilityHint}
+		accessibilityRole={accessibilityRole}
+		accessibilityState={accessibilityState}
+		androidRipple={isAndroid ? { color: rippleColor, borderless: true, foreground } : undefined}
+		activeOpacity={isAndroid ? undefined : activeOpacity}
+		animationDuration={isAndroid ? undefined : 0}>
+		{children}
+	</Touchable>
+);
+
+export default BorderlessButton;
diff --git a/app/containers/GestureButtons/RectButton.tsx b/app/containers/GestureButtons/RectButton.tsx
new file mode 100644
index 00000000000..65da8156168
--- /dev/null
+++ b/app/containers/GestureButtons/RectButton.tsx
@@ -0,0 +1,50 @@
+import { Touchable } from 'react-native-gesture-handler';
+
+import { isAndroid } from '~/lib/methods/helpers/deviceInfo';
+import { type IGestureButtonProps } from './types';
+
+interface IRectButtonProps extends IGestureButtonProps {
+	underlayColor?: string;
+}
+
+const RectButton = ({
+	children,
+	ref,
+	onPress,
+	onLongPress,
+	disabled,
+	style,
+	hitSlop,
+	testID,
+	accessible,
+	accessibilityLabel,
+	accessibilityHint,
+	accessibilityRole,
+	accessibilityState,
+	rippleColor,
+	foreground,
+	underlayColor = 'black',
+	activeOpacity = 0.105
+}: IRectButtonProps) => (
+	<Touchable
+		ref={ref}
+		onPress={onPress}
+		onLongPress={onLongPress}
+		disabled={disabled}
+		style={style}
+		hitSlop={hitSlop}
+		testID={testID}
+		accessible={accessible}
+		accessibilityLabel={accessibilityLabel}
+		accessibilityHint={accessibilityHint}
+		accessibilityRole={accessibilityRole}
+		accessibilityState={accessibilityState}
+		androidRipple={isAndroid ? { color: rippleColor, foreground } : undefined}
+		underlayColor={isAndroid ? undefined : underlayColor}
+		activeUnderlayOpacity={isAndroid ? undefined : activeOpacity}
+		animationDuration={isAndroid ? undefined : 0}>
+		{children}
+	</Touchable>
+);
+
+export default RectButton;
diff --git a/app/containers/GestureButtons/index.ts b/app/containers/GestureButtons/index.ts
new file mode 100644
index 00000000000..868743c5260
--- /dev/null
+++ b/app/containers/GestureButtons/index.ts
@@ -0,0 +1,2 @@
+export { default as RectButton } from './RectButton';
+export { default as BorderlessButton } from './BorderlessButton';
diff --git a/app/containers/GestureButtons/types.ts b/app/containers/GestureButtons/types.ts
new file mode 100644
index 00000000000..a9060235ddf
--- /dev/null
+++ b/app/containers/GestureButtons/types.ts
@@ -0,0 +1,29 @@
+import { type ReactNode, type Ref } from 'react';
+import { type TouchableProps } from 'react-native-gesture-handler';
+import {
+	type AccessibilityRole,
+	type AccessibilityState,
+	type Insets,
+	type StyleProp,
+	type View,
+	type ViewStyle
+} from 'react-native';
+
+export interface IGestureButtonProps {
+	children?: ReactNode;
+	ref?: Ref<View>;
+	onPress?: TouchableProps['onPress'];
+	onLongPress?: TouchableProps['onLongPress'];
+	disabled?: boolean;
+	style?: StyleProp<ViewStyle>;
+	hitSlop?: number | Insets;
+	testID?: string;
+	accessible?: boolean;
+	accessibilityLabel?: string;
+	accessibilityHint?: string;
+	accessibilityRole?: AccessibilityRole;
+	accessibilityState?: AccessibilityState;
+	rippleColor?: string;
+	foreground?: boolean;
+	activeOpacity?: number;
+}
diff --git a/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx b/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx
index 7c7c0a3224b..54394ce983b 100644
--- a/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx
+++ b/app/containers/Header/components/HeaderButton/HeaderButtonItem.tsx
@@ -1,7 +1,7 @@
 import { memo, type ReactElement } from 'react';
 import { Platform, StyleSheet, Text, View } from 'react-native';
-import { BorderlessButton } from 'react-native-gesture-handler';
 
+import { BorderlessButton } from '~/containers/GestureButtons';
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
 import { useTheme } from '~/theme';
 import sharedStyles from '~/views/Styles';
@@ -55,9 +55,10 @@ const Item = memo(
 	}: IHeaderButtonItem): ReactElement => {
 		const { colors } = useTheme();
 		return (
-			<BorderlessButton onPress={onPress} testID={testID} hitSlop={BUTTON_HIT_SLOP} enabled={!disabled} style={styles.container}>
+			<BorderlessButton onPress={onPress} hitSlop={BUTTON_HIT_SLOP} disabled={disabled} style={styles.container}>
 				<View
 					accessible
+					testID={testID}
 					accessibilityLabel={accessibilityLabel}
 					style={{
 						opacity: disabled ? 0.5 : 1
diff --git a/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap b/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap
index a085039cf38..b9ce7d3e803 100644
--- a/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap
+++ b/app/containers/Header/components/HeaderButton/__snapshots__/HeaderButtons.test.tsx.snap
@@ -98,14 +98,29 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
           ]
         }
       >
-        <RNGestureHandlerButton
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 5,
@@ -114,20 +129,19 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               "top": 5,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
-            [
-              {
-                "opacity": 1,
-                "padding": 6,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
+            {
+              "padding": 6,
+            }
           }
         >
           <View
@@ -190,6 +204,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               testID="unread-badge-1"
             >
               <Text
+                accessibilityLabel="1"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -216,15 +233,30 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               </Text>
             </View>
           </View>
-        </RNGestureHandlerButton>
-        <RNGestureHandlerButton
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 5,
@@ -233,20 +265,19 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               "top": 5,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
-            [
-              {
-                "opacity": 1,
-                "padding": 6,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
+            {
+              "padding": 6,
+            }
           }
         >
           <View
@@ -309,6 +340,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               testID="unread-badge-1"
             >
               <Text
+                accessibilityLabel="1"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -335,15 +369,30 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               </Text>
             </View>
           </View>
-        </RNGestureHandlerButton>
-        <RNGestureHandlerButton
+        </View>
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 5,
@@ -352,20 +401,19 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               "top": 5,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
-            [
-              {
-                "opacity": 1,
-                "padding": 6,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
+            {
+              "padding": 6,
+            }
           }
         >
           <View
@@ -428,6 +476,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               testID="unread-badge-1"
             >
               <Text
+                accessibilityLabel="1"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -454,7 +505,7 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               </Text>
             </View>
           </View>
-        </RNGestureHandlerButton>
+        </View>
         <View
           style={
             [
@@ -494,14 +545,29 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -510,21 +576,19 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -586,7 +650,7 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                   }
                 />
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -758,14 +822,29 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -774,21 +853,19 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -830,7 +907,7 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -974,14 +1051,29 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -990,21 +1082,19 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -1043,7 +1133,7 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
       <View
@@ -1186,14 +1276,29 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -1202,20 +1307,19 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -1248,7 +1352,7 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 Cancel
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
       <View
@@ -1431,14 +1535,29 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -1447,20 +1566,19 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -1498,7 +1616,7 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
@@ -1640,14 +1758,29 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -1656,20 +1789,19 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -1707,7 +1839,7 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
@@ -1849,14 +1981,29 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -1865,20 +2012,19 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -1916,7 +2062,7 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
@@ -2058,14 +2204,29 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -2074,21 +2235,19 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -2127,7 +2286,7 @@ exports[`Story Snapshots: Common should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
@@ -2234,14 +2393,29 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -2250,20 +2424,19 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -2301,7 +2474,7 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
       <View
@@ -2360,14 +2533,29 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -2376,20 +2564,19 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -2427,7 +2614,7 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
@@ -2529,14 +2716,29 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
-            activeOpacity={0.3}
-            borderless={true}
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeOpacity={0.3}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -2545,20 +2747,19 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -2596,15 +2797,30 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
-          <RNGestureHandlerButton
+          </View>
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -2613,20 +2829,19 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -2664,7 +2879,7 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
       <View
@@ -2723,14 +2938,29 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -2739,20 +2969,19 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -2790,15 +3019,30 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
-          <RNGestureHandlerButton
+          </View>
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -2807,20 +3051,19 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -2858,7 +3101,7 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
@@ -3011,14 +3254,29 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   ]
                 }
               >
-                <RNGestureHandlerButton
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
                   activeOpacity={0.3}
-                  borderless={true}
+                  animationDuration={0}
                   collapsable={false}
-                  delayLongPress={600}
-                  enabled={true}
-                  handlerTag={-1}
-                  handlerType="NativeViewGestureHandler"
+                  focusable={true}
                   hitSlop={
                     {
                       "bottom": 5,
@@ -3027,21 +3285,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       "top": 5,
                     }
                   }
-                  innerRef={null}
-                  onActiveStateChange={[Function]}
-                  onGestureHandlerEvent={[Function]}
-                  onGestureHandlerStateChange={[Function]}
-                  onPress={[Function]}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
-                    [
-                      {
-                        "opacity": 1,
-                        "padding": 6,
-                      },
-                      {
-                        "cursor": undefined,
-                      },
-                    ]
+                    {
+                      "padding": 6,
+                    }
                   }
                 >
                   <View
@@ -3103,17 +3359,32 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       }
                     />
                   </View>
-                </RNGestureHandlerButton>
+                </View>
               </ExternalKeyboardView>
             </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}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -3122,20 +3393,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -3173,7 +3443,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </View>
         </View>
         <View
@@ -3232,14 +3502,29 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -3248,20 +3533,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -3294,15 +3578,30 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   Threads
                 </Text>
               </View>
-            </RNGestureHandlerButton>
-            <RNGestureHandlerButton
+            </View>
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -3311,20 +3610,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -3387,6 +3685,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   testID="unread-badge-1"
                 >
                   <Text
+                    accessibilityLabel="1"
+                    accessibilityRole="text"
+                    accessible={true}
                     numberOfLines={1}
                     style={
                       [
@@ -3413,7 +3714,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   </Text>
                 </View>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </View>
         </View>
       </View>
@@ -3562,14 +3863,29 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   ]
                 }
               >
-                <RNGestureHandlerButton
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
                   activeOpacity={0.3}
-                  borderless={true}
+                  animationDuration={0}
                   collapsable={false}
-                  delayLongPress={600}
-                  enabled={true}
-                  handlerTag={-1}
-                  handlerType="NativeViewGestureHandler"
+                  focusable={true}
                   hitSlop={
                     {
                       "bottom": 5,
@@ -3578,21 +3894,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       "top": 5,
                     }
                   }
-                  innerRef={null}
-                  onActiveStateChange={[Function]}
-                  onGestureHandlerEvent={[Function]}
-                  onGestureHandlerStateChange={[Function]}
-                  onPress={[Function]}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
-                    [
-                      {
-                        "opacity": 1,
-                        "padding": 6,
-                      },
-                      {
-                        "cursor": undefined,
-                      },
-                    ]
+                    {
+                      "padding": 6,
+                    }
                   }
                 >
                   <View
@@ -3654,17 +3968,32 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       }
                     />
                   </View>
-                </RNGestureHandlerButton>
+                </View>
               </ExternalKeyboardView>
             </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}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -3673,20 +4002,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -3724,7 +4052,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </View>
         </View>
         <View
@@ -3783,14 +4111,29 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -3799,20 +4142,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -3845,15 +4187,30 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   Threads
                 </Text>
               </View>
-            </RNGestureHandlerButton>
-            <RNGestureHandlerButton
+            </View>
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -3862,20 +4219,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -3938,6 +4294,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   testID="unread-badge-1"
                 >
                   <Text
+                    accessibilityLabel="1"
+                    accessibilityRole="text"
+                    accessible={true}
                     numberOfLines={1}
                     style={
                       [
@@ -3964,7 +4323,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   </Text>
                 </View>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </View>
         </View>
       </View>
@@ -4113,14 +4472,29 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   ]
                 }
               >
-                <RNGestureHandlerButton
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
                   activeOpacity={0.3}
-                  borderless={true}
+                  animationDuration={0}
                   collapsable={false}
-                  delayLongPress={600}
-                  enabled={true}
-                  handlerTag={-1}
-                  handlerType="NativeViewGestureHandler"
+                  focusable={true}
                   hitSlop={
                     {
                       "bottom": 5,
@@ -4129,21 +4503,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       "top": 5,
                     }
                   }
-                  innerRef={null}
-                  onActiveStateChange={[Function]}
-                  onGestureHandlerEvent={[Function]}
-                  onGestureHandlerStateChange={[Function]}
-                  onPress={[Function]}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
-                    [
-                      {
-                        "opacity": 1,
-                        "padding": 6,
-                      },
-                      {
-                        "cursor": undefined,
-                      },
-                    ]
+                    {
+                      "padding": 6,
+                    }
                   }
                 >
                   <View
@@ -4205,17 +4577,32 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       }
                     />
                   </View>
-                </RNGestureHandlerButton>
+                </View>
               </ExternalKeyboardView>
             </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}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -4224,20 +4611,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -4275,7 +4661,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </View>
         </View>
         <View
@@ -4334,14 +4720,29 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -4350,20 +4751,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -4396,15 +4796,30 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   Threads
                 </Text>
               </View>
-            </RNGestureHandlerButton>
-            <RNGestureHandlerButton
+            </View>
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
               activeOpacity={0.3}
-              borderless={true}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
+              focusable={true}
               hitSlop={
                 {
                   "bottom": 5,
@@ -4413,20 +4828,19 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "top": 5,
                 }
               }
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
-                [
-                  {
-                    "opacity": 1,
-                    "padding": 6,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+                {
+                  "padding": 6,
+                }
               }
             >
               <View
@@ -4489,6 +4903,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   testID="unread-badge-1"
                 >
                   <Text
+                    accessibilityLabel="1"
+                    accessibilityRole="text"
+                    accessible={true}
                     numberOfLines={1}
                     style={
                       [
@@ -4515,7 +4932,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   </Text>
                 </View>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </View>
         </View>
       </View>
@@ -4623,14 +5040,29 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -4639,20 +5071,19 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -4685,7 +5116,7 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 threads
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
       <View
@@ -4744,14 +5175,29 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -4760,20 +5206,19 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -4806,7 +5251,7 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 threads
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
@@ -4908,14 +5353,29 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -4924,20 +5384,19 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -4970,15 +5429,30 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 threads
               </Text>
             </View>
-          </RNGestureHandlerButton>
-          <RNGestureHandlerButton
+          </View>
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -4987,20 +5461,19 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -5033,7 +5506,7 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 search
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
       <View
@@ -5092,14 +5565,29 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -5108,20 +5596,19 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -5154,15 +5641,30 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 threads
               </Text>
             </View>
-          </RNGestureHandlerButton>
-          <RNGestureHandlerButton
+          </View>
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
             activeOpacity={0.3}
-            borderless={true}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
+            focusable={true}
             hitSlop={
               {
                 "bottom": 5,
@@ -5171,20 +5673,19 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 "top": 5,
               }
             }
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
-              [
-                {
-                  "opacity": 1,
-                  "padding": 6,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "padding": 6,
+              }
             }
           >
             <View
@@ -5217,7 +5718,7 @@ exports[`Story Snapshots: Title should match snapshot 1`] = `
                 search
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </View>
       </View>
     </View>
diff --git a/app/containers/Header/components/HeaderTitle/index.tsx b/app/containers/Header/components/HeaderTitle/index.tsx
index 400b1adba5c..48f52621ba4 100644
--- a/app/containers/Header/components/HeaderTitle/index.tsx
+++ b/app/containers/Header/components/HeaderTitle/index.tsx
@@ -1,5 +1,6 @@
 import { memo, type ReactNode } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { isAndroid } from '~/lib/methods/helpers';
 import { useTheme } from '~/theme';
@@ -18,26 +19,26 @@ const HeaderTitle = memo(({ headerTitle }: IHeaderTitle) => {
 	if (typeof headerTitle === 'string') {
 		if (isAndroid) {
 			return (
-				<Text
+				<PlainText
 					numberOfLines={1}
 					style={{
 						...styles.androidTitle,
 						color: colors.fontTitlesLabels
 					}}>
 					{headerTitle}
-				</Text>
+				</PlainText>
 			);
 		}
 		return (
 			<View style={styles.headerTitleContainer}>
-				<Text
+				<PlainText
 					numberOfLines={1}
 					style={{
 						...styles.title,
 						color: colors.fontTitlesLabels
 					}}>
 					{headerTitle}
-				</Text>
+				</PlainText>
 			</View>
 		);
 	}
diff --git a/app/containers/ImageViewer/ImageViewer.tsx b/app/containers/ImageViewer/ImageViewer.tsx
index 5fcb5585e93..f34e3ae7af5 100644
--- a/app/containers/ImageViewer/ImageViewer.tsx
+++ b/app/containers/ImageViewer/ImageViewer.tsx
@@ -1,6 +1,12 @@
 import { useRef, useState, type ReactElement } from 'react';
 import { type LayoutChangeEvent, StyleSheet, type StyleProp, type ViewStyle, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import {
+	GestureDetector,
+	usePanGesture,
+	usePinchGesture,
+	useSimultaneousGestures,
+	useTapGesture
+} from 'react-native-gesture-handler';
 import Animated, { withTiming, useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { Image, type ImageStyle } from 'expo-image';
 
@@ -91,36 +97,38 @@ export const ImageViewer = ({ uri = '', width, height, altText, isAnimated, ...p
 		return Math.max(Math.min(value, max), min);
 	};
 
-	const pinchGesture = Gesture.Pinch()
-		.onUpdate(event => {
+	const pinchGesture = usePinchGesture({
+		onUpdate: event => {
 			scale.value = clamp(scaleOffset.value * (event.scale > 0 ? event.scale : 1), 1, 4);
-		})
-		.onEnd(() => {
+		},
+		onDeactivate: () => {
 			scaleOffset.value = scale.value > 0 ? scale.value : 1;
-		});
+		}
+	});
 
-	const panGesture = Gesture.Pan()
-		.maxPointers(2)
-		.onStart(() => {
+	const panGesture = usePanGesture({
+		maxPointers: 2,
+		onActivate: () => {
 			translationX.value = offsetX.value;
 			translationY.value = offsetY.value;
-		})
-		.onUpdate(event => {
+		},
+		onUpdate: event => {
 			const scaleFactor = scale.value - 1;
 			translationX.value = clamp(event.translationX + offsetX.value, -scaleFactor * centerX, scaleFactor * centerX);
 			translationY.value = clamp(event.translationY + offsetY.value, -scaleFactor * centerY, scaleFactor * centerY);
-		})
-		.onEnd(() => {
+		},
+		onDeactivate: () => {
 			offsetX.value = translationX.value;
 			offsetY.value = translationY.value;
 			if (scale.value === 1) resetScaleAnimation();
-		});
+		}
+	});
 
-	const doubleTapGesture = Gesture.Tap()
-		.numberOfTaps(2)
-		.maxDelay(120)
-		.maxDistance(70)
-		.onEnd(event => {
+	const doubleTapGesture = useTapGesture({
+		numberOfTaps: 2,
+		maxDelay: 120,
+		maxDistance: 70,
+		onDeactivate: event => {
 			if (scaleOffset.value > 1) resetScaleAnimation();
 			else {
 				scale.value = withTiming(2, { duration: 200 });
@@ -128,9 +136,10 @@ export const ImageViewer = ({ uri = '', width, height, altText, isAnimated, ...p
 				offsetX.value = centerX - event.x;
 				scaleOffset.value = 2;
 			}
-		});
+		}
+	});
 
-	const gesture = Gesture.Simultaneous(pinchGesture, panGesture, doubleTapGesture);
+	const gesture = useSimultaneousGestures(pinchGesture, panGesture, doubleTapGesture);
 
 	const { colors } = useTheme();
 
diff --git a/app/containers/InAppNotification/IncomingCallNotification/index.tsx b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
index 055de91a446..13cac6441a5 100644
--- a/app/containers/InAppNotification/IncomingCallNotification/index.tsx
+++ b/app/containers/InAppNotification/IncomingCallNotification/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, memo, type ReactElement } from 'react';
-import { AccessibilityInfo, findNodeHandle, Text, View } from 'react-native';
+import { AccessibilityInfo, findNodeHandle, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useDispatch } from 'react-redux';
 import { A11y } from 'react-native-a11y-order';
@@ -106,7 +107,7 @@ const IncomingCallHeader = memo(
 									}}
 									style={styles.cancelButton}
 									rectButtonStyle={styles.buttonContainer}>
-									<Text style={styles.buttonText}>{i18n.t('decline')}</Text>
+									<PlainText style={styles.buttonText}>{i18n.t('decline')}</PlainText>
 								</Touch>
 							</A11y.Index>
 							<A11y.Index index={5} style={styles.buttonWrapper}>
@@ -119,7 +120,7 @@ const IncomingCallHeader = memo(
 									}}
 									style={styles.acceptButton}
 									rectButtonStyle={styles.buttonContainer}>
-									<Text style={styles.buttonText}>{i18n.t('accept')}</Text>
+									<PlainText style={styles.buttonText}>{i18n.t('accept')}</PlainText>
 								</Touch>
 							</A11y.Index>
 						</View>
diff --git a/app/containers/InAppNotification/NotifierComponent.tsx b/app/containers/InAppNotification/NotifierComponent.tsx
index 0c806eabe6c..a7409dede9e 100644
--- a/app/containers/InAppNotification/NotifierComponent.tsx
+++ b/app/containers/InAppNotification/NotifierComponent.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Avatar from '../Avatar';
@@ -115,12 +116,12 @@ const NotifierComponent = memo(({ notification, isMasterDetail }: INotifierCompo
 				testID={`in-app-notification-${text}`}>
 				<Avatar text={avatar} size={AVATAR_SIZE} type={type} rid={rid} style={styles.avatar} />
 				<View style={styles.inner}>
-					<Text style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+					<PlainText style={[styles.roomName, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 						{title}
-					</Text>
-					<Text style={[styles.message, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+					</PlainText>
+					<PlainText style={[styles.message, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 						{text}
-					</Text>
+					</PlainText>
 				</View>
 			</Touch>
 			<Touch onPress={hideNotification} hitSlop={BUTTON_HIT_SLOP}>
diff --git a/app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap b/app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap
index c8346155834..fc6125335d2 100644
--- a/app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap
+++ b/app/containers/InAppNotification/__snapshots__/NotifierComponent.test.tsx.snap
@@ -46,13 +46,29 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -61,56 +77,43 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "alignItems": "center",
-            "backgroundColor": undefined,
-            "borderRadius": undefined,
-            "flexDirection": "row",
-            "margin": undefined,
-            "marginBottom": undefined,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            },
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={
           {
@@ -118,6 +121,7 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
             "flexDirection": "row",
           }
         }
+        testID="in-app-notification-Hey! How are you doing?"
       >
         <View
           accessibilityLabel="rocket.cat's avatar"
@@ -154,6 +158,7 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -171,6 +176,8 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
                 "width": 48,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={48}
           />
@@ -184,6 +191,9 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="general"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -207,6 +217,9 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
             general
           </Text>
           <Text
+            accessibilityLabel="Hey! How are you doing?"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -231,7 +244,7 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
   <ExternalKeyboardView
     canBeFocused={true}
@@ -255,13 +268,29 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -270,53 +299,40 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[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,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={{}}
       >
@@ -347,7 +363,7 @@ exports[`Story Snapshots: ChannelMessage should match snapshot 1`] = `
           
         </Text>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
 </View>
 `;
@@ -398,13 +414,29 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -413,56 +445,43 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "alignItems": "center",
-            "backgroundColor": undefined,
-            "borderRadius": undefined,
-            "flexDirection": "row",
-            "margin": undefined,
-            "marginBottom": undefined,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            },
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={
           {
@@ -470,6 +489,7 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
             "flexDirection": "row",
           }
         }
+        testID="in-app-notification-Hey! How are you doing?"
       >
         <View
           accessibilityLabel="diego.mello's avatar"
@@ -506,6 +526,7 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -523,6 +544,8 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
                 "width": 48,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={48}
           />
@@ -536,6 +559,9 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="diego.mello"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -559,6 +585,9 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
             diego.mello
           </Text>
           <Text
+            accessibilityLabel="Hey! How are you doing?"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -583,7 +612,7 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
   <ExternalKeyboardView
     canBeFocused={true}
@@ -607,13 +636,29 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -622,53 +667,40 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[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,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={{}}
       >
@@ -699,7 +731,7 @@ exports[`Story Snapshots: DirectMessage should match snapshot 1`] = `
           
         </Text>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
 </View>
 `;
@@ -750,13 +782,29 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -765,56 +813,43 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#16181a"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "alignItems": "center",
-            "backgroundColor": undefined,
-            "borderRadius": undefined,
-            "flexDirection": "row",
-            "margin": undefined,
-            "marginBottom": undefined,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            },
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={
           {
@@ -822,6 +857,7 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
             "flexDirection": "row",
           }
         }
+        testID="in-app-notification-Hey! How are you doing?"
       >
         <View
           accessibilityLabel="rocket.cat's avatar"
@@ -858,6 +894,7 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -875,6 +912,8 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
                 "width": 48,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={48}
           />
@@ -888,6 +927,9 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="general"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -911,6 +953,9 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
             general
           </Text>
           <Text
+            accessibilityLabel="Hey! How are you doing?"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -935,7 +980,7 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
   <ExternalKeyboardView
     canBeFocused={true}
@@ -959,13 +1004,29 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -974,53 +1035,40 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#16181a"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[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,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={{}}
       >
@@ -1051,7 +1099,7 @@ exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
           
         </Text>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
 </View>
 `;
@@ -1102,13 +1150,29 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -1117,56 +1181,43 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#2D3039"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "alignItems": "center",
-            "backgroundColor": undefined,
-            "borderRadius": undefined,
-            "flexDirection": "row",
-            "margin": undefined,
-            "marginBottom": undefined,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            },
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={
           {
@@ -1174,6 +1225,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
             "flexDirection": "row",
           }
         }
+        testID="in-app-notification-Hey! How are you doing?"
       >
         <View
           accessibilityLabel="rocket.cat's avatar"
@@ -1210,6 +1262,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -1227,6 +1280,8 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
                 "width": 48,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={48}
           />
@@ -1240,6 +1295,9 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="general"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1263,6 +1321,9 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
             general
           </Text>
           <Text
+            accessibilityLabel="Hey! How are you doing?"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1287,7 +1348,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1311,13 +1372,29 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 12,
@@ -1326,53 +1403,40 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
           "top": 12,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#2D3039"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[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,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={{}}
       >
@@ -1403,7 +1467,7 @@ exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
           
         </Text>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
 </View>
 `;
diff --git a/app/containers/List/ListCheckbox.tsx b/app/containers/List/ListCheckbox.tsx
new file mode 100644
index 00000000000..fed58469189
--- /dev/null
+++ b/app/containers/List/ListCheckbox.tsx
@@ -0,0 +1,19 @@
+import { type ReactElement } from 'react';
+
+import { useTheme } from '~/theme';
+import ListIcon from './ListIcon';
+
+export interface IListCheckbox {
+	value: boolean;
+	onValueChange: (value: boolean) => void;
+	testID?: string;
+}
+
+const ListCheckbox = ({ value }: IListCheckbox): ReactElement => {
+	const { colors } = useTheme();
+	return <ListIcon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.strokeHighlight : ''} />;
+};
+
+ListCheckbox.displayName = 'List.Checkbox';
+
+export default ListCheckbox;
diff --git a/app/containers/List/ListContainer.ios.tsx b/app/containers/List/ListContainer.ios.tsx
new file mode 100644
index 00000000000..fc53f9978a6
--- /dev/null
+++ b/app/containers/List/ListContainer.ios.tsx
@@ -0,0 +1,112 @@
+import { useState, type ReactElement } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Host } from '@expo/ui';
+import { Group, List, RNHostView } from '@expo/ui/swift-ui';
+import {
+	alignmentGuide,
+	frame,
+	listRowInsets,
+	listStyle,
+	onGeometryChange,
+	scrollContentBackground,
+	tag
+} from '@expo/ui/swift-ui/modifiers';
+
+import { useTheme } from '~/theme';
+import ListSection from './ListSection';
+import ListItem from './ListItem';
+import ListRadio from './ListRadio';
+import { isNativeListRow, isNativeListSection } from './native/rowMarkers';
+import { flattenListChildren, isListSeparator } from './listChildren';
+import { NativeListContext } from './native/context';
+import { ICON_SIZE, PADDING_HORIZONTAL } from './constants';
+
+const styles = StyleSheet.create({
+	host: {
+		flex: 1
+	}
+});
+
+const insetGroupedModifiers = [listStyle('insetGrouped')];
+const sidebarModifiers = [listStyle('sidebar')];
+const hiddenBackgroundModifiers = [scrollContentBackground('hidden')];
+
+export interface IListSelection {
+	selectedTag: string | null;
+}
+
+interface IListContainer {
+	children: (ReactElement | null)[] | ReactElement | null;
+	testID?: string;
+	selection?: IListSelection;
+	backgroundHidden?: boolean;
+}
+
+const isSection = (element: ReactElement) => element.type === ListSection || isNativeListSection(element.type);
+const isNativeRow = (element: ReactElement) =>
+	element.type === ListItem || element.type === ListRadio || isNativeListRow(element.type);
+const hasLeftIcon = (element: ReactElement) => Boolean((element.props as { left?: unknown }).left);
+const rowSelectionTag = (element: ReactElement) => {
+	const { selectionTag, testID } = element.props as { selectionTag?: string; testID?: string };
+	return selectionTag ?? testID;
+};
+
+const selectedTags = ({ selectedTag }: IListSelection) => (selectedTag ? [selectedTag] : []);
+
+const ListContainer = ({ children, testID, selection, backgroundHidden }: IListContainer) => {
+	const { theme } = useTheme();
+	const [rowWidth, setRowWidth] = useState(0);
+
+	const selectionTag = (row: ReactElement) => {
+		const rowTag = rowSelectionTag(row);
+		return rowTag && selection ? [tag(rowTag)] : [];
+	};
+
+	const rowModifiers = (row: ReactElement) => [
+		frame({ maxWidth: Number.MAX_SAFE_INTEGER }),
+		alignmentGuide('listRowSeparatorLeading', hasLeftIcon(row) ? PADDING_HORIZONTAL * 2 + ICON_SIZE : PADDING_HORIZONTAL),
+		onGeometryChange(({ width }) => setRowWidth(current => (current === width ? current : width))),
+		listRowInsets({ top: 0, leading: 0, bottom: 0, trailing: 0 }),
+		...selectionTag(row)
+	];
+
+	const renderHostedRow = (row: ReactElement) => (
+		<Group key={row.key} modifiers={rowModifiers(row)}>
+			<RNHostView matchContents>
+				<NativeListContext.Provider value={{ mode: 'hosted', renderRow }}>
+					<View style={{ width: rowWidth }}>{row}</View>
+				</NativeListContext.Provider>
+			</RNHostView>
+		</Group>
+	);
+
+	const renderNativeRow = (row: ReactElement) => (
+		<Group key={row.key} modifiers={selectionTag(row)}>
+			{row}
+		</Group>
+	);
+
+	const renderRow = (row: ReactElement) => (isNativeRow(row) ? renderNativeRow(row) : renderHostedRow(row));
+
+	return (
+		<NativeListContext.Provider value={{ mode: 'native', renderRow }}>
+			<Host style={styles.host} colorScheme={theme === 'light' ? 'light' : 'dark'}>
+				<List
+					modifiers={[
+						...(selection ? sidebarModifiers : insetGroupedModifiers),
+						...(backgroundHidden ? hiddenBackgroundModifiers : [])
+					]}
+					selection={selection ? selectedTags(selection) : undefined}
+					testID={testID}>
+					{flattenListChildren(children)
+						.filter(element => !isListSeparator(element))
+						.map(element => (isSection(element) ? element : renderRow(element)))}
+				</List>
+			</Host>
+		</NativeListContext.Provider>
+	);
+};
+
+ListContainer.displayName = 'List.Container';
+
+export default ListContainer;
diff --git a/app/containers/List/ListContainer.tsx b/app/containers/List/ListContainer.tsx
index df3c14bdc1c..60fcf2995e2 100644
--- a/app/containers/List/ListContainer.tsx
+++ b/app/containers/List/ListContainer.tsx
@@ -13,8 +13,9 @@ const styles = StyleSheet.create({
 interface IListContainer extends ScrollViewProps {
 	children: (ReactElement | null)[] | ReactElement | null;
 	testID?: string;
+	backgroundHidden?: boolean;
 }
-const ListContainer = ({ children, ...props }: IListContainer) => {
+const ListContainer = ({ children, backgroundHidden: _backgroundHidden, ...props }: IListContainer) => {
 	const { bottom } = useSafeAreaInsets();
 
 	return (
diff --git a/app/containers/List/ListHeader.tsx b/app/containers/List/ListHeader.tsx
index f8ee321aed0..7e19f426d24 100644
--- a/app/containers/List/ListHeader.tsx
+++ b/app/containers/List/ListHeader.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import sharedStyles from '~/views/Styles';
 import { themes } from '~/lib/constants/colors';
@@ -29,9 +30,12 @@ const ListHeader = memo(({ title, translateTitle = true, numberOfLines }: IListH
 
 	return (
 		<View style={styles.container}>
-			<Text accessibilityRole='header' style={[styles.title, { color: themes[theme].fontHint }]} numberOfLines={numberOfLines}>
+			<PlainText
+				accessibilityRole='header'
+				style={[styles.title, { color: themes[theme].fontHint }]}
+				numberOfLines={numberOfLines}>
 				{translateTitle ? I18n.t(title) : title}
-			</Text>
+			</PlainText>
 		</View>
 	);
 });
diff --git a/app/containers/List/ListInfo.tsx b/app/containers/List/ListInfo.tsx
index c91ee9e4814..f715689a67c 100644
--- a/app/containers/List/ListInfo.tsx
+++ b/app/containers/List/ListInfo.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import sharedStyles from '~/views/Styles';
 import { themes } from '~/lib/constants/colors';
@@ -28,7 +29,7 @@ const ListInfo = memo(({ info, translateInfo = true }: IListInfo) => {
 	const { theme } = useTheme();
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</Text>
+			<PlainText style={[styles.text, { color: themes[theme].fontHint }]}>{translateInfo ? I18n.t(info) : info}</PlainText>
 		</View>
 	);
 });
diff --git a/app/containers/List/ListItem.tsx b/app/containers/List/ListItem.tsx
index fb028afabd6..32798c7a443 100644
--- a/app/containers/List/ListItem.tsx
+++ b/app/containers/List/ListItem.tsx
@@ -4,12 +4,12 @@ import {
 	PixelRatio,
 	type StyleProp,
 	StyleSheet,
-	Text,
 	type TextStyle,
 	View,
 	type AccessibilityRole,
 	type ViewStyle
 } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import Touch from '../Touch';
 import sharedStyles from '~/views/Styles';
@@ -17,6 +17,8 @@ import { useTheme } from '~/theme';
 import I18n from '~/i18n';
 import Icon from './ListIcon';
 import { BASE_HEIGHT, ICON_SIZE, PADDING_HORIZONTAL } from './constants';
+import { useNativeListMode } from './native/context';
+import NativeListItem from './native/Item';
 import { CustomIcon } from '../CustomIcon';
 import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import EventEmitter from '~/lib/methods/helpers/events';
@@ -75,9 +77,9 @@ const ListTitle = ({ title, color, styleTitle, translateTitle, numberOfLines }:
 	switch (typeof title) {
 		case 'string':
 			return (
-				<Text numberOfLines={numberOfLines} style={[styles.title, styleTitle, { color: color || colors.fontDefault }]}>
+				<PlainText numberOfLines={numberOfLines} style={[styles.title, styleTitle, { color: color || colors.fontDefault }]}>
 					{translateTitle && title ? I18n.t(title) : title}
-				</Text>
+				</PlainText>
 			);
 		case 'function':
 			return title();
@@ -196,9 +198,9 @@ const Content = memo(
 							) : null}
 						</View>
 						{subtitle ? (
-							<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
+							<PlainText style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 								{translateSubtitle ? I18n.t(subtitle) : subtitle}
-							</Text>
+							</PlainText>
 						) : null}
 					</View>
 				) : null}
@@ -242,7 +244,7 @@ const Button = memo(({ onPress, backgroundColor, underlayColor, style, ...props
 			onPress={handlePress}
 			style={[{ backgroundColor: backgroundColor || colors.surfaceRoom }, style]}
 			underlayColor={underlayColor}
-			enabled={!props.disabled || !!props.disabledReason}>
+			disabled={props.disabled && !props.disabledReason}>
 			<Content {...props} />
 		</Touch>
 	);
@@ -256,13 +258,19 @@ export interface IListItem extends Omit<IListItemContent, 'theme'>, Omit<IListIt
 
 const ListItem = memo(({ ...props }: IListItem) => {
 	const { colors } = useTheme();
+	const nativeListMode = useNativeListMode();
+	const backgroundColor = props.backgroundColor || (nativeListMode ? 'transparent' : colors.surfaceRoom);
+
+	if (nativeListMode === 'native') {
+		return <NativeListItem item={props} />;
+	}
 
 	if (props.onPress) {
 		const { onPress } = props;
-		return <Button {...props} onPress={onPress} />;
+		return <Button {...props} onPress={onPress} backgroundColor={backgroundColor} />;
 	}
 	return (
-		<View style={{ backgroundColor: props.backgroundColor || colors.surfaceRoom }}>
+		<View style={{ backgroundColor }}>
 			<Content {...props} />
 		</View>
 	);
diff --git a/app/containers/List/ListRadio.tsx b/app/containers/List/ListRadio.tsx
index fe014a45600..91eefff1124 100644
--- a/app/containers/List/ListRadio.tsx
+++ b/app/containers/List/ListRadio.tsx
@@ -4,6 +4,8 @@ import i18n from '~/i18n';
 import ListItem, { type IListItem } from './ListItem';
 import ListIcon from './ListIcon';
 import { useTheme } from '~/theme';
+import Radio from '../Radio';
+import { useNativeListMode } from './native/context';
 
 interface IListRadio extends IListItem {
 	value: any;
@@ -13,6 +15,7 @@ interface IListRadio extends IListItem {
 
 const ListRadio = ({ value: _, isSelected, ...rest }: IListRadio) => {
 	const { colors } = useTheme();
+	const isNativeRow = useNativeListMode() === 'native';
 
 	const iconName = isSelected ? 'radio-checked' : 'radio-unchecked';
 	const iconColor = isSelected ? colors.badgeBackgroundLevel2 : colors.strokeMedium;
@@ -20,7 +23,7 @@ const ListRadio = ({ value: _, isSelected, ...rest }: IListRadio) => {
 	return (
 		<ListItem
 			{...rest}
-			right={() => <ListIcon name={iconName} color={iconColor} />}
+			right={() => (isNativeRow ? <Radio check={isSelected} /> : <ListIcon name={iconName} color={iconColor} />)}
 			additionalAccessibilityLabel={isSelected ? i18n.t('Selected') : i18n.t('Unselected')}
 			accessibilityRole='radio'
 		/>
diff --git a/app/containers/List/ListSection.tsx b/app/containers/List/ListSection.tsx
index a326722bec3..4520e4252e5 100644
--- a/app/containers/List/ListSection.tsx
+++ b/app/containers/List/ListSection.tsx
@@ -1,7 +1,9 @@
-import { type ReactElement } from 'react';
+import { type ReactNode } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import Header from './ListHeader';
+import NativeListSection from './native/Section';
+import { useNativeListMode } from './native/context';
 
 const styles = StyleSheet.create({
 	container: {
@@ -10,15 +12,25 @@ const styles = StyleSheet.create({
 });
 
 interface IListSection {
-	children: (ReactElement | null)[] | ReactElement | null;
+	children: ReactNode;
 	title?: string;
 	translateTitle?: boolean;
 }
 
 const ListSection = ({ children, title, translateTitle }: IListSection) => {
+	const nativeListMode = useNativeListMode();
+
+	if (nativeListMode === 'native') {
+		return (
+			<NativeListSection title={title} translateTitle={translateTitle}>
+				{children}
+			</NativeListSection>
+		);
+	}
+
 	return (
 		<View style={styles.container}>
-			{title ? <Header {...{ title, translateTitle }} /> : null}
+			{title ? <Header title={title} translateTitle={translateTitle} /> : null}
 			{children}
 		</View>
 	);
diff --git a/app/containers/List/ListSeparator.tsx b/app/containers/List/ListSeparator.tsx
index 442e99fdfd9..8ca44fb24ee 100644
--- a/app/containers/List/ListSeparator.tsx
+++ b/app/containers/List/ListSeparator.tsx
@@ -3,6 +3,7 @@ import { StyleSheet, View, type ViewStyle } from 'react-native';
 
 import { themes } from '~/lib/constants/colors';
 import { useTheme } from '~/theme';
+import { useNativeListMode } from './native/context';
 
 const styles = StyleSheet.create({
 	separator: {
@@ -16,6 +17,11 @@ interface IListSeparator {
 
 const ListSeparator = memo(({ style }: IListSeparator) => {
 	const { theme } = useTheme();
+	const isInNativeList = useNativeListMode();
+
+	if (isInNativeList) {
+		return null;
+	}
 
 	return <View style={[styles.separator, style, { backgroundColor: themes[theme].strokeLight }]} />;
 });
diff --git a/app/containers/List/__snapshots__/List.test.tsx.snap b/app/containers/List/__snapshots__/List.test.tsx.snap
index 09d7aab5b6d..693d4eac4c9 100644
--- a/app/containers/List/__snapshots__/List.test.tsx.snap
+++ b/app/containers/List/__snapshots__/List.test.tsx.snap
@@ -1,525 +1,640 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Story Snapshots: Alert should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
     {
-      "right": 1,
+      "flex": 1,
     }
   }
 >
-  <View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
         {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
+          "$type": "listStyle",
+          "style": "insetGrouped",
+        },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <View
-        accessibilityLabel="Chats"
-        accessibilityRole="button"
-        accessible={true}
-        style={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
+              "$type": "accessibilityLabel",
+              "label": "Chats",
             },
-            undefined,
             {
-              "height": 46,
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
             },
           ]
         }
+        onGlobalEvent={[Function]}
+        spacing={12}
       >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
           >
-            <Text
-              style={
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
                   },
-                  undefined,
                   {
-                    "color": "#2F343D",
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
                   },
                 ]
               }
-            >
-              Chats
-            </Text>
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              onGlobalEvent={[Function]}
+              text="Chats"
+            />
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "color": "#EC0D2A",
-                    "fontSize": 24,
+                    "$type": "font",
+                    "family": "custom",
+                    "size": 24,
+                    "textStyle": "body",
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    {
-                      "paddingLeft": 4,
-                    },
-                  ],
                   {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#EC0D2A",
+                      "type": "color",
+                    },
                   },
-                  {},
                 ]
               }
-            >
-              
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
+              onGlobalEvent={[Function]}
+              text=""
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <View
-        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"
-        accessibilityRole="button"
-        accessible={true}
-        style={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
+              "$type": "accessibilityLabel",
+              "label": "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",
             },
-            undefined,
             {
-              "height": 46,
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
             },
           ]
         }
+        onGlobalEvent={[Function]}
+        spacing={12}
       >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
           >
-            <Text
-              style={
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
                   },
-                  undefined,
                   {
-                    "color": "#2F343D",
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
                   },
                 ]
               }
-            >
-              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
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              onGlobalEvent={[Function]}
+              text="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"
+            />
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "color": "#EC0D2A",
-                    "fontSize": 24,
+                    "$type": "font",
+                    "family": "custom",
+                    "size": 24,
+                    "textStyle": "body",
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    {
-                      "paddingLeft": 4,
-                    },
-                  ],
                   {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#EC0D2A",
+                      "type": "color",
+                    },
                   },
-                  {},
                 ]
               }
-            >
-              
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
+              onGlobalEvent={[Function]}
+              text=""
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <View
-        accessibilityLabel="Chats"
-        accessibilityRole="button"
-        accessible={true}
-        style={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
+              "$type": "accessibilityLabel",
+              "label": "Chats",
             },
-            undefined,
             {
-              "height": 46,
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
             },
           ]
         }
+        onGlobalEvent={[Function]}
+        spacing={12}
       >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
           >
-            <Text
-              style={
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
                   },
-                  undefined,
                   {
-                    "color": "#2F343D",
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
                   },
                 ]
               }
-            >
-              Chats
-            </Text>
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              onGlobalEvent={[Function]}
+              text="Chats"
+            />
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "color": "#EC0D2A",
-                    "fontSize": 24,
+                    "$type": "font",
+                    "family": "custom",
+                    "size": 24,
+                    "textStyle": "body",
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    {
-                      "paddingLeft": 4,
-                    },
-                  ],
                   {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#EC0D2A",
+                      "type": "color",
+                    },
                   },
-                  {},
                 ]
               }
-            >
-              
-            </Text>
-          </View>
-        </View>
-        <View
-          style={
+              onGlobalEvent={[Function]}
+              text=""
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "paddingLeft": 12,
+                "$type": "font",
+                "family": "custom",
+                "size": 24,
+                "textStyle": "body",
+              },
+              {
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#2F343D",
+                  "type": "color",
+                },
               },
-              {},
             ]
           }
+          onGlobalEvent={[Function]}
+          text=""
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "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",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                undefined,
-              ]
-            }
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "color": "#2F343D",
-                    "fontSize": 24,
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
                   },
-                  [
-                    {
-                      "lineHeight": 24,
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
                     },
-                    undefined,
-                  ],
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="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"
+            />
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
                   {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "$type": "font",
+                    "family": "custom",
+                    "size": 24,
+                    "textStyle": "body",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#EC0D2A",
+                      "type": "color",
+                    },
                   },
-                  {},
                 ]
               }
-            >
-              
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
+              onGlobalEvent={[Function]}
+              text=""
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "font",
+                "family": "custom",
+                "size": 24,
+                "textStyle": "body",
+              },
+              {
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#2F343D",
+                  "type": "color",
+                },
+              },
+            ]
+          }
+          onGlobalEvent={[Function]}
+          text=""
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: Header should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
+        {
+          "$type": "listStyle",
+          "style": "insetGrouped",
+        },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
         [
           {
-            "height": 0.5,
+            "$type": "frame",
+            "maxWidth": 9007199254740991,
+          },
+          {
+            "$type": "alignmentGuide",
+            "guide": "listRowSeparatorLeading",
+            "value": 12,
           },
-          undefined,
           {
-            "backgroundColor": "#CBCED1",
+            "$type": "onGeometryChange",
+            "eventListener": [Function],
+          },
+          {
+            "$type": "listRowInsets",
+            "bottom": 0,
+            "leading": 0,
+            "top": 0,
+            "trailing": 0,
           },
         ]
       }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
+      onGlobalEvent={[Function]}
     >
-      <View
-        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"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
+      <ViewManagerAdapter_ExpoUI
+        expoInternalSizeFromChildren={true}
+        layoutRoot={false}
+        matchContents={true}
       >
         <View
           style={
             {
-              "flex": 1,
-              "justifyContent": "center",
+              "width": 0,
             }
           }
         >
           <View
             style={
               {
-                "alignItems": "center",
-                "flexDirection": "row",
+                "paddingHorizontal": 12,
+                "paddingVertical": 8,
               }
             }
           >
             <Text
+              accessibilityLabel="Chats"
+              accessibilityRole="header"
+              accessible={true}
               style={
                 [
                   {
                     "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
                     "fontFamily": "Inter",
                     "fontSize": 16,
                     "fontVariant": [
                       "tabular-nums",
                     ],
-                    "fontWeight": "500",
+                    "fontWeight": "400",
                     "textAlign": "left",
                   },
-                  undefined,
                   {
-                    "color": "#2F343D",
+                    "color": "#6C727A",
                   },
                 ]
               }
             >
-              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
+              Chats
             </Text>
+          </View>
+        </View>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
+        [
+          {
+            "$type": "frame",
+            "maxWidth": 9007199254740991,
+          },
+          {
+            "$type": "alignmentGuide",
+            "guide": "listRowSeparatorLeading",
+            "value": 12,
+          },
+          {
+            "$type": "onGeometryChange",
+            "eventListener": [Function],
+          },
+          {
+            "$type": "listRowInsets",
+            "bottom": 0,
+            "leading": 0,
+            "top": 0,
+            "trailing": 0,
+          },
+        ]
+      }
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        expoInternalSizeFromChildren={true}
+        layoutRoot={false}
+        matchContents={true}
+      >
+        <View
+          style={
+            {
+              "width": 0,
+            }
+          }
+        >
+          <View
+            style={
+              {
+                "paddingHorizontal": 12,
+                "paddingVertical": 8,
+              }
+            }
+          >
             <Text
-              allowFontScaling={false}
-              selectable={false}
+              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"
+              accessibilityRole="header"
+              accessible={true}
               style={
                 [
                   {
-                    "color": "#EC0D2A",
-                    "fontSize": 24,
+                    "backgroundColor": "transparent",
+                    "fontFamily": "Inter",
+                    "fontSize": 16,
+                    "fontVariant": [
+                      "tabular-nums",
+                    ],
+                    "fontWeight": "400",
+                    "textAlign": "left",
                   },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    {
-                      "paddingLeft": 4,
-                    },
-                  ],
                   {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                    "color": "#6C727A",
                   },
-                  {},
                 ]
               }
             >
-              
+              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>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: Icon should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
+        {
+          "$type": "listStyle",
+          "style": "insetGrouped",
+        },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
+        [
+          {
+            "$type": "frame",
+            "maxWidth": 9007199254740991,
+          },
+          {
+            "$type": "alignmentGuide",
+            "guide": "listRowSeparatorLeading",
+            "value": 12,
+          },
+          {
+            "$type": "onGeometryChange",
+            "eventListener": [Function],
+          },
+          {
+            "$type": "listRowInsets",
+            "bottom": 0,
+            "leading": 0,
+            "top": 0,
+            "trailing": 0,
+          },
+        ]
+      }
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        expoInternalSizeFromChildren={true}
+        layoutRoot={false}
+        matchContents={true}
+      >
         <View
           style={
-            [
-              {
-                "paddingLeft": 12,
-              },
-              {},
-            ]
+            {
+              "width": 0,
+            }
           }
         >
           <View
@@ -561,252 +676,92 @@ exports[`Story Snapshots: Alert should match snapshot 1`] = `
             </Text>
           </View>
         </View>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-  </View>
-</RCTScrollView>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
 `;
 
-exports[`Story Snapshots: Header should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
+exports[`Story Snapshots: ListItemWithRightContainerStyle should match snapshot 1`] = `
+<ExternalKeyboardView
+  canBeFocused={true}
+  enableA11yFocus={false}
+  enableContextMenu={false}
+  group={false}
+  haloEffect={true}
+  hasKeyDownPress={false}
+  hasKeyUpPress={true}
+  hasOnFocusChanged={true}
+  lockFocus={0}
+  onContextMenuPress={[Function]}
+  onFocusChange={[Function]}
+  onKeyUpPress={[Function]}
+  orderIndex={-1}
+  screenAutoA11yFocusDelay={300}
+  style={
     [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
+      undefined,
+      undefined,
     ]
   }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
 >
-  <View>
-    <View
-      style={
-        {
-          "paddingHorizontal": 12,
-          "paddingVertical": 8,
-        }
-      }
-    >
-      <Text
-        accessibilityRole="header"
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            },
-            {
-              "color": "#6C727A",
-            },
-          ]
-        }
-      >
-        Chats
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "paddingHorizontal": 12,
-          "paddingVertical": 8,
-        }
-      }
-    >
-      <Text
-        accessibilityRole="header"
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            },
-            {
-              "color": "#6C727A",
-            },
-          ]
-        }
-      >
-        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>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Icon should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
+  <View
+    accessibilityState={
       {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
-    {
-      "right": 1,
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
     }
-  }
->
-  <View>
-    <View
-      style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "center",
-          },
-          undefined,
-        ]
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
       }
-    >
-      <Text
-        allowFontScaling={false}
-        selectable={false}
-        style={
-          [
-            {
-              "color": "#2F343D",
-              "fontSize": 24,
-            },
-            [
-              {
-                "lineHeight": 24,
-              },
-              undefined,
-            ],
-            {
-              "fontFamily": "custom",
-              "fontStyle": "normal",
-              "fontWeight": "normal",
-            },
-            {},
-          ]
-        }
-      >
-        
-      </Text>
-    </View>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: ListItemWithRightContainerStyle should match snapshot 1`] = `
-<ExternalKeyboardView
-  canBeFocused={true}
-  enableA11yFocus={false}
-  enableContextMenu={false}
-  group={false}
-  haloEffect={true}
-  hasKeyDownPress={false}
-  hasKeyUpPress={true}
-  hasOnFocusChanged={true}
-  lockFocus={0}
-  onContextMenuPress={[Function]}
-  onFocusChange={[Function]}
-  onKeyUpPress={[Function]}
-  orderIndex={-1}
-  screenAutoA11yFocusDelay={300}
-  style={
-    [
-      undefined,
-      undefined,
-    ]
-  }
->
-  <RNGestureHandlerButton
-    activeOpacity={1}
+    }
+    accessible={true}
+    activeUnderlayOpacity={1}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
-    rippleColor="#E4E7EA"
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     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,
-        },
+        [
+          undefined,
+          {
+            "margin": undefined,
+            "marginBottom": undefined,
+            "marginEnd": undefined,
+            "marginHorizontal": undefined,
+            "marginLeft": undefined,
+            "marginRight": undefined,
+            "marginStart": undefined,
+            "marginTop": undefined,
+            "marginVertical": undefined,
+          },
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderRadius": undefined,
+          },
+        ],
+        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={{}}
     >
@@ -892,6 +847,9 @@ exports[`Story Snapshots: ListItemWithRightContainerStyle should match snapshot
             }
           >
             <Text
+              accessibilityLabel="Chats"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -917,6 +875,9 @@ exports[`Story Snapshots: ListItemWithRightContainerStyle should match snapshot
             </Text>
           </View>
           <Text
+            accessibilityLabel="All"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -993,6861 +954,2899 @@ exports[`Story Snapshots: ListItemWithRightContainerStyle should match snapshot
         </View>
       </View>
     </View>
-  </RNGestureHandlerButton>
+  </View>
 </ExternalKeyboardView>
 `;
 
 exports[`Story Snapshots: Pressable should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
     {
-      "right": 1,
+      "flex": 1,
     }
   }
 >
-  <View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={false}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
+        {
+          "$type": "listStyle",
+          "style": "insetGrouped",
+        },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <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={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
+              "$type": "buttonStyle",
+              "style": "plain",
+            },
+            {
+              "$type": "accessibilityLabel",
+              "label": "Press me",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
             },
             {
-              "cursor": undefined,
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
             },
           ]
         }
-        underlayColor="#E4E7EA"
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "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_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "contentShape",
+                "kind": undefined,
+                "shape": "rectangle",
+              },
+            ]
           }
-        />
-        <View
-          style={{}}
+          onGlobalEvent={[Function]}
+          spacing={12}
         >
-          <View
-            accessibilityLabel="Press me"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
+          <ViewManagerAdapter_ExpoUI
+            alignment="leading"
+            spacing={2}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              spacing={4}
             >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
+              <ViewManagerAdapter_ExpoUI
+                modifiers={
+                  [
+                    {
+                      "$type": "lineLimit",
+                      "limit": undefined,
+                      "reservesSpace": undefined,
+                    },
+                    {
+                      "$type": "font",
+                      "textStyle": "body",
+                      "weight": "medium",
+                    },
+                    {
+                      "$type": "foregroundStyle",
+                      "style": {
                         "color": "#2F343D",
+                        "type": "color",
                       },
-                    ]
-                  }
-                >
-                  Press me
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={false}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
+                    },
+                  ]
+                }
+                onGlobalEvent={[Function]}
+                text="Press me"
+              />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <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={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
+              "$type": "buttonStyle",
+              "style": "plain",
+            },
+            {
+              "$type": "accessibilityLabel",
+              "label": "I'm disabled",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
             },
             {
-              "cursor": undefined,
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+            {
+              "$type": "opacity",
+              "value": 0.3,
             },
           ]
         }
-        underlayColor="#E4E7EA"
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "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_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "contentShape",
+                "kind": undefined,
+                "shape": "rectangle",
+              },
+            ]
           }
-        />
-        <View
-          style={{}}
+          onGlobalEvent={[Function]}
+          spacing={12}
         >
-          <View
-            accessibilityLabel="I'm disabled"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                {
-                  "opacity": 0.3,
-                },
-                {
-                  "height": 46,
-                },
-              ]
-            }
+          <ViewManagerAdapter_ExpoUI
+            alignment="leading"
+            spacing={2}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              spacing={4}
             >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
+              <ViewManagerAdapter_ExpoUI
+                modifiers={
+                  [
+                    {
+                      "$type": "lineLimit",
+                      "limit": undefined,
+                      "reservesSpace": undefined,
+                    },
+                    {
+                      "$type": "font",
+                      "textStyle": "body",
+                      "weight": "medium",
+                    },
+                    {
+                      "$type": "foregroundStyle",
+                      "style": {
                         "color": "#2F343D",
+                        "type": "color",
                       },
-                    ]
-                  }
-                >
-                  I'm disabled
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-  </View>
-</RCTScrollView>
+                    },
+                  ]
+                }
+                onGlobalEvent={[Function]}
+                text="I'm disabled"
+              />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
 `;
 
 exports[`Story Snapshots: Radio should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
     {
-      "right": 1,
+      "flex": 1,
     }
   }
 >
-  <View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={false}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
+        {
+          "$type": "listStyle",
+          "style": "insetGrouped",
+        },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <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={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
+              "$type": "buttonStyle",
+              "style": "plain",
+            },
+            {
+              "$type": "accessibilityLabel",
+              "label": "Option 1 Selected",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
             },
             {
-              "cursor": undefined,
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
             },
           ]
         }
-        underlayColor="#E4E7EA"
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "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_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "contentShape",
+                "kind": undefined,
+                "shape": "rectangle",
+              },
+            ]
           }
-        />
-        <View
-          style={{}}
+          onGlobalEvent={[Function]}
+          spacing={12}
         >
-          <View
-            accessibilityLabel="Option 1 Selected"
-            accessibilityRole="radio"
-            accessible={true}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            alignment="leading"
+            spacing={2}
+          >
+            <ViewManagerAdapter_ExpoUI
+              spacing={4}
+            >
+              <ViewManagerAdapter_ExpoUI
+                modifiers={
+                  [
+                    {
+                      "$type": "lineLimit",
+                      "limit": undefined,
+                      "reservesSpace": undefined,
+                    },
+                    {
+                      "$type": "font",
+                      "textStyle": "body",
+                      "weight": "medium",
+                    },
+                    {
+                      "$type": "foregroundStyle",
+                      "style": {
+                        "color": "#2F343D",
+                        "type": "color",
+                      },
+                    },
+                  ]
+                }
+                onGlobalEvent={[Function]}
+                text="Option 1"
+              />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI />
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "font",
+                  "textStyle": "body",
+                  "weight": "semibold",
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1D74F5",
+                    "type": "color",
+                  },
                 },
               ]
             }
+            onGlobalEvent={[Function]}
+            systemName="checkmark"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "buttonStyle",
+              "style": "plain",
+            },
+            {
+              "$type": "accessibilityLabel",
+              "label": "Option 2 Unselected",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+      >
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "contentShape",
+                "kind": undefined,
+                "shape": "rectangle",
+              },
+            ]
+          }
+          onGlobalEvent={[Function]}
+          spacing={12}
+        >
+          <ViewManagerAdapter_ExpoUI
+            alignment="leading"
+            spacing={2}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Option 1
-                </Text>
-              </View>
-            </View>
-            <View
-              style={
-                [
-                  {
-                    "paddingLeft": 12,
-                  },
-                  {},
-                ]
-              }
+            <ViewManagerAdapter_ExpoUI
+              spacing={4}
             >
-              <View
-                style={
+              <ViewManagerAdapter_ExpoUI
+                modifiers={
                   [
                     {
-                      "alignItems": "center",
-                      "justifyContent": "center",
+                      "$type": "lineLimit",
+                      "limit": undefined,
+                      "reservesSpace": undefined,
+                    },
+                    {
+                      "$type": "font",
+                      "textStyle": "body",
+                      "weight": "medium",
+                    },
+                    {
+                      "$type": "foregroundStyle",
+                      "style": {
+                        "color": "#2F343D",
+                        "type": "color",
+                      },
                     },
-                    undefined,
                   ]
                 }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#1D74F5",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={false}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
+                onGlobalEvent={[Function]}
+                text="Option 2"
+              />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <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={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
+              "$type": "buttonStyle",
+              "style": "plain",
             },
             {
-              "cursor": undefined,
+              "$type": "accessibilityLabel",
+              "label": "Option 3 Unselected",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
             },
           ]
         }
-        underlayColor="#E4E7EA"
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "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_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "contentShape",
+                "kind": undefined,
+                "shape": "rectangle",
+              },
+            ]
           }
-        />
-        <View
-          style={{}}
+          onGlobalEvent={[Function]}
+          spacing={12}
         >
-          <View
-            accessibilityLabel="Option 2 Unselected"
-            accessibilityRole="radio"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
+          <ViewManagerAdapter_ExpoUI
+            alignment="leading"
+            spacing={2}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Option 2
-                </Text>
-              </View>
-            </View>
-            <View
-              style={
-                [
-                  {
-                    "paddingLeft": 12,
-                  },
-                  {},
-                ]
-              }
+            <ViewManagerAdapter_ExpoUI
+              spacing={4}
             >
-              <View
-                style={
+              <ViewManagerAdapter_ExpoUI
+                modifiers={
                   [
                     {
-                      "alignItems": "center",
-                      "justifyContent": "center",
+                      "$type": "lineLimit",
+                      "limit": undefined,
+                      "reservesSpace": undefined,
+                    },
+                    {
+                      "$type": "font",
+                      "textStyle": "body",
+                      "weight": "medium",
+                    },
+                    {
+                      "$type": "foregroundStyle",
+                      "style": {
+                        "color": "#2F343D",
+                        "type": "color",
+                      },
                     },
-                    undefined,
                   ]
                 }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={false}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
+                onGlobalEvent={[Function]}
+                text="Option 3"
+              />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
     >
-      <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={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
+              "$type": "buttonStyle",
+              "style": "plain",
+            },
+            {
+              "$type": "accessibilityLabel",
+              "label": "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 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 Selected",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
             },
             {
-              "cursor": undefined,
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
             },
           ]
         }
-        underlayColor="#E4E7EA"
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "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_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "contentShape",
+                "kind": undefined,
+                "shape": "rectangle",
+              },
+            ]
           }
-        />
-        <View
-          style={{}}
+          onGlobalEvent={[Function]}
+          spacing={12}
         >
-          <View
-            accessibilityLabel="Option 3 Unselected"
-            accessibilityRole="radio"
-            accessible={true}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            alignment="leading"
+            spacing={2}
+          >
+            <ViewManagerAdapter_ExpoUI
+              spacing={4}
+            >
+              <ViewManagerAdapter_ExpoUI
+                modifiers={
+                  [
+                    {
+                      "$type": "lineLimit",
+                      "limit": undefined,
+                      "reservesSpace": undefined,
+                    },
+                    {
+                      "$type": "font",
+                      "textStyle": "body",
+                      "weight": "medium",
+                    },
+                    {
+                      "$type": "foregroundStyle",
+                      "style": {
+                        "color": "#2F343D",
+                        "type": "color",
+                      },
+                    },
+                  ]
+                }
+                onGlobalEvent={[Function]}
+                text="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"
+              />
+            </ViewManagerAdapter_ExpoUI>
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "lineLimit",
+                    "limit": 1,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "subheadline",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#6C727A",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="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"
+            />
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI />
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "font",
+                  "textStyle": "body",
+                  "weight": "semibold",
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1D74F5",
+                    "type": "color",
+                  },
                 },
               ]
             }
+            onGlobalEvent={[Function]}
+            systemName="checkmark"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: SectionAndInfo should match snapshot 1`] = `
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "off",
+      "left": "additive",
+      "right": "additive",
+      "top": "off",
+    }
+  }
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {
+        "backgroundColor": "#F2F3F5",
+      },
+      undefined,
+    ]
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
+        [
+          {
+            "$type": "listStyle",
+            "style": "insetGrouped",
+          },
+        ]
+      }
+      onGlobalEvent={[Function]}
+      onSelectionChange={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
+                  },
+                ]
               }
+              onGlobalEvent={[Function]}
+              spacing={12}
             >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
               >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
                 >
-                  Option 3
-                </Text>
-              </View>
-            </View>
-            <View
-              style={
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
+                      [
+                        {
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
+                        },
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "paddingLeft": 12,
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
                   },
-                  {},
                 ]
               }
+              onGlobalEvent={[Function]}
+              spacing={12}
             >
-              <View
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "justifyContent": "center",
-                    },
-                    undefined,
-                  ]
-                }
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
+                >
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
                       [
                         {
-                          "lineHeight": 24,
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={false}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
-    >
-      <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={
-          [
-            {
-              "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={{}}
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
         >
-          <View
-            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 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 Selected"
-            accessibilityRole="radio"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
+                  },
+                ]
               }
+              onGlobalEvent={[Function]}
+              spacing={12}
             >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
               >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
                 >
-                  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>
-              <Text
-                numberOfLines={1}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 14,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#6C727A",
-                    },
-                  ]
-                }
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
+                      [
+                        {
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
+                        },
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              spacing={12}
+            >
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
               >
-                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
-              style={
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
+                >
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
+                      [
+                        {
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
+                        },
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
+      >
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
+        >
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
                 [
                   {
-                    "paddingLeft": 12,
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
                   },
-                  {},
                 ]
               }
+              onGlobalEvent={[Function]}
+              spacing={12}
             >
-              <View
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "justifyContent": "center",
-                    },
-                    undefined,
-                  ]
-                }
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
               >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#1D74F5",
-                        "fontSize": 24,
-                      },
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
+                >
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
                       [
                         {
-                          "lineHeight": 24,
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
                         },
-                        undefined,
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              spacing={12}
+            >
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
+              >
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
                 >
-                  
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: SectionAndInfo should match snapshot 1`] = `
-<RNCSafeAreaView
-  edges={
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
+                      [
+                        {
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
+                        },
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        title="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"
+      >
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
+        >
+          <ViewManagerAdapter_ExpoUI
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              spacing={12}
+            >
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
+              >
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
+                >
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
+                      [
+                        {
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
+                        },
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={[]}
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "accessibilityLabel",
+                    "label": "Section Item",
+                  },
+                  {
+                    "$type": "frame",
+                    "minHeight": 46,
+                  },
+                  {
+                    "$type": "listRowInsets",
+                    "leading": 12,
+                    "trailing": 12,
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              spacing={12}
+            >
+              <ViewManagerAdapter_ExpoUI
+                alignment="leading"
+                spacing={2}
+              >
+                <ViewManagerAdapter_ExpoUI
+                  spacing={4}
+                >
+                  <ViewManagerAdapter_ExpoUI
+                    modifiers={
+                      [
+                        {
+                          "$type": "lineLimit",
+                          "limit": undefined,
+                          "reservesSpace": undefined,
+                        },
+                        {
+                          "$type": "font",
+                          "textStyle": "body",
+                          "weight": "medium",
+                        },
+                        {
+                          "$type": "foregroundStyle",
+                          "style": {
+                            "color": "#2F343D",
+                            "type": "color",
+                          },
+                        },
+                      ]
+                    }
+                    onGlobalEvent={[Function]}
+                    text="Section Item"
+                  />
+                </ViewManagerAdapter_ExpoUI>
+              </ViewManagerAdapter_ExpoUI>
+              <ViewManagerAdapter_ExpoUI />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</RNCSafeAreaView>
+`;
+
+exports[`Story Snapshots: Separator should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
     {
-      "bottom": "off",
-      "left": "additive",
-      "right": "additive",
-      "top": "off",
+      "flex": 1,
     }
   }
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      {
-        "backgroundColor": "#F2F3F5",
-      },
-      undefined,
-    ]
-  }
 >
-  <RCTScrollView
-    contentContainerStyle={
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
       [
         {
-          "paddingVertical": 16,
+          "$type": "listStyle",
+          "style": "insetGrouped",
         },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  />
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: TitleAndSubtitle should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
         {
-          "paddingBottom": 0,
+          "$type": "listStyle",
+          "style": "insetGrouped",
         },
       ]
     }
-    keyboardDismissMode="interactive"
-    keyboardShouldPersistTaps="handled"
-    scrollIndicatorInsets={
-      {
-        "right": 1,
-      }
-    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
   >
-    <View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "Chats",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
         }
+        onGlobalEvent={[Function]}
+        spacing={12}
       >
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="Chats"
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
             {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
+              "$type": "accessibilityLabel",
+              "label": "Chats All",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="Chats"
+            />
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "font",
+                  "textStyle": "subheadline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
+                  },
                 },
               ]
             }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
+            onGlobalEvent={[Function]}
+            text="All"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "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 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",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
         }
+        onGlobalEvent={[Function]}
+        spacing={12}
+        testID="test-id"
       >
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="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"
+            />
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "font",
+                  "textStyle": "subheadline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
+                  },
                 },
               ]
             }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "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 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",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
+        >
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            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
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="Section Item"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  Section Item
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            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>
-  </RCTScrollView>
-</RNCSafeAreaView>
-`;
-
-exports[`Story Snapshots: Separator should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
->
-  <View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: TitleAndSubtitle should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
->
-  <View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Chats"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Chats
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Chats All"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Chats
-            </Text>
-          </View>
-          <Text
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            All
-          </Text>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
-      <View
-        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 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"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
-        testID="test-id"
-      >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "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>
-          <Text
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            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={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
-      <View
-        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 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"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "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>
-          <Text
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            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={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: WithBiggerFont should match snapshot 1`] = `
-<RNCSafeAreaView
-  edges={
-    {
-      "bottom": "off",
-      "left": "additive",
-      "right": "additive",
-      "top": "off",
-    }
-  }
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      {
-        "backgroundColor": "#F2F3F5",
-      },
-      undefined,
-    ]
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      [
-        {
-          "paddingVertical": 16,
-        },
-        {
-          "paddingBottom": 0,
-        },
-      ]
-    }
-    keyboardDismissMode="interactive"
-    keyboardShouldPersistTaps="handled"
-    scrollIndicatorInsets={
-      {
-        "right": 1,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <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={
-              [
-                {
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#2F343D",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <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={
-              [
-                {
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#2F343D",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <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={
-              [
-                {
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#2F343D",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <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={
-              [
-                {
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#2F343D",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-    </View>
-  </RCTScrollView>
-</RNCSafeAreaView>
-`;
-
-exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
-<RNCSafeAreaView
-  edges={
-    {
-      "bottom": "off",
-      "left": "additive",
-      "right": "additive",
-      "top": "off",
-    }
-  }
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      {
-        "backgroundColor": "#080808",
-      },
-      undefined,
-    ]
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      [
-        {
-          "paddingVertical": 16,
-        },
-        {
-          "paddingBottom": 0,
-        },
-      ]
-    }
-    keyboardDismissMode="interactive"
-    keyboardShouldPersistTaps="handled"
-    scrollIndicatorInsets={
-      {
-        "right": 1,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9EA2A8",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#1f2329",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#16181a"
-            style={
-              [
-                {
-                  "backgroundColor": "#000000",
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#E4E7EA",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#1f2329",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#16181a"
-            style={
-              [
-                {
-                  "backgroundColor": "#000000",
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#E4E7EA",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#1f2329",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9EA2A8",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9EA2A8",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#1f2329",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#16181a"
-            style={
-              [
-                {
-                  "backgroundColor": "#000000",
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#E4E7EA",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#1f2329",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#16181a"
-            style={
-              [
-                {
-                  "backgroundColor": "#000000",
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#E4E7EA",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#E4E7EA",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#1f2329",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9EA2A8",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-    </View>
-  </RCTScrollView>
-</RNCSafeAreaView>
-`;
-
-exports[`Story Snapshots: WithCustomColors should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
->
-  <View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Chats"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "color": "red",
-                  },
-                ]
-              }
-            >
-              Chats
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={false}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
-    >
-      <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={
-          [
-            {
-              "backgroundColor": "red",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
-        underlayColor="green"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "green",
-              "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="Press me!"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "white",
-                      },
-                    ]
-                  }
-                >
-                  Press me!
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
-<RNCSafeAreaView
-  edges={
-    {
-      "bottom": "off",
-      "left": "additive",
-      "right": "additive",
-      "top": "off",
-    }
-  }
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      {
-        "backgroundColor": "#1A1E23",
-      },
-      undefined,
-    ]
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      [
-        {
-          "paddingVertical": 16,
-        },
-        {
-          "paddingBottom": 0,
-        },
-      ]
-    }
-    keyboardDismissMode="interactive"
-    keyboardShouldPersistTaps="handled"
-    scrollIndicatorInsets={
-      {
-        "right": 1,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9EA2A8",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#333842",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#2D3039"
-            style={
-              [
-                {
-                  "backgroundColor": "#1F2329",
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
+                    "$type": "lineLimit",
+                    "limit": 1,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
                     },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#C1C7D0",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#333842",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#2D3039"
-            style={
-              [
-                {
-                  "backgroundColor": "#1F2329",
-                  "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={{}}
-            >
-              <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#C1C7D0",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#333842",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
+              onGlobalEvent={[Function]}
+              text="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"
+            />
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+                {
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
                 {
-                  "color": "#9EA2A8",
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
+                  },
                 },
               ]
             }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: WithBiggerFont should match snapshot 1`] = `
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "off",
+      "left": "additive",
+      "right": "additive",
+      "top": "off",
+    }
+  }
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {
+        "backgroundColor": "#F2F3F5",
+      },
+      undefined,
+    ]
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
+        [
           {
-            "marginBottom": 16,
-          }
-        }
+            "$type": "listStyle",
+            "style": "insetGrouped",
+          },
+        ]
+      }
+      onGlobalEvent={[Function]}
+      onSelectionChange={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
       >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
         >
-          <Text
-            accessibilityRole="header"
-            style={
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
                 {
-                  "color": "#9EA2A8",
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
                 },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#333842",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#2D3039"
-            style={
-              [
                 {
-                  "backgroundColor": "#1F2329",
-                  "borderRadius": undefined,
-                  "margin": undefined,
-                  "marginBottom": undefined,
-                  "marginEnd": undefined,
-                  "marginHorizontal": undefined,
-                  "marginLeft": undefined,
-                  "marginRight": undefined,
-                  "marginStart": undefined,
-                  "marginTop": undefined,
-                  "marginVertical": undefined,
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
-            underlayColor="#2D3039"
+            onGlobalEvent={[Function]}
           >
-            <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={{}}
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
-                    },
-                  ]
+                  {
+                    "width": 0,
+                  }
                 }
               >
-                <View
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
-                    {
-                      "paddingRight": 12,
-                    }
+                    [
+                      undefined,
+                      undefined,
+                    ]
                   }
                 >
                   <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    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",
-                          "justifyContent": "center",
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
                         undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
                             },
                             undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
-                <View
+                </ExternalKeyboardView>
+              </View>
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
+                },
+                {
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
+            >
+              <View
+                style={
+                  {
+                    "width": 0,
+                  }
+                }
+              >
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
+                    [
+                      undefined,
+                      undefined,
+                    ]
                   }
                 >
                   <View
-                    style={
+                    accessibilityState={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
                       }
                     }
-                  >
-                    <Text
-                      style={
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
                         [
+                          undefined,
                           {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
-                          undefined,
                           {
-                            "color": "#C1C7D0",
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
                           },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
+                        ],
                         undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
                             },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#333842",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
+      >
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
         >
-          <RNGestureHandlerButton
-            activeOpacity={1}
-            collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#2D3039"
-            style={
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "backgroundColor": "#1F2329",
-                  "borderRadius": undefined,
-                  "margin": undefined,
-                  "marginBottom": undefined,
-                  "marginEnd": undefined,
-                  "marginHorizontal": undefined,
-                  "marginLeft": undefined,
-                  "marginRight": undefined,
-                  "marginStart": undefined,
-                  "marginTop": undefined,
-                  "marginVertical": undefined,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
+                },
+                {
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
-            underlayColor="#2D3039"
+            onGlobalEvent={[Function]}
           >
-            <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={{}}
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
+                  {
+                    "width": 0,
+                  }
                 }
               >
-                <View
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
-                    {
-                      "paddingRight": 12,
-                    }
+                    [
+                      undefined,
+                      undefined,
+                    ]
                   }
                 >
                   <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    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",
-                          "justifyContent": "center",
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
                         undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
                             },
                             undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
-                <View
+                </ExternalKeyboardView>
+              </View>
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
+                },
+                {
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
+            >
+              <View
+                style={
+                  {
+                    "width": 0,
+                  }
+                }
+              >
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
+                    [
+                      undefined,
+                      undefined,
+                    ]
                   }
                 >
                   <View
-                    style={
+                    accessibilityState={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
                       }
                     }
-                  >
-                    <Text
-                      style={
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
                         [
+                          undefined,
                           {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
-                          undefined,
                           {
-                            "color": "#C1C7D0",
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
                           },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#9EA2A8",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
+                        ],
                         undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#C1C7D0",
-                            "fontSize": 24,
-                          },
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
                             },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#333842",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9EA2A8",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-    </View>
-  </RCTScrollView>
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
 </RNCSafeAreaView>
 `;
 
-exports[`Story Snapshots: WithFlatList should match snapshot 1`] = `
+exports[`Story Snapshots: WithBlackTheme should match snapshot 1`] = `
 <RNCSafeAreaView
   edges={
     {
@@ -7863,895 +3862,2922 @@ exports[`Story Snapshots: WithFlatList should match snapshot 1`] = `
         "flex": 1,
       },
       {
-        "backgroundColor": "#F2F3F5",
+        "backgroundColor": "#080808",
       },
       undefined,
     ]
   }
 >
-  <RCTScrollView
-    ItemSeparatorComponent={
-      {
-        "$$typeof": Symbol(react.memo),
-        "compare": null,
-        "type": [Function],
-      }
-    }
-    ListFooterComponent={
-      {
-        "$$typeof": Symbol(react.memo),
-        "compare": null,
-        "type": [Function],
-      }
-    }
-    ListHeaderComponent={
-      {
-        "$$typeof": Symbol(react.memo),
-        "compare": null,
-        "type": [Function],
-      }
-    }
-    contentContainerStyle={
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="dark"
+    layoutDirection="leftToRight"
+    style={
       {
-        "paddingVertical": 16,
+        "flex": 1,
       }
     }
-    data={
-      [
-        0,
-        1,
-        2,
-        3,
-        4,
-        5,
-        6,
-        7,
-        8,
-        9,
-        10,
-        11,
-        12,
-        13,
-        14,
-        15,
-        16,
-        17,
-        18,
-        19,
-        20,
-        21,
-        22,
-        23,
-        24,
-        25,
-        26,
-        27,
-        28,
-        29,
-      ]
-    }
-    getItem={[Function]}
-    getItemCount={[Function]}
-    keyExtractor={[Function]}
-    onContentSizeChange={[Function]}
-    onLayout={[Function]}
-    onMomentumScrollBegin={[Function]}
-    onMomentumScrollEnd={[Function]}
-    onScroll={[Function]}
-    onScrollBeginDrag={[Function]}
-    onScrollEndDrag={[Function]}
-    removeClippedSubviews={false}
-    renderItem={[Function]}
-    scrollEventThrottle={0.0001}
-    stickyHeaderIndices={[]}
-    viewabilityConfigCallbackPairs={[]}
   >
-    <View>
-      <View
-        collapsable={false}
-        onLayout={[Function]}
-      >
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
+        [
+          {
+            "$type": "listStyle",
+            "style": "insetGrouped",
+          },
+        ]
+      }
+      onGlobalEvent={[Function]}
+      onSelectionChange={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
       >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
         >
-          <View
-            accessibilityLabel="0"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  0
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#16181a"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            undefined,
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
-      >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="1"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  1
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#16181a"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
       >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
         >
-          <View
-            accessibilityLabel="2"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
+                },
+                {
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  2
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#16181a"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            undefined,
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
-      >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="3"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  3
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#16181a"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#E4E7EA",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#E4E7EA",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</RNCSafeAreaView>
+`;
+
+exports[`Story Snapshots: WithCustomColors should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
+        {
+          "$type": "listStyle",
+          "style": "insetGrouped",
+        },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "Chats",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
+        >
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "red",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="Chats"
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "buttonStyle",
+              "style": "plain",
+            },
+            {
+              "$type": "accessibilityLabel",
+              "label": "Press me!",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+      >
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
+                "$type": "contentShape",
+                "kind": undefined,
+                "shape": "rectangle",
               },
             ]
           }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
+          onGlobalEvent={[Function]}
+          spacing={12}
+        >
+          <ViewManagerAdapter_ExpoUI
+            alignment="leading"
+            spacing={2}
+          >
+            <ViewManagerAdapter_ExpoUI
+              spacing={4}
+            >
+              <ViewManagerAdapter_ExpoUI
+                modifiers={
+                  [
+                    {
+                      "$type": "lineLimit",
+                      "limit": undefined,
+                      "reservesSpace": undefined,
+                    },
+                    {
+                      "$type": "font",
+                      "textStyle": "body",
+                      "weight": "medium",
+                    },
+                    {
+                      "$type": "foregroundStyle",
+                      "style": {
+                        "color": "white",
+                        "type": "color",
+                      },
+                    },
+                  ]
+                }
+                onGlobalEvent={[Function]}
+                text="Press me!"
+              />
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: WithDarkTheme should match snapshot 1`] = `
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "off",
+      "left": "additive",
+      "right": "additive",
+      "top": "off",
+    }
+  }
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {
+        "backgroundColor": "#1A1E23",
+      },
+      undefined,
+    ]
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="dark"
+    layoutDirection="leftToRight"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
+        [
+          {
+            "$type": "listStyle",
+            "style": "insetGrouped",
+          },
+        ]
+      }
+      onGlobalEvent={[Function]}
+      onSelectionChange={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
       >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
         >
-          <View
-            accessibilityLabel="4"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  4
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#2D3039"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            undefined,
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#C1C7D0",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
-      >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="5"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  5
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#2D3039"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#C1C7D0",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
       >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="6"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
+        >
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  6
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#2D3039"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            undefined,
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#C1C7D0",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        onFocusCapture={[Function]}
-        onLayout={[Function]}
-        style={null}
-      >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="7"
-            accessibilityRole="button"
-            accessible={true}
-            style={
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
-                undefined,
                 {
-                  "height": 46,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
                 },
               ]
             }
+            onGlobalEvent={[Function]}
           >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
                 style={
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
+                    "width": 0,
                   }
                 }
               >
-                <Text
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
                       undefined,
-                      {
-                        "color": "#2F343D",
-                      },
+                      undefined,
                     ]
                   }
                 >
-                  7
-                </Text>
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
+                        undefined,
+                      ]
+                    }
+                    underlayColor="#2D3039"
+                  >
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#C1C7D0",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#9EA2A8",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#C1C7D0",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</RNCSafeAreaView>
+`;
+
+exports[`Story Snapshots: WithFlatList should match snapshot 1`] = `
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "off",
+      "left": "additive",
+      "right": "additive",
+      "top": "off",
+    }
+  }
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {
+        "backgroundColor": "#F2F3F5",
+      },
+      undefined,
+    ]
+  }
+>
+  <RCTScrollView
+    ItemSeparatorComponent={
+      {
+        "$$typeof": Symbol(react.memo),
+        "compare": null,
+        "type": [Function],
+      }
+    }
+    ListFooterComponent={
+      {
+        "$$typeof": Symbol(react.memo),
+        "compare": null,
+        "type": [Function],
+      }
+    }
+    ListHeaderComponent={
+      {
+        "$$typeof": Symbol(react.memo),
+        "compare": null,
+        "type": [Function],
+      }
+    }
+    contentContainerStyle={
+      {
+        "paddingVertical": 16,
+      }
+    }
+    data={
+      [
+        0,
+        1,
+        2,
+        3,
+        4,
+        5,
+        6,
+        7,
+        8,
+        9,
+        10,
+        11,
+        12,
+        13,
+        14,
+        15,
+        16,
+        17,
+        18,
+        19,
+        20,
+        21,
+        22,
+        23,
+        24,
+        25,
+        26,
+        27,
+        28,
+        29,
+      ]
+    }
+    getItem={[Function]}
+    getItemCount={[Function]}
+    keyExtractor={[Function]}
+    onContentSizeChange={[Function]}
+    onLayout={[Function]}
+    onMomentumScrollBegin={[Function]}
+    onMomentumScrollEnd={[Function]}
+    onScroll={[Function]}
+    onScrollBeginDrag={[Function]}
+    onScrollEndDrag={[Function]}
+    removeClippedSubviews={false}
+    renderItem={[Function]}
+    scrollEventThrottle={0.0001}
+    stickyHeaderIndices={[]}
+    viewabilityConfigCallbackPairs={[]}
+  >
+    <View>
       <View
-        onFocusCapture={[Function]}
+        collapsable={false}
         onLayout={[Function]}
-        style={null}
       >
-        <View
-          style={
-            {
-              "backgroundColor": "#FFFFFF",
-            }
-          }
-        >
-          <View
-            accessibilityLabel="8"
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "justifyContent": "center",
-                  "paddingHorizontal": 12,
-                },
-                undefined,
-                {
-                  "height": 46,
-                },
-              ]
-            }
-          >
-            <View
-              style={
-                {
-                  "flex": 1,
-                  "justifyContent": "center",
-                }
-              }
-            >
-              <View
-                style={
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
-                >
-                  8
-                </Text>
-              </View>
-            </View>
-          </View>
-        </View>
         <View
           style={
             [
@@ -8779,7 +6805,7 @@ exports[`Story Snapshots: WithFlatList should match snapshot 1`] = `
           }
         >
           <View
-            accessibilityLabel="9"
+            accessibilityLabel="0"
             accessibilityRole="button"
             accessible={true}
             style={
@@ -8814,6 +6840,9 @@ exports[`Story Snapshots: WithFlatList should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="0"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -8835,765 +6864,655 @@ exports[`Story Snapshots: WithFlatList should match snapshot 1`] = `
                     ]
                   }
                 >
-                  9
+                  0
                 </Text>
-              </View>
-            </View>
-          </View>
-        </View>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-      <View
-        style={
-          {
-            "height": 0,
-          }
-        }
-      />
-      <View
-        onLayout={[Function]}
-      >
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-      </View>
-    </View>
-  </RCTScrollView>
-</RNCSafeAreaView>
-`;
-
-exports[`Story Snapshots: WithIcon should match snapshot 1`] = `
-<RCTScrollView
-  contentContainerStyle={
-    [
-      {
-        "paddingVertical": 16,
-      },
-      {
-        "paddingBottom": 0,
-      },
-    ]
-  }
-  keyboardDismissMode="interactive"
-  keyboardShouldPersistTaps="handled"
-  scrollIndicatorInsets={
-    {
-      "right": 1,
-    }
-  }
->
-  <View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
-      <View
-        accessibilityLabel="Icon Left"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
-      >
-        <View
-          style={
-            {
-              "paddingRight": 12,
-            }
-          }
-        >
-          <View
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                undefined,
-              ]
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "#2F343D",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
+              </View>
+            </View>
           </View>
         </View>
         <View
           style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <View
-            style={
+            [
               {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Icon Left
-            </Text>
-          </View>
-        </View>
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
       </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
       <View
-        accessibilityLabel="Icon Right"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
         <View
           style={
             {
-              "flex": 1,
-              "justifyContent": "center",
+              "backgroundColor": "#FFFFFF",
             }
           }
         >
           <View
+            accessibilityLabel="1"
+            accessibilityRole="button"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                },
+                undefined,
+                {
+                  "height": 46,
+                },
+              ]
             }
           >
-            <Text
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
+                {
+                  "flex": 1,
+                  "justifyContent": "center",
+                }
               }
             >
-              Icon Right
-            </Text>
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="1"
+                  accessibilityRole="text"
+                  accessible={true}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  1
+                </Text>
+              </View>
+            </View>
           </View>
         </View>
         <View
           style={
             [
               {
-                "paddingLeft": 12,
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
               },
-              {},
             ]
           }
+        />
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            {
+              "backgroundColor": "#FFFFFF",
+            }
+          }
         >
           <View
+            accessibilityLabel="2"
+            accessibilityRole="button"
+            accessible={true}
             style={
               [
                 {
                   "alignItems": "center",
+                  "flexDirection": "row",
                   "justifyContent": "center",
+                  "paddingHorizontal": 12,
                 },
                 undefined,
+                {
+                  "height": 46,
+                },
               ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#2F343D",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "flex": 1,
+                  "justifyContent": "center",
+                }
               }
             >
-              
-            </Text>
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="2"
+                  accessibilityRole="text"
+                  accessible={true}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  2
+                </Text>
+              </View>
+            </View>
           </View>
         </View>
+        <View
+          style={
+            [
+              {
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
       </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
       <View
-        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 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"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
         <View
           style={
             {
-              "paddingRight": 12,
+              "backgroundColor": "#FFFFFF",
             }
           }
         >
           <View
+            accessibilityLabel="3"
+            accessibilityRole="button"
+            accessible={true}
             style={
               [
                 {
                   "alignItems": "center",
+                  "flexDirection": "row",
                   "justifyContent": "center",
+                  "paddingHorizontal": 12,
                 },
                 undefined,
+                {
+                  "height": 46,
+                },
               ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#2F343D",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "flex": 1,
+                  "justifyContent": "center",
+                }
               }
             >
-              
-            </Text>
-          </View>
-        </View>
-        <View
-          style={
-            {
-              "flex": 1,
-              "justifyContent": "center",
-            }
-          }
-        >
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
+              <View
+                style={
                   {
-                    "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>
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="3"
+                  accessibilityRole="text"
+                  accessible={true}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  3
+                </Text>
+              </View>
+            </View>
           </View>
-          <Text
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            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
           style={
             [
               {
-                "paddingLeft": 12,
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
               },
-              {},
             ]
           }
+        />
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            {
+              "backgroundColor": "#FFFFFF",
+            }
+          }
         >
           <View
+            accessibilityLabel="4"
+            accessibilityRole="button"
+            accessible={true}
             style={
               [
                 {
                   "alignItems": "center",
+                  "flexDirection": "row",
                   "justifyContent": "center",
+                  "paddingHorizontal": 12,
                 },
                 undefined,
+                {
+                  "height": 46,
+                },
               ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#2F343D",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "flex": 1,
+                  "justifyContent": "center",
+                }
               }
             >
-              
-            </Text>
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="4"
+                  accessibilityRole="text"
+                  accessible={true}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  4
+                </Text>
+              </View>
+            </View>
           </View>
         </View>
+        <View
+          style={
+            [
+              {
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
       </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-    <View
-      style={
-        {
-          "backgroundColor": "#FFFFFF",
-        }
-      }
-    >
       <View
-        accessibilityLabel="Show Action Indicator"
-        accessibilityRole="button"
-        accessible={true}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingHorizontal": 12,
-            },
-            undefined,
-            {
-              "height": 46,
-            },
-          ]
-        }
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
         <View
           style={
             {
-              "flex": 1,
-              "justifyContent": "center",
+              "backgroundColor": "#FFFFFF",
             }
           }
         >
           <View
+            accessibilityLabel="5"
+            accessibilityRole="button"
+            accessible={true}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
+              [
+                {
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                },
+                undefined,
+                {
+                  "height": 46,
+                },
+              ]
             }
           >
-            <Text
+            <View
               style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flex": 1,
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "500",
-                    "textAlign": "left",
-                  },
-                  undefined,
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
+                {
+                  "flex": 1,
+                  "justifyContent": "center",
+                }
               }
             >
-              Show Action Indicator
-            </Text>
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="5"
+                  accessibilityRole="text"
+                  accessible={true}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  5
+                </Text>
+              </View>
+            </View>
           </View>
         </View>
         <View
           style={
             [
               {
-                "paddingLeft": 12,
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
               },
-              {},
             ]
           }
+        />
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
+          style={
+            {
+              "backgroundColor": "#FFFFFF",
+            }
+          }
         >
           <View
+            accessibilityLabel="6"
+            accessibilityRole="button"
+            accessible={true}
             style={
               [
                 {
                   "alignItems": "center",
+                  "flexDirection": "row",
                   "justifyContent": "center",
+                  "paddingHorizontal": 12,
+                },
+                undefined,
+                {
+                  "height": 46,
                 },
-                {},
               ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
+            <View
               style={
-                [
-                  {
-                    "color": "#2F343D",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
+                {
+                  "flex": 1,
+                  "justifyContent": "center",
+                }
               }
             >
-              
-            </Text>
-          </View>
-        </View>
-      </View>
-    </View>
-    <View
-      style={
-        [
-          {
-            "height": 0.5,
-          },
-          undefined,
-          {
-            "backgroundColor": "#CBCED1",
-          },
-        ]
-      }
-    />
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: WithSmallFont should match snapshot 1`] = `
-<RNCSafeAreaView
-  edges={
-    {
-      "bottom": "off",
-      "left": "additive",
-      "right": "additive",
-      "top": "off",
-    }
-  }
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      {
-        "backgroundColor": "#F2F3F5",
-      },
-      undefined,
-    ]
-  }
->
-  <RCTScrollView
-    contentContainerStyle={
-      [
-        {
-          "paddingVertical": 16,
-        },
-        {
-          "paddingBottom": 0,
-        },
-      ]
-    }
-    keyboardDismissMode="interactive"
-    keyboardShouldPersistTaps="handled"
-    scrollIndicatorInsets={
-      {
-        "right": 1,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="6"
+                  accessibilityRole="text"
+                  accessible={true}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  6
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
           }
-        }
+        />
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
       >
         <View
           style={
             {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
+              "backgroundColor": "#FFFFFF",
             }
           }
         >
-          <Text
-            accessibilityRole="header"
+          <View
+            accessibilityLabel="7"
+            accessibilityRole="button"
+            accessible={true}
             style={
               [
                 {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
                 },
+                undefined,
                 {
-                  "color": "#6C727A",
+                  "height": 46,
                 },
               ]
             }
           >
-            Chats
-          </Text>
+            <View
+              style={
+                {
+                  "flex": 1,
+                  "justifyContent": "center",
+                }
+              }
+            >
+              <View
+                style={
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
+                }
+              >
+                <Text
+                  accessibilityLabel="7"
+                  accessibilityRole="text"
+                  accessible={true}
+                  style={
+                    [
+                      {
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
+                      },
+                    ]
+                  }
+                >
+                  7
+                </Text>
+              </View>
+            </View>
+          </View>
         </View>
         <View
           style={
@@ -9608,267 +7527,85 @@ exports[`Story Snapshots: WithSmallFont should match snapshot 1`] = `
             ]
           }
         />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
           style={
-            [
-              undefined,
-              undefined,
-            ]
+            {
+              "backgroundColor": "#FFFFFF",
+            }
           }
         >
-          <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"
+          <View
+            accessibilityLabel="8"
+            accessibilityRole="button"
+            accessible={true}
             style={
               [
                 {
-                  "backgroundColor": "#FFFFFF",
-                  "borderRadius": undefined,
-                  "margin": undefined,
-                  "marginBottom": undefined,
-                  "marginEnd": undefined,
-                  "marginHorizontal": undefined,
-                  "marginLeft": undefined,
-                  "marginRight": undefined,
-                  "marginStart": undefined,
-                  "marginTop": undefined,
-                  "marginVertical": undefined,
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
                 },
+                undefined,
                 {
-                  "cursor": undefined,
+                  "height": 46,
                 },
               ]
             }
-            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,
+                  "flex": 1,
+                  "justifyContent": "center",
                 }
               }
-            />
-            <View
-              style={{}}
             >
               <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
-                    },
-                  ]
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
                 }
               >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#2F343D",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
+                <Text
+                  accessibilityLabel="8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
-                        "paddingLeft": 12,
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
                       },
-                      {},
                     ]
                   }
                 >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
+                  8
+                </Text>
               </View>
             </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
+          </View>
+        </View>
         <View
           style={
             [
@@ -9882,948 +7619,1856 @@ exports[`Story Snapshots: WithSmallFont should match snapshot 1`] = `
             ]
           }
         />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
+      </View>
+      <View
+        onFocusCapture={[Function]}
+        onLayout={[Function]}
+        style={null}
+      >
+        <View
           style={
-            [
-              undefined,
-              undefined,
-            ]
+            {
+              "backgroundColor": "#FFFFFF",
+            }
           }
         >
-          <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"
+          <View
+            accessibilityLabel="9"
+            accessibilityRole="button"
+            accessible={true}
             style={
               [
                 {
-                  "backgroundColor": "#FFFFFF",
-                  "borderRadius": undefined,
-                  "margin": undefined,
-                  "marginBottom": undefined,
-                  "marginEnd": undefined,
-                  "marginHorizontal": undefined,
-                  "marginLeft": undefined,
-                  "marginRight": undefined,
-                  "marginStart": undefined,
-                  "marginTop": undefined,
-                  "marginVertical": undefined,
+                  "alignItems": "center",
+                  "flexDirection": "row",
+                  "justifyContent": "center",
+                  "paddingHorizontal": 12,
                 },
+                undefined,
                 {
-                  "cursor": undefined,
+                  "height": 46,
                 },
               ]
             }
-            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,
+                  "flex": 1,
+                  "justifyContent": "center",
                 }
               }
-            />
-            <View
-              style={{}}
             >
               <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
+                  {
+                    "alignItems": "center",
+                    "flexDirection": "row",
+                  }
                 }
               >
-                <View
-                  style={
-                    {
-                      "paddingRight": 12,
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
-                  }
-                >
-                  <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#2F343D",
-                          },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
+                <Text
+                  accessibilityLabel="9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
-                        "paddingLeft": 12,
+                        "backgroundColor": "transparent",
+                        "flex": 1,
+                        "flexShrink": 1,
+                        "fontFamily": "Inter",
+                        "fontSize": 16,
+                        "fontVariant": [
+                          "tabular-nums",
+                        ],
+                        "fontWeight": "500",
+                        "textAlign": "left",
+                      },
+                      undefined,
+                      {
+                        "color": "#2F343D",
                       },
-                      {},
                     ]
                   }
                 >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
+                  9
+                </Text>
               </View>
             </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
+          </View>
+        </View>
+        <View
+          style={
+            [
+              {
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
+      </View>
+      <View
+        style={
+          {
+            "height": 0,
+          }
+        }
+      />
+      <View
+        onLayout={[Function]}
+      >
         <View
           style={
             [
               {
-                "height": 0.5,
+                "height": 0.5,
+              },
+              undefined,
+              {
+                "backgroundColor": "#CBCED1",
+              },
+            ]
+          }
+        />
+      </View>
+    </View>
+  </RCTScrollView>
+</RNCSafeAreaView>
+`;
+
+exports[`Story Snapshots: WithIcon should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    modifiers={
+      [
+        {
+          "$type": "listStyle",
+          "style": "insetGrouped",
+        },
+      ]
+    }
+    onGlobalEvent={[Function]}
+    onSelectionChange={[Function]}
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "Icon Left",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "font",
+                "family": "custom",
+                "size": 24,
+                "textStyle": "body",
+              },
+              {
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#2F343D",
+                  "type": "color",
+                },
+              },
+            ]
+          }
+          onGlobalEvent={[Function]}
+          text=""
+        />
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
+        >
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="Icon Left"
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "Icon Right",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
+        >
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="Icon Right"
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "font",
+                "family": "custom",
+                "size": 24,
+                "textStyle": "body",
+              },
+              {
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#2F343D",
+                  "type": "color",
+                },
+              },
+            ]
+          }
+          onGlobalEvent={[Function]}
+          text=""
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "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 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",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "font",
+                "family": "custom",
+                "size": 24,
+                "textStyle": "body",
               },
-              undefined,
               {
-                "backgroundColor": "#CBCED1",
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#2F343D",
+                  "type": "color",
+                },
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          text=""
         />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
         >
-          <Text
-            style={
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="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"
+            />
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-      <View
-        style={
-          {
-            "marginBottom": 16,
-          }
-        }
-      >
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingVertical": 8,
-            }
-          }
-        >
-          <Text
-            accessibilityRole="header"
-            style={
-              [
                 {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
                 {
-                  "color": "#6C727A",
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
+                  },
                 },
               ]
             }
-          >
-            Chats
-          </Text>
-        </View>
-        <View
-          style={
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "height": 0.5,
+                "$type": "font",
+                "family": "custom",
+                "size": 24,
+                "textStyle": "body",
               },
-              undefined,
               {
-                "backgroundColor": "#CBCED1",
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#2F343D",
+                  "type": "color",
+                },
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          text=""
         />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      modifiers={[]}
+      onGlobalEvent={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
+            {
+              "$type": "accessibilityLabel",
+              "label": "Show Action Indicator",
+            },
+            {
+              "$type": "frame",
+              "minHeight": 46,
+            },
+            {
+              "$type": "listRowInsets",
+              "leading": 12,
+              "trailing": 12,
+            },
+          ]
+        }
+        onGlobalEvent={[Function]}
+        spacing={12}
+      >
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          spacing={2}
+        >
+          <ViewManagerAdapter_ExpoUI
+            spacing={4}
+          >
+            <ViewManagerAdapter_ExpoUI
+              modifiers={
+                [
+                  {
+                    "$type": "lineLimit",
+                    "limit": undefined,
+                    "reservesSpace": undefined,
+                  },
+                  {
+                    "$type": "font",
+                    "textStyle": "body",
+                    "weight": "medium",
+                  },
+                  {
+                    "$type": "foregroundStyle",
+                    "style": {
+                      "color": "#2F343D",
+                      "type": "color",
+                    },
+                  },
+                ]
+              }
+              onGlobalEvent={[Function]}
+              text="Show Action Indicator"
+            />
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI />
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
-              undefined,
-              undefined,
+              {
+                "$type": "font",
+                "textStyle": "footnote",
+                "weight": "semibold",
+              },
+              {
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#6C727A",
+                  "type": "color",
+                },
+              },
             ]
           }
+          onGlobalEvent={[Function]}
+          systemName="chevron.forward"
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: WithSmallFont should match snapshot 1`] = `
+<RNCSafeAreaView
+  edges={
+    {
+      "bottom": "off",
+      "left": "additive",
+      "right": "additive",
+      "top": "off",
+    }
+  }
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      {
+        "backgroundColor": "#F2F3F5",
+      },
+      undefined,
+    ]
+  }
+>
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI
+      modifiers={
+        [
+          {
+            "$type": "listStyle",
+            "style": "insetGrouped",
+          },
+        ]
+      }
+      onGlobalEvent={[Function]}
+      onSelectionChange={[Function]}
+    >
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
+      >
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
         >
-          <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={
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "backgroundColor": "#FFFFFF",
-                  "borderRadius": undefined,
-                  "margin": undefined,
-                  "marginBottom": undefined,
-                  "marginEnd": undefined,
-                  "marginHorizontal": undefined,
-                  "marginLeft": undefined,
-                  "marginRight": undefined,
-                  "marginStart": undefined,
-                  "marginTop": undefined,
-                  "marginVertical": undefined,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
                 },
-              ]
-            }
-            underlayColor="#E4E7EA"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "#E4E7EA",
-                  "borderBottomLeftRadius": undefined,
-                  "borderBottomRightRadius": undefined,
-                  "borderRadius": undefined,
-                  "borderTopLeftRadius": undefined,
-                  "borderTopRightRadius": undefined,
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
                   "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
+                  "leading": 0,
                   "top": 0,
-                }
-              }
-            />
-            <View
-              style={{}}
+                  "trailing": 0,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    undefined,
-                    {
-                      "height": 46,
-                    },
-                  ]
+                  {
+                    "width": 0,
+                  }
                 }
               >
-                <View
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
-                    {
-                      "paddingRight": 12,
-                    }
+                    [
+                      undefined,
+                      undefined,
+                    ]
                   }
                 >
                   <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
-                          [
-                            {
-                              "lineHeight": 24,
-                            },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
                       }
-                    >
-                      
-                    </Text>
-                  </View>
-                </View>
-                <View
-                  style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
                     }
-                  }
-                >
-                  <View
-                    style={
+                    accessibilityValue={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
                       }
                     }
-                  >
-                    <Text
-                      style={
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
                         [
+                          undefined,
                           {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
-                          undefined,
                           {
-                            "color": "#2F343D",
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
                           },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
+                        ],
+                        undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    All
-                  </Text>
-                </View>
-                <View
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
+                            },
+                            undefined,
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                </ExternalKeyboardView>
+              </View>
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
+                },
+                {
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
+            >
+              <View
+                style={
+                  {
+                    "width": 0,
+                  }
+                }
+              >
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
+                      undefined,
+                      undefined,
                     ]
                   }
                 >
                   <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    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",
-                          "justifyContent": "center",
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
                         undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
                             },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <ExternalKeyboardView
-          canBeFocused={true}
-          enableA11yFocus={false}
-          enableContextMenu={false}
-          group={false}
-          haloEffect={true}
-          hasKeyDownPress={false}
-          hasKeyUpPress={true}
-          hasOnFocusChanged={true}
-          lockFocus={0}
-          onContextMenuPress={[Function]}
-          onFocusChange={[Function]}
-          onKeyUpPress={[Function]}
-          orderIndex={-1}
-          screenAutoA11yFocusDelay={300}
-          style={
-            [
-              undefined,
-              undefined,
-            ]
-          }
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        title="Chats"
+      >
+        <ViewManagerAdapter_ExpoUI
+          name="footer"
         >
-          <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={
+          <ViewManagerAdapter_ExpoUI
+            text="Chats"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          name="content"
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "backgroundColor": "#FFFFFF",
-                  "borderRadius": undefined,
-                  "margin": undefined,
-                  "marginBottom": undefined,
-                  "marginEnd": undefined,
-                  "marginHorizontal": undefined,
-                  "marginLeft": undefined,
-                  "marginRight": undefined,
-                  "marginStart": undefined,
-                  "marginTop": undefined,
-                  "marginVertical": undefined,
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
                 },
-              ]
-            }
-            underlayColor="#E4E7EA"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "#E4E7EA",
-                  "borderBottomLeftRadius": undefined,
-                  "borderBottomRightRadius": undefined,
-                  "borderRadius": undefined,
-                  "borderTopLeftRadius": undefined,
-                  "borderTopRightRadius": undefined,
+                  "$type": "listRowInsets",
                   "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
+                  "leading": 0,
                   "top": 0,
-                }
-              }
-            />
-            <View
-              style={{}}
+                  "trailing": 0,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
             >
               <View
-                accessibilityLabel="Chats All"
-                accessibilityRole="button"
-                accessible={true}
                 style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "paddingHorizontal": 12,
-                    },
-                    {
-                      "opacity": 0.3,
-                    },
-                    {
-                      "height": 46,
-                    },
-                  ]
+                  {
+                    "width": 0,
+                  }
                 }
               >
-                <View
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
-                    {
-                      "paddingRight": 12,
-                    }
+                    [
+                      undefined,
+                      undefined,
+                    ]
                   }
                 >
                   <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    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",
-                          "justifyContent": "center",
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
+                          },
+                        ],
                         undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
                             },
                             undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
-                <View
+                </ExternalKeyboardView>
+              </View>
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "frame",
+                  "maxWidth": 9007199254740991,
+                },
+                {
+                  "$type": "alignmentGuide",
+                  "guide": "listRowSeparatorLeading",
+                  "value": 12,
+                },
+                {
+                  "$type": "onGeometryChange",
+                  "eventListener": [Function],
+                },
+                {
+                  "$type": "listRowInsets",
+                  "bottom": 0,
+                  "leading": 0,
+                  "top": 0,
+                  "trailing": 0,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+          >
+            <ViewManagerAdapter_ExpoUI
+              expoInternalSizeFromChildren={true}
+              layoutRoot={false}
+              matchContents={true}
+            >
+              <View
+                style={
+                  {
+                    "width": 0,
+                  }
+                }
+              >
+                <ExternalKeyboardView
+                  canBeFocused={false}
+                  enableA11yFocus={false}
+                  enableContextMenu={false}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
-                    {
-                      "flex": 1,
-                      "justifyContent": "center",
-                    }
+                    [
+                      undefined,
+                      undefined,
+                    ]
                   }
                 >
                   <View
-                    style={
+                    accessibilityState={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": true,
+                        "expanded": undefined,
+                        "selected": undefined,
                       }
                     }
-                  >
-                    <Text
-                      style={
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
+                    style={
+                      [
                         [
+                          undefined,
                           {
-                            "backgroundColor": "transparent",
-                            "flex": 1,
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontSize": 16,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "500",
-                            "textAlign": "left",
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
                           },
-                          undefined,
                           {
-                            "color": "#2F343D",
+                            "backgroundColor": "transparent",
+                            "borderRadius": undefined,
                           },
-                        ]
-                      }
-                    >
-                      Chats
-                    </Text>
-                  </View>
-                  <Text
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                      ]
-                    }
-                  >
-                    All
-                  </Text>
-                </View>
-                <View
-                  style={
-                    [
-                      {
-                        "paddingLeft": 12,
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                        },
+                        ],
                         undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    <Text
-                      allowFontScaling={false}
-                      selectable={false}
-                      style={
-                        [
-                          {
-                            "color": "#2F343D",
-                            "fontSize": 24,
-                          },
+                    <View
+                      style={{}}
+                    >
+                      <View
+                        accessibilityLabel="Chats All"
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "justifyContent": "center",
+                              "paddingHorizontal": 12,
                             },
-                            undefined,
-                          ],
-                          {
-                            "fontFamily": "custom",
-                            "fontStyle": "normal",
-                            "fontWeight": "normal",
-                          },
-                          {},
-                        ]
-                      }
-                    >
-                      
-                    </Text>
+                            {
+                              "opacity": 0.3,
+                            },
+                            {
+                              "height": 46,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          style={
+                            {
+                              "paddingRight": 12,
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                        <View
+                          style={
+                            {
+                              "flex": 1,
+                              "justifyContent": "center",
+                            }
+                          }
+                        >
+                          <View
+                            style={
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                              }
+                            }
+                          >
+                            <Text
+                              accessibilityLabel="Chats"
+                              accessibilityRole="text"
+                              accessible={true}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "flexShrink": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 16,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#2F343D",
+                                  },
+                                ]
+                              }
+                            >
+                              Chats
+                            </Text>
+                          </View>
+                          <Text
+                            accessibilityLabel="All"
+                            accessibilityRole="text"
+                            accessible={true}
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "backgroundColor": "transparent",
+                                  "fontFamily": "Inter",
+                                  "fontSize": 14,
+                                  "fontVariant": [
+                                    "tabular-nums",
+                                  ],
+                                  "fontWeight": "400",
+                                  "textAlign": "left",
+                                },
+                                {
+                                  "color": "#6C727A",
+                                },
+                              ]
+                            }
+                          >
+                            All
+                          </Text>
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "paddingLeft": 12,
+                              },
+                              {},
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "justifyContent": "center",
+                                },
+                                undefined,
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#2F343D",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    undefined,
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
+                </ExternalKeyboardView>
               </View>
-            </View>
-          </RNGestureHandlerButton>
-        </ExternalKeyboardView>
-        <View
-          style={
-            [
-              {
-                "height": 0.5,
-              },
-              undefined,
-              {
-                "backgroundColor": "#CBCED1",
-              },
-            ]
-          }
-        />
-        <View
-          style={
-            {
-              "paddingHorizontal": 12,
-              "paddingTop": 8,
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 14,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 20,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#6C727A",
-                },
-              ]
-            }
-          >
-            Chats
-          </Text>
-        </View>
-      </View>
-    </View>
-  </RCTScrollView>
+            </ViewManagerAdapter_ExpoUI>
+          </ViewManagerAdapter_ExpoUI>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
 </RNCSafeAreaView>
 `;
diff --git a/app/containers/List/__tests__/ListSection.test.tsx b/app/containers/List/__tests__/ListSection.test.tsx
new file mode 100644
index 00000000000..31d55205429
--- /dev/null
+++ b/app/containers/List/__tests__/ListSection.test.tsx
@@ -0,0 +1,43 @@
+import { Text } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+
+import ListSection from '../ListSection';
+import { NativeListContext } from '../native/context';
+import { asNativeListSection, isNativeListRow, isNativeListSection } from '../native/rowMarkers';
+
+jest.mock('../native/Section', () => {
+	const { Text: MockText } = jest.requireActual('react-native');
+	return ({ title }: { title?: string }) => <MockText>{`native section ${title}`}</MockText>;
+});
+
+describe('ListSection', () => {
+	it('renders as a native section inside a native list', async () => {
+		await render(
+			<NativeListContext.Provider value={{ mode: 'native', renderRow: row => row }}>
+				<ListSection title='Calls' translateTitle={false}>
+					<Text>row</Text>
+				</ListSection>
+			</NativeListContext.Provider>
+		);
+		expect(screen.getByText('native section Calls')).toBeTruthy();
+		expect(screen.queryByText('row')).toBeNull();
+	});
+
+	it('renders its children outside a native list', async () => {
+		await render(
+			<ListSection>
+				<Text>row</Text>
+			</ListSection>
+		);
+		expect(screen.getByText('row')).toBeTruthy();
+	});
+});
+
+describe('asNativeListSection', () => {
+	it('marks a component as a whole section rather than a row', () => {
+		const CallRows = asNativeListSection(() => null);
+		expect(isNativeListSection(CallRows)).toBe(true);
+		expect(isNativeListRow(CallRows)).toBe(false);
+		expect(isNativeListSection(() => null)).toBe(false);
+	});
+});
diff --git a/app/containers/List/index.ts b/app/containers/List/index.ts
index 76002b160db..d893df9b54b 100644
--- a/app/containers/List/index.ts
+++ b/app/containers/List/index.ts
@@ -3,6 +3,7 @@ export { default as Item } from './ListItem';
 export { default as Radio } from './ListRadio';
 export { default as Section } from './ListSection';
 export { default as Icon } from './ListIcon';
+export { default as Checkbox } from './ListCheckbox';
 export { default as Separator } from './ListSeparator';
 export { default as Header } from './ListHeader';
 export { default as Info } from './ListInfo';
diff --git a/app/containers/List/listChildren.ts b/app/containers/List/listChildren.ts
new file mode 100644
index 00000000000..1419b952fed
--- /dev/null
+++ b/app/containers/List/listChildren.ts
@@ -0,0 +1,14 @@
+import { Children, cloneElement, Fragment, isValidElement, type ReactElement, type ReactNode } from 'react';
+
+import ListSeparator from './ListSeparator';
+
+export const flattenListChildren = (children: ReactNode, keyPrefix = ''): ReactElement[] =>
+	Children.toArray(children).flatMap(child => {
+		if (!isValidElement<{ children?: ReactNode }>(child)) {
+			return [];
+		}
+		const key = `${keyPrefix}${child.key}`;
+		return child.type === Fragment ? flattenListChildren(child.props.children, key) : [cloneElement(child, { key })];
+	});
+
+export const isListSeparator = (element: ReactElement) => element.type === ListSeparator;
diff --git a/app/containers/List/native/Accessory.ios.tsx b/app/containers/List/native/Accessory.ios.tsx
new file mode 100644
index 00000000000..9da0409592b
--- /dev/null
+++ b/app/containers/List/native/Accessory.ios.tsx
@@ -0,0 +1,58 @@
+import { Checkbox } from '@expo/ui';
+import { Image, RNHostView, Text, Toggle } from '@expo/ui/swift-ui';
+import { disabled, font, foregroundStyle, labelsHidden, lineLimit, tint } from '@expo/ui/swift-ui/modifiers';
+
+import { useTheme } from '~/theme';
+import NativeListIcon from './Icon.ios';
+import NativeListIndicator from './Indicator.ios';
+import NativeListStatus from './Status.ios';
+import { type TNativeListAccessory } from './describeAccessory';
+
+const NativeListAccessory = ({ accessory }: { accessory: TNativeListAccessory }) => {
+	const { colors } = useTheme();
+
+	switch (accessory.kind) {
+		case 'icon':
+			return <NativeListIcon name={accessory.name} color={accessory.color ?? colors.fontDefault} size={accessory.size} />;
+		case 'indicator':
+			return <NativeListIndicator indicator={accessory.indicator} />;
+		case 'check':
+			return (
+				<Image
+					systemName='checkmark'
+					color={colors.badgeBackgroundLevel2}
+					modifiers={[font({ textStyle: 'body', weight: 'semibold' })]}
+				/>
+			);
+		case 'status':
+			return <NativeListStatus status={accessory.status} />;
+		case 'toggle':
+			return (
+				<Toggle
+					isOn={accessory.isOn}
+					onIsOnChange={accessory.onValueChange}
+					testID={accessory.testID}
+					modifiers={[labelsHidden(), tint(colors.buttonBackgroundPrimaryDefault), disabled(accessory.disabled)]}
+				/>
+			);
+		case 'checkbox':
+			return (
+				<Checkbox
+					value={accessory.value}
+					onValueChange={accessory.onValueChange}
+					testID={accessory.testID}
+					modifiers={[labelsHidden(), tint(colors.strokeHighlight)]}
+				/>
+			);
+		case 'text':
+			return (
+				<Text modifiers={[lineLimit(1), font({ textStyle: 'body' }), foregroundStyle(colors.fontSecondaryInfo)]}>
+					{accessory.text}
+				</Text>
+			);
+		case 'hosted':
+			return <RNHostView matchContents>{accessory.element}</RNHostView>;
+	}
+};
+
+export default NativeListAccessory;
diff --git a/app/containers/List/native/Icon.ios.tsx b/app/containers/List/native/Icon.ios.tsx
new file mode 100644
index 00000000000..f1f6d8609b5
--- /dev/null
+++ b/app/containers/List/native/Icon.ios.tsx
@@ -0,0 +1,22 @@
+import { Text } from '@expo/ui/swift-ui';
+import { font, foregroundStyle } from '@expo/ui/swift-ui/modifiers';
+
+import { type TIconsName } from '~/containers/CustomIcon';
+import { mappedIcons } from '~/containers/CustomIcon/mappedIcons';
+import { ICON_SIZE } from '../constants';
+
+interface INativeListIcon {
+	name: TIconsName;
+	color: string;
+	size?: number;
+}
+
+const ICON_FONT_FAMILY = 'custom';
+
+const NativeListIcon = ({ name, color, size = ICON_SIZE }: INativeListIcon) => (
+	<Text modifiers={[font({ family: ICON_FONT_FAMILY, size, textStyle: 'body' }), foregroundStyle(color)]}>
+		{String.fromCodePoint(mappedIcons[name])}
+	</Text>
+);
+
+export default NativeListIcon;
diff --git a/app/containers/List/native/Indicator.ios.tsx b/app/containers/List/native/Indicator.ios.tsx
new file mode 100644
index 00000000000..b68690a07c6
--- /dev/null
+++ b/app/containers/List/native/Indicator.ios.tsx
@@ -0,0 +1,26 @@
+import { type ComponentProps } from 'react';
+import { Image } from '@expo/ui/swift-ui';
+import { font } from '@expo/ui/swift-ui/modifiers';
+
+import { useTheme } from '~/theme';
+
+export type TNativeListIndicator = 'disclosure' | 'external';
+
+const SYSTEM_NAMES: Record<TNativeListIndicator, ComponentProps<typeof Image>['systemName']> = {
+	disclosure: 'chevron.forward',
+	external: 'arrow.up.forward'
+};
+
+const NativeListIndicator = ({ indicator }: { indicator: TNativeListIndicator }) => {
+	const { colors } = useTheme();
+
+	return (
+		<Image
+			systemName={SYSTEM_NAMES[indicator]}
+			color={colors.fontHint}
+			modifiers={[font({ textStyle: 'footnote', weight: 'semibold' })]}
+		/>
+	);
+};
+
+export default NativeListIndicator;
diff --git a/app/containers/List/native/Item.ios.tsx b/app/containers/List/native/Item.ios.tsx
new file mode 100644
index 00000000000..166333486ed
--- /dev/null
+++ b/app/containers/List/native/Item.ios.tsx
@@ -0,0 +1,99 @@
+import { type ReactNode } from 'react';
+import { Button, HStack, RNHostView, Spacer, Text, VStack } from '@expo/ui/swift-ui';
+import {
+	accessibilityLabel,
+	buttonStyle,
+	contentShape,
+	font,
+	foregroundStyle,
+	frame,
+	lineLimit,
+	listRowInsets,
+	opacity,
+	shapes
+} from '@expo/ui/swift-ui/modifiers';
+
+import { useTheme } from '~/theme';
+import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import NativeListAccessory from './Accessory.ios';
+import NativeListIcon from './Icon.ios';
+import NativeListIndicator from './Indicator.ios';
+import { type IListItem } from '../ListItem';
+import { type INativeListItem } from './types';
+import { describeNativeListAccessory } from './describeAccessory';
+import { BASE_HEIGHT, PADDING_HORIZONTAL } from '../constants';
+import { nativeListItemAccessibilityLabel, nativeListItemSubtitle, nativeListItemTitle, pressNativeListItem } from './itemProps';
+
+const NativeListItemTitle = ({ item }: { item: IListItem }) => {
+	const { colors } = useTheme();
+	const title = nativeListItemTitle(item);
+
+	if (typeof item.title === 'function') {
+		const customTitle = item.title();
+		return customTitle ? <RNHostView matchContents>{customTitle}</RNHostView> : null;
+	}
+	return (
+		<HStack spacing={4}>
+			<Text
+				modifiers={[
+					item.numberOfLines ? lineLimit(item.numberOfLines) : lineLimit(),
+					font({ textStyle: 'body', weight: 'medium' }),
+					foregroundStyle(item.color ?? colors.fontDefault)
+				]}>
+				{title}
+			</Text>
+			{item.alert ? <NativeListIcon name='info' color={colors.buttonBackgroundDangerDefault} /> : null}
+		</HStack>
+	);
+};
+
+const NativeListItemRow = ({ item, children }: { item: IListItem; children: ReactNode }) => {
+	const { fontScale } = useResponsiveLayout();
+	const rowModifiers = [
+		accessibilityLabel(nativeListItemAccessibilityLabel(item)),
+		frame({ minHeight: (item.heightContainer ?? BASE_HEIGHT) * fontScale }),
+		listRowInsets({ leading: PADDING_HORIZONTAL, trailing: PADDING_HORIZONTAL }),
+		...(item.disabled ? [opacity(0.3)] : [])
+	];
+
+	if (!item.onPress) {
+		return (
+			<HStack spacing={12} testID={item.testID} modifiers={rowModifiers}>
+				{children}
+			</HStack>
+		);
+	}
+	return (
+		<Button onPress={() => pressNativeListItem(item)} testID={item.testID} modifiers={[buttonStyle('plain'), ...rowModifiers]}>
+			<HStack spacing={12} modifiers={[contentShape(shapes.rectangle())]}>
+				{children}
+			</HStack>
+		</Button>
+	);
+};
+
+const NativeListItem = ({ item }: INativeListItem) => {
+	const { colors } = useTheme();
+	const subtitle = nativeListItemSubtitle(item);
+	const leading = describeNativeListAccessory(item.left?.());
+	const trailing = describeNativeListAccessory(item.right?.());
+
+	return (
+		<NativeListItemRow item={item}>
+			{leading ? <NativeListAccessory accessory={leading} /> : null}
+			<VStack alignment='leading' spacing={2}>
+				<NativeListItemTitle item={item} />
+				{subtitle ? (
+					<Text modifiers={[lineLimit(1), font({ textStyle: 'subheadline' }), foregroundStyle(colors.fontSecondaryInfo)]}>
+						{subtitle}
+					</Text>
+				) : null}
+			</VStack>
+			<Spacer />
+			{trailing ? <NativeListAccessory accessory={trailing} /> : null}
+			{item.showActionIndicator ? <NativeListIndicator indicator='disclosure' /> : null}
+		</NativeListItemRow>
+	);
+};
+
+export default NativeListItem;
diff --git a/app/containers/List/native/Item.tsx b/app/containers/List/native/Item.tsx
new file mode 100644
index 00000000000..0a3a365637c
--- /dev/null
+++ b/app/containers/List/native/Item.tsx
@@ -0,0 +1,5 @@
+import { type INativeListItem } from './types';
+
+const NativeListItem = (_: INativeListItem) => null;
+
+export default NativeListItem;
diff --git a/app/containers/List/native/Picker.ios.tsx b/app/containers/List/native/Picker.ios.tsx
new file mode 100644
index 00000000000..e910913d871
--- /dev/null
+++ b/app/containers/List/native/Picker.ios.tsx
@@ -0,0 +1,36 @@
+import { Picker, Text } from '@expo/ui/swift-ui';
+import { font, foregroundStyle, frame, listRowInsets, pickerStyle, tag, tint } from '@expo/ui/swift-ui/modifiers';
+
+import { useTheme } from '~/theme';
+import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { BASE_HEIGHT, PADDING_HORIZONTAL } from '../constants';
+import { type INativeListPicker } from './types';
+
+const NativeListPicker = ({ title, testID, options, selection, onSelectionChange }: INativeListPicker) => {
+	const { colors } = useTheme();
+	const { fontScale } = useResponsiveLayout();
+
+	return (
+		<Picker
+			testID={testID}
+			selection={selection}
+			onSelectionChange={onSelectionChange}
+			label={
+				<Text modifiers={[font({ textStyle: 'body', weight: 'medium' }), foregroundStyle(colors.fontDefault)]}>{title}</Text>
+			}
+			modifiers={[
+				pickerStyle('menu'),
+				tint(colors.fontSecondaryInfo),
+				frame({ minHeight: BASE_HEIGHT * fontScale }),
+				listRowInsets({ leading: PADDING_HORIZONTAL, trailing: PADDING_HORIZONTAL })
+			]}>
+			{options.map(option => (
+				<Text key={option.value} testID={option.testID} modifiers={[tag(option.value)]}>
+					{option.label}
+				</Text>
+			))}
+		</Picker>
+	);
+};
+
+export default NativeListPicker;
diff --git a/app/containers/List/native/Picker.tsx b/app/containers/List/native/Picker.tsx
new file mode 100644
index 00000000000..aaa4cc894c6
--- /dev/null
+++ b/app/containers/List/native/Picker.tsx
@@ -0,0 +1,5 @@
+import { type INativeListPicker } from './types';
+
+const NativeListPicker = (_: INativeListPicker) => null;
+
+export default NativeListPicker;
diff --git a/app/containers/List/native/Section.ios.tsx b/app/containers/List/native/Section.ios.tsx
new file mode 100644
index 00000000000..27ceb7f3d8b
--- /dev/null
+++ b/app/containers/List/native/Section.ios.tsx
@@ -0,0 +1,41 @@
+import { useContext, type ReactElement } from 'react';
+import { Section, Text } from '@expo/ui/swift-ui';
+
+import ListInfo from '../ListInfo';
+import { flattenListChildren, isListSeparator } from '../listChildren';
+import { NativeListContext } from './context';
+import { translateListText } from './itemProps';
+import { type INativeListSection } from './types';
+
+interface IInfoProps {
+	info: string;
+	translateInfo?: boolean;
+}
+
+const isInfo = (element: ReactElement): element is ReactElement<IInfoProps> => element.type === ListInfo;
+
+const NativeListSection = ({ children, title, translateTitle }: INativeListSection) => {
+	const { renderRow } = useContext(NativeListContext);
+	const elements = flattenListChildren(children).filter(element => !isListSeparator(element));
+	const infos = elements.filter(isInfo);
+	const rows = elements.filter(element => !isInfo(element));
+	const footer = infos.length ? (
+		<>
+			{infos.map(info => (
+				<Text key={info.key}>{translateListText(info.props.info, info.props.translateInfo)}</Text>
+			))}
+		</>
+	) : undefined;
+
+	if (!rows.length && !infos.length) {
+		return null;
+	}
+
+	return (
+		<Section title={title ? translateListText(title, translateTitle) : undefined} footer={footer}>
+			{rows.map(renderRow)}
+		</Section>
+	);
+};
+
+export default NativeListSection;
diff --git a/app/containers/List/native/Section.tsx b/app/containers/List/native/Section.tsx
new file mode 100644
index 00000000000..73581d1562f
--- /dev/null
+++ b/app/containers/List/native/Section.tsx
@@ -0,0 +1,5 @@
+import { type INativeListSection } from './types';
+
+const NativeListSection = (_: INativeListSection) => null;
+
+export default NativeListSection;
diff --git a/app/containers/List/native/Status.ios.tsx b/app/containers/List/native/Status.ios.tsx
new file mode 100644
index 00000000000..95f2646d389
--- /dev/null
+++ b/app/containers/List/native/Status.ios.tsx
@@ -0,0 +1,19 @@
+import { type TUserStatus } from '~/definitions';
+import { useUserStatusColor } from '~/lib/hooks/useUserStatusColor';
+import { useTheme } from '~/theme';
+import { hasIcon, type TIconsName } from '~/containers/CustomIcon';
+import NativeListIcon from './Icon.ios';
+
+const statusIconName = (status: TUserStatus): TIconsName => {
+	const name = `status-${status}`;
+	return hasIcon(name) ? (name as TIconsName) : 'status-offline';
+};
+
+const NativeListStatus = ({ status }: { status: TUserStatus }) => {
+	const { colors } = useTheme();
+	const statusColor = useUserStatusColor(status);
+
+	return <NativeListIcon name={statusIconName(status)} color={statusColor ?? colors.userPresenceOffline} />;
+};
+
+export default NativeListStatus;
diff --git a/app/containers/List/native/__tests__/describeAccessory.test.tsx b/app/containers/List/native/__tests__/describeAccessory.test.tsx
new file mode 100644
index 00000000000..3b8bbfe8d51
--- /dev/null
+++ b/app/containers/List/native/__tests__/describeAccessory.test.tsx
@@ -0,0 +1,86 @@
+import { Text, View } from 'react-native';
+
+import Avatar from '~/containers/Avatar';
+import { CustomIcon } from '~/containers/CustomIcon';
+import NewWindowIcon from '~/containers/NewWindowIcon';
+import Radio from '~/containers/Radio';
+import Status from '~/containers/Status/Status';
+import Switch from '~/containers/Switch';
+import ListCheckbox from '../../ListCheckbox';
+import ListIcon from '../../ListIcon';
+import { describeNativeListAccessory } from '../describeAccessory';
+
+describe('describeNativeListAccessory', () => {
+	it('has nothing to render for an empty slot', () => {
+		expect(describeNativeListAccessory(null)).toBeNull();
+	});
+
+	it('maps List.Icon and CustomIcon to icon font glyphs', () => {
+		expect(describeNativeListAccessory(<ListIcon name='moon' />)).toEqual({ kind: 'icon', name: 'moon' });
+		expect(describeNativeListAccessory(<CustomIcon name='warning' size={20} color='red' />)).toEqual({
+			kind: 'icon',
+			name: 'warning',
+			color: 'red',
+			size: 20
+		});
+	});
+
+	it('ignores an empty icon color', () => {
+		expect(describeNativeListAccessory(<ListIcon name='checkbox-unchecked' color='' />)).toEqual({
+			kind: 'icon',
+			name: 'checkbox-unchecked'
+		});
+	});
+
+	it('maps the external link icon to the external indicator', () => {
+		expect(describeNativeListAccessory(<NewWindowIcon />)).toEqual({ kind: 'indicator', indicator: 'external' });
+	});
+
+	it('maps the chevron icon to the disclosure indicator', () => {
+		expect(describeNativeListAccessory(<ListIcon name='chevron-right' />)).toEqual({
+			kind: 'indicator',
+			indicator: 'disclosure'
+		});
+	});
+
+	it('shows a checkmark only for a checked radio', () => {
+		expect(describeNativeListAccessory(<Radio check />)).toEqual({ kind: 'check' });
+		expect(describeNativeListAccessory(<Radio check={false} />)).toBeNull();
+	});
+
+	it('maps the user status', () => {
+		expect(describeNativeListAccessory(<Status status='away' size={24} />)).toEqual({ kind: 'status', status: 'away' });
+	});
+
+	it('maps a Switch to a toggle keeping value, handler and disabled state', () => {
+		const onValueChange = jest.fn();
+		const accessory = describeNativeListAccessory(<Switch value onValueChange={onValueChange} disabled testID='switch' />);
+		expect(accessory).toEqual({ kind: 'toggle', isOn: true, onValueChange, disabled: true, testID: 'switch' });
+	});
+
+	it('maps List.Checkbox to a checkbox keeping value, handler and testID', () => {
+		const onValueChange = jest.fn();
+		expect(describeNativeListAccessory(<ListCheckbox value onValueChange={onValueChange} testID='checkbox' />)).toEqual({
+			kind: 'checkbox',
+			value: true,
+			onValueChange,
+			testID: 'checkbox'
+		});
+	});
+
+	it('maps plain text, also when wrapped in a single View', () => {
+		expect(describeNativeListAccessory(<Text>Off</Text>)).toEqual({ kind: 'text', text: 'Off' });
+		expect(
+			describeNativeListAccessory(
+				<View>
+					<Text>Toasts</Text>
+				</View>
+			)
+		).toEqual({ kind: 'text', text: 'Toasts' });
+	});
+
+	it('hosts anything else as React Native', () => {
+		const avatar = <Avatar text='diego' size={36} />;
+		expect(describeNativeListAccessory(avatar)).toEqual({ kind: 'hosted', element: avatar });
+	});
+});
diff --git a/app/containers/List/native/__tests__/itemProps.test.ts b/app/containers/List/native/__tests__/itemProps.test.ts
new file mode 100644
index 00000000000..9f6ff046daa
--- /dev/null
+++ b/app/containers/List/native/__tests__/itemProps.test.ts
@@ -0,0 +1,68 @@
+import EventEmitter from '~/lib/methods/helpers/events';
+import { LISTENER } from '~/containers/Toast';
+import { type IListItem } from '../../ListItem';
+import { nativeListItemAccessibilityLabel, nativeListItemTitle, pressNativeListItem } from '../itemProps';
+
+jest.mock('~/i18n', () => ({ t: (key: string) => `t:${key}` }));
+
+describe('nativeListItemTitle', () => {
+	it('translates string titles', () => {
+		expect(nativeListItemTitle({ title: 'Theme' })).toBe('t:Theme');
+	});
+
+	it('has no text for custom title components', () => {
+		expect(nativeListItemTitle({ title: () => null })).toBeUndefined();
+	});
+});
+
+describe('nativeListItemAccessibilityLabel', () => {
+	it('prefers the explicit label', () => {
+		expect(nativeListItemAccessibilityLabel({ title: 'Theme', accessibilityLabel: 'Custom' })).toBe('Custom');
+	});
+
+	it('joins translated title, subtitle and switch state', () => {
+		expect(
+			nativeListItemAccessibilityLabel({
+				title: 'Crash_report',
+				subtitle: 'Info',
+				translateSubtitle: false,
+				additionalAccessibilityLabel: true
+			})
+		).toBe('t:Crash_report Info t:Enabled');
+	});
+
+	it('uses checked wording for checkboxes', () => {
+		expect(
+			nativeListItemAccessibilityLabel({
+				title: 'Name',
+				translateTitle: false,
+				additionalAccessibilityLabel: false,
+				additionalAccessibilityLabelCheck: true
+			})
+		).toBe('Name t:Unchecked');
+	});
+});
+
+describe('pressNativeListItem', () => {
+	const onPress = jest.fn();
+	const item: IListItem = { title: 'Theme', onPress };
+
+	beforeEach(() => onPress.mockClear());
+
+	it('calls onPress with the title', () => {
+		pressNativeListItem(item);
+		expect(onPress).toHaveBeenCalledWith('Theme');
+	});
+
+	it('ignores presses on disabled rows', () => {
+		pressNativeListItem({ title: 'Theme', onPress, disabled: true });
+		expect(onPress).not.toHaveBeenCalled();
+	});
+
+	it('shows the disabled reason instead of pressing', () => {
+		const emit = jest.spyOn(EventEmitter, 'emit');
+		pressNativeListItem({ title: 'Theme', onPress, disabled: true, disabledReason: 'Not allowed' });
+		expect(emit).toHaveBeenCalledWith(LISTENER, { message: 'Not allowed' });
+		expect(onPress).not.toHaveBeenCalled();
+	});
+});
diff --git a/app/containers/List/native/context.ts b/app/containers/List/native/context.ts
new file mode 100644
index 00000000000..7cd85f92865
--- /dev/null
+++ b/app/containers/List/native/context.ts
@@ -0,0 +1,12 @@
+import { createContext, useContext, type ReactElement } from 'react';
+
+export type TNativeListMode = false | 'native' | 'hosted';
+
+interface INativeListContext {
+	mode: TNativeListMode;
+	renderRow: (row: ReactElement) => ReactElement;
+}
+
+export const NativeListContext = createContext<INativeListContext>({ mode: false, renderRow: row => row });
+
+export const useNativeListMode = () => useContext(NativeListContext).mode;
diff --git a/app/containers/List/native/describeAccessory.ts b/app/containers/List/native/describeAccessory.ts
new file mode 100644
index 00000000000..4836fa55740
--- /dev/null
+++ b/app/containers/List/native/describeAccessory.ts
@@ -0,0 +1,91 @@
+import { Children, isValidElement, type ReactElement, type ReactNode } from 'react';
+import { Text, View, type SwitchProps } from 'react-native';
+
+import { type TUserStatus } from '~/definitions';
+import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
+import NewWindowIcon from '~/containers/NewWindowIcon';
+import Radio from '~/containers/Radio';
+import Status from '~/containers/Status/Status';
+import Switch from '~/containers/Switch';
+import ListCheckbox, { type IListCheckbox } from '../ListCheckbox';
+import ListIcon from '../ListIcon';
+
+export type TNativeListAccessory =
+	| { kind: 'icon'; name: TIconsName; color?: string; size?: number }
+	| { kind: 'check' }
+	| { kind: 'indicator'; indicator: 'disclosure' | 'external' }
+	| { kind: 'status'; status: TUserStatus }
+	| { kind: 'toggle'; isOn: boolean; onValueChange?: (value: boolean) => void; disabled: boolean; testID?: string }
+	| { kind: 'checkbox'; value: boolean; onValueChange: (value: boolean) => void; testID?: string }
+	| { kind: 'text'; text: string }
+	| { kind: 'hosted'; element: ReactElement };
+
+interface IIconProps {
+	name: TIconsName;
+	color?: string;
+	size?: number;
+}
+
+const iconAccessory = (name: TIconsName, { color, size }: Partial<IIconProps>): TNativeListAccessory => {
+	if (name === 'chevron-right') {
+		return { kind: 'indicator', indicator: 'disclosure' };
+	}
+	if (name === 'new-window') {
+		return { kind: 'indicator', indicator: 'external' };
+	}
+	return { kind: 'icon', name, color: color || undefined, size };
+};
+
+const textContent = (children: ReactNode) => {
+	const parts = Children.toArray(children);
+	return parts.every(part => typeof part === 'string' || typeof part === 'number') ? parts.join('') : null;
+};
+
+const onlyChild = (children: ReactNode) => {
+	const parts = Children.toArray(children);
+	return parts.length === 1 && isValidElement(parts[0]) ? parts[0] : null;
+};
+
+type TProps = Record<string, any>;
+type TDescriber = (props: TProps) => TNativeListAccessory | null | undefined;
+
+const describeText: TDescriber = ({ children }) => {
+	const text = textContent(children);
+	return text === null ? undefined : { kind: 'text', text };
+};
+
+const describeToggle: TDescriber = props => {
+	const { value, onValueChange, disabled, testID } = props as SwitchProps;
+	return { kind: 'toggle', isOn: Boolean(value), onValueChange: onValueChange ?? undefined, disabled: Boolean(disabled), testID };
+};
+
+const describeCheckbox: TDescriber = props => {
+	const { value, onValueChange, testID } = props as IListCheckbox;
+	return { kind: 'checkbox', value, onValueChange, testID };
+};
+
+const describeWrapper: TDescriber = ({ children }) => {
+	const child = onlyChild(children);
+	const described = child ? describeNativeListAccessory(child) : null;
+	return described?.kind === 'hosted' ? undefined : described;
+};
+
+const describers = new Map<unknown, TDescriber>([
+	[ListCheckbox, describeCheckbox],
+	[ListIcon, props => iconAccessory(props.name, props)],
+	[CustomIcon, props => iconAccessory(props.name, props)],
+	[NewWindowIcon, () => ({ kind: 'indicator', indicator: 'external' })],
+	[Radio, ({ check }) => (check ? { kind: 'check' } : null)],
+	[Status, ({ status }) => ({ kind: 'status', status: status ?? 'offline' })],
+	[Switch, describeToggle],
+	[Text, describeText],
+	[View, describeWrapper]
+]);
+
+export function describeNativeListAccessory(node: ReactNode): TNativeListAccessory | null {
+	if (!isValidElement<TProps>(node)) {
+		return null;
+	}
+	const described = describers.get(node.type)?.(node.props);
+	return described === undefined ? { kind: 'hosted', element: node } : described;
+}
diff --git a/app/containers/List/native/itemProps.ts b/app/containers/List/native/itemProps.ts
new file mode 100644
index 00000000000..8e4ed4ae02a
--- /dev/null
+++ b/app/containers/List/native/itemProps.ts
@@ -0,0 +1,39 @@
+import I18n from '~/i18n';
+import EventEmitter from '~/lib/methods/helpers/events';
+import { LISTENER } from '~/containers/Toast';
+import { type IListItem } from '../ListItem';
+
+export const translateListText = (text: string, shouldTranslate = true) => (shouldTranslate ? I18n.t(text) : text);
+
+export const nativeListItemTitle = ({ title, translateTitle }: IListItem) =>
+	typeof title === 'string' ? translateListText(title, translateTitle) : undefined;
+
+export const nativeListItemSubtitle = ({ subtitle, translateSubtitle }: IListItem) =>
+	subtitle ? translateListText(subtitle, translateSubtitle) : undefined;
+
+const stateLabel = ({ additionalAccessibilityLabel, additionalAccessibilityLabelCheck }: IListItem) => {
+	if (typeof additionalAccessibilityLabel === 'string') {
+		return additionalAccessibilityLabel;
+	}
+	if (typeof additionalAccessibilityLabel !== 'boolean') {
+		return undefined;
+	}
+	if (additionalAccessibilityLabelCheck) {
+		return I18n.t(additionalAccessibilityLabel ? 'Checked' : 'Unchecked');
+	}
+	return I18n.t(additionalAccessibilityLabel ? 'Enabled' : 'Disabled');
+};
+
+export const nativeListItemAccessibilityLabel = (item: IListItem) =>
+	item.accessibilityLabel ??
+	[nativeListItemTitle(item), nativeListItemSubtitle(item), stateLabel(item)].filter(Boolean).join(' ');
+
+export const pressNativeListItem = ({ disabled, disabledReason, onPress, title }: IListItem) => {
+	if (disabled && disabledReason) {
+		EventEmitter.emit(LISTENER, { message: disabledReason });
+		return;
+	}
+	if (!disabled) {
+		onPress?.(title);
+	}
+};
diff --git a/app/containers/List/native/rowMarkers.ts b/app/containers/List/native/rowMarkers.ts
new file mode 100644
index 00000000000..14e3e2e595b
--- /dev/null
+++ b/app/containers/List/native/rowMarkers.ts
@@ -0,0 +1,16 @@
+import { type ComponentType } from 'react';
+
+const createComponentMarker = () => {
+	const markedTypes = new WeakSet<object>();
+	const mark = <Component extends ComponentType<any>>(component: Component): Component => {
+		markedTypes.add(component);
+		return component;
+	};
+	const isMarked = (type: unknown) =>
+		(typeof type === 'function' || (typeof type === 'object' && type !== null)) && markedTypes.has(type);
+	return [mark, isMarked] as const;
+};
+
+export const [asNativeListRow, isNativeListRow] = createComponentMarker();
+
+export const [asNativeListSection, isNativeListSection] = createComponentMarker();
diff --git a/app/containers/List/native/types.ts b/app/containers/List/native/types.ts
new file mode 100644
index 00000000000..956d344c24d
--- /dev/null
+++ b/app/containers/List/native/types.ts
@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+
+import { type IListItem } from '../ListItem';
+
+export interface INativeListItem {
+	item: IListItem;
+}
+
+export interface INativeListSection {
+	children: ReactNode;
+	title?: string;
+	translateTitle?: boolean;
+}
+
+export interface INativeListPickerOption {
+	label: string;
+	value: string;
+	testID?: string;
+}
+
+export interface INativeListPicker {
+	title: string;
+	testID?: string;
+	options: INativeListPickerOption[];
+	selection: string;
+	onSelectionChange: (value: string) => void;
+}
diff --git a/app/containers/Loading/index.tsx b/app/containers/Loading/index.tsx
index 9d579450bd8..4e356e0acdf 100644
--- a/app/containers/Loading/index.tsx
+++ b/app/containers/Loading/index.tsx
@@ -110,7 +110,7 @@ const Loading = (): ReactElement | null => {
 					<Animated.View
 						style={[
 							{
-								...StyleSheet.absoluteFillObject,
+								...StyleSheet.absoluteFill,
 								backgroundColor: colors.backdropColor
 							},
 							animatedOpacity
diff --git a/app/containers/LoginServices/LoginServices.test.tsx b/app/containers/LoginServices/LoginServices.test.tsx
index a1c3fc22c02..4c631628f97 100644
--- a/app/containers/LoginServices/LoginServices.test.tsx
+++ b/app/containers/LoginServices/LoginServices.test.tsx
@@ -18,9 +18,11 @@ generateSnapshots(stories);
 
 jest.mock('./serviceLogin', () => ({}));
 
-jest.mock('react-native/Libraries/Linking/Linking', () => ({
-	openURL: jest.fn()
-}));
+jest.mock('react-native/Libraries/Linking/Linking', () => {
+	const linking = { openURL: jest.fn() };
+
+	return { ...linking, default: linking };
+});
 
 const SERVER = 'https://demo.rocket.chat';
 
diff --git a/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap b/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap
index da8fdb96eda..34dd5b74a58 100644
--- a/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap
+++ b/app/containers/LoginServices/__snapshots__/LoginServices.test.tsx.snap
@@ -2,57 +2,66 @@
 
 exports[`Story Snapshots: Separators should match snapshot 1`] = `
 [
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="More options"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 0,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#E4E7EA",
+        },
+        {},
+        {
+          "marginBottom": 0,
         },
       ]
     }
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="More options"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -74,9 +83,9 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
     >
       More options
     </Text>
-  </RNGestureHandlerButton>,
+  </View>,
   <View
-    accessible={true}
+    importantForAccessibility="no"
     style={
       {
         "alignItems": "center",
@@ -99,6 +108,9 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
       }
     />
     <Text
+      accessibilityLabel="OR"
+      accessibilityRole="text"
+      accessible={false}
       style={
         [
           {
@@ -134,57 +146,66 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
       }
     />
   </View>,
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="Less options"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#E4E7EA",
-          "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 0,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#E4E7EA",
+        },
+        {},
+        {
+          "marginBottom": 0,
         },
       ]
     }
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="Less options"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -206,9 +227,9 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
     >
       Less options
     </Text>
-  </RNGestureHandlerButton>,
+  </View>,
   <View
-    accessible={true}
+    importantForAccessibility="no"
     style={
       {
         "alignItems": "center",
@@ -231,6 +252,9 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
       }
     />
     <Text
+      accessibilityLabel="OR"
+      accessibilityRole="text"
+      accessible={false}
       style={
         [
           {
@@ -271,57 +295,64 @@ exports[`Story Snapshots: Separators should match snapshot 1`] = `
 
 exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
 [
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="Login on web"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 12,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#156FF5",
         },
+        {},
+        undefined,
       ]
     }
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="Login on web"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -343,7 +374,7 @@ exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
     >
       Login on web
     </Text>
-  </RNGestureHandlerButton>,
+  </View>,
   <ExternalKeyboardView
     canBeFocused={true}
     enableA11yFocus={false}
@@ -366,60 +397,64 @@ exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessibilityLabel="Continue with Github"
         accessible={true}
@@ -508,7 +543,7 @@ exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -532,60 +567,64 @@ exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessibilityLabel="Continue with Gitlab"
         accessible={true}
@@ -674,7 +713,7 @@ exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -698,60 +737,64 @@ exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessibilityLabel="Continue with Google"
         accessible={true}
@@ -840,64 +883,71 @@ exports[`Story Snapshots: ServiceListCollapsed should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
 ]
 `;
 
 exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
 [
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="Login on web"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 12,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#156FF5",
         },
+        {},
+        undefined,
       ]
     }
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="Login on web"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -919,7 +969,7 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
     >
       Login on web
     </Text>
-  </RNGestureHandlerButton>,
+  </View>,
   <ExternalKeyboardView
     canBeFocused={true}
     enableA11yFocus={false}
@@ -942,60 +992,64 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessibilityLabel="Continue with Github"
         accessible={true}
@@ -1084,7 +1138,7 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1108,60 +1162,64 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessibilityLabel="Continue with Gitlab"
         accessible={true}
@@ -1250,7 +1308,7 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1274,60 +1332,64 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessibilityLabel="Continue with Google"
         accessible={true}
@@ -1416,7 +1478,7 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1440,60 +1502,64 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#E4E7EA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessibilityLabel="Continue with Apple"
         accessible={true}
@@ -1582,7 +1648,7 @@ exports[`Story Snapshots: ServiceListUncollapsed should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
 ]
 `;
@@ -1611,60 +1677,64 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#F7F8FA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessible={true}
         style={{}}
@@ -1752,7 +1822,7 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1776,60 +1846,64 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#F7F8FA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessible={true}
         style={{}}
@@ -1917,7 +1991,7 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1941,60 +2015,64 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#F7F8FA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessible={true}
         style={{}}
@@ -2082,7 +2160,7 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -2106,60 +2184,64 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.5}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#F7F8FA",
-            "borderRadius": 4,
-            "margin": undefined,
-            "marginBottom": 10,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": 10,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#F7F8FA",
+              "borderRadius": 4,
+            },
+          ],
+          undefined,
         ]
       }
       underlayColor="#FFFFFF"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "#FFFFFF",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <View
         accessible={true}
         style={{}}
@@ -2247,7 +2329,7 @@ exports[`Story Snapshots: ServicesList should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
 ]
 `;
diff --git a/app/containers/MediaCallHeader/MediaCallHeader.tsx b/app/containers/MediaCallHeader/MediaCallHeader.tsx
index 43839f75159..d24f9f6b664 100644
--- a/app/containers/MediaCallHeader/MediaCallHeader.tsx
+++ b/app/containers/MediaCallHeader/MediaCallHeader.tsx
@@ -9,6 +9,7 @@ import EndCall from './components/EndCall';
 import { useCallStore, useControlsVisible } from '~/lib/services/voip/useCallStore';
 import { Content } from './components/Content';
 import { CONTROLS_ANIMATION_DURATION } from '~/views/CallView/styles';
+import { hasNativeHeaderBar } from '~/lib/methods/helpers/deviceInfo';
 
 const styles = StyleSheet.create({
 	header: {
@@ -49,6 +50,9 @@ const MediaCallHeader = () => {
 	};
 
 	if (!call) {
+		if (hasNativeHeaderBar) {
+			return null;
+		}
 		return <View style={defaultHeaderStyle} testID='media-call-header-empty' />;
 	}
 
diff --git a/app/containers/MediaCallHeader/MediaCallHeader.test.tsx b/app/containers/MediaCallHeader/__tests__/MediaCallHeader.test.tsx
similarity index 90%
rename from app/containers/MediaCallHeader/MediaCallHeader.test.tsx
rename to app/containers/MediaCallHeader/__tests__/MediaCallHeader.test.tsx
index c9695f474ef..99b4346b057 100644
--- a/app/containers/MediaCallHeader/MediaCallHeader.test.tsx
+++ b/app/containers/MediaCallHeader/__tests__/MediaCallHeader.test.tsx
@@ -2,15 +2,21 @@ import { fireEvent, render } from '@testing-library/react-native';
 import { Provider } from 'react-redux';
 import { type ReactNode } from 'react';
 
-import MediaCallHeader from './MediaCallHeader';
+import MediaCallHeader from '../MediaCallHeader';
 import { navigateToCallRoom } from '~/lib/services/voip/navigateToCallRoom';
 import { useCallStore } from '~/lib/services/voip/useCallStore';
 import { mockedStore } from '~/reducers/mockedStore';
-import * as stories from './MediaCallHeader.stories';
+import * as stories from '../MediaCallHeader.stories';
 import { generateSnapshots } from '~/.rnstorybook/generateSnapshots';
 
 const mockNavigateToCallRoom = jest.mocked(navigateToCallRoom);
 
+let mockHasNativeHeaderBar = false;
+jest.mock('~/lib/methods/helpers/deviceInfo', () => {
+	const actual = jest.requireActual('~/lib/methods/helpers/deviceInfo');
+	return Object.defineProperty({ ...actual }, 'hasNativeHeaderBar', { get: () => mockHasNativeHeaderBar });
+});
+
 jest.mock('~/lib/services/voip/navigateToCallRoom', () => ({
 	navigateToCallRoom: jest.fn().mockResolvedValue(undefined)
 }));
@@ -94,6 +100,19 @@ describe('MediaCallHeader', () => {
 		expect(queryByTestId('media-call-header-end')).toBeNull();
 	});
 
+	it('should render nothing on the native header bar when there is no call', () => {
+		mockHasNativeHeaderBar = true;
+		useCallStore.setState({ call: null });
+		const { toJSON } = render(
+			<Wrapper>
+				<MediaCallHeader />
+			</Wrapper>
+		);
+
+		expect(toJSON()).toBeNull();
+		mockHasNativeHeaderBar = false;
+	});
+
 	it('should render empty placeholder when native accepted but call not bound yet (before answerCall completes)', () => {
 		useCallStore.getState().setNativeAcceptedCallId('e3246c4d-d23a-412f-8a8b-37ec9f29ef1a');
 		const { getByTestId, queryByTestId } = render(
diff --git a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap b/app/containers/MediaCallHeader/__tests__/__snapshots__/MediaCallHeader.test.tsx.snap
similarity index 76%
rename from app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
rename to app/containers/MediaCallHeader/__tests__/__snapshots__/MediaCallHeader.test.tsx.snap
index 3c951d72160..2eb8ded6cc7 100644
--- a/app/containers/MediaCallHeader/__snapshots__/MediaCallHeader.test.tsx.snap
+++ b/app/containers/MediaCallHeader/__tests__/__snapshots__/MediaCallHeader.test.tsx.snap
@@ -46,14 +46,29 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -62,32 +77,30 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-collapse"
       >
         <View
-          accessibilityLabel="[missing "en.Minimize" translation]"
+          accessibilityLabel="Minimize"
           accessible={true}
           style={
             {
               "opacity": 1,
             }
           }
+          testID="media-call-header-collapse"
         >
           <Text
             allowFontScaling={false}
@@ -116,7 +129,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
     <View
       accessibilityState={
@@ -255,14 +268,29 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -271,23 +299,20 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-end"
       >
         <View
           accessibilityLabel="End"
@@ -297,6 +322,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
               "opacity": 1,
             }
           }
+          testID="media-call-header-end"
         >
           <Text
             allowFontScaling={false}
@@ -325,7 +351,7 @@ exports[`Story Snapshots: ActiveCall should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -377,14 +403,29 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -393,32 +434,30 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-collapse"
       >
         <View
-          accessibilityLabel="[missing "en.Minimize" translation]"
+          accessibilityLabel="Minimize"
           accessible={true}
           style={
             {
               "opacity": 1,
             }
           }
+          testID="media-call-header-collapse"
         >
           <Text
             allowFontScaling={false}
@@ -447,7 +486,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
     <View
       accessibilityState={
@@ -586,14 +625,29 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -602,23 +656,20 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-end"
       >
         <View
           accessibilityLabel="End"
@@ -628,6 +679,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
               "opacity": 1,
             }
           }
+          testID="media-call-header-end"
         >
           <Text
             allowFontScaling={false}
@@ -656,7 +708,7 @@ exports[`Story Snapshots: Collapsed should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -708,14 +760,29 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -724,32 +791,30 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-collapse"
       >
         <View
-          accessibilityLabel="[missing "en.Minimize" translation]"
+          accessibilityLabel="Minimize"
           accessible={true}
           style={
             {
               "opacity": 1,
             }
           }
+          testID="media-call-header-collapse"
         >
           <Text
             allowFontScaling={false}
@@ -778,7 +843,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
     <View
       accessibilityState={
@@ -897,6 +962,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Connecting..."
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -937,14 +1005,29 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -953,23 +1036,20 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-end"
       >
         <View
           accessibilityLabel="End"
@@ -979,6 +1059,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
               "opacity": 1,
             }
           }
+          testID="media-call-header-end"
         >
           <Text
             allowFontScaling={false}
@@ -1007,7 +1088,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -1059,14 +1140,29 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1075,32 +1171,30 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-collapse"
       >
         <View
-          accessibilityLabel="[missing "en.Minimize" translation]"
+          accessibilityLabel="Minimize"
           accessible={true}
           style={
             {
               "opacity": 1,
             }
           }
+          testID="media-call-header-collapse"
         >
           <Text
             allowFontScaling={false}
@@ -1129,7 +1223,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
     <View
       accessibilityState={
@@ -1268,14 +1362,29 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1284,23 +1393,20 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-end"
       >
         <View
           accessibilityLabel="End"
@@ -1310,6 +1416,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
               "opacity": 1,
             }
           }
+          testID="media-call-header-end"
         >
           <Text
             allowFontScaling={false}
@@ -1338,7 +1445,7 @@ exports[`Story Snapshots: Focused should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -1410,14 +1517,29 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1426,32 +1548,30 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-collapse"
       >
         <View
-          accessibilityLabel="[missing "en.Minimize" translation]"
+          accessibilityLabel="Minimize"
           accessible={true}
           style={
             {
               "opacity": 1,
             }
           }
+          testID="media-call-header-collapse"
         >
           <Text
             allowFontScaling={false}
@@ -1480,7 +1600,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
     <View
       accessibilityState={
@@ -1603,6 +1723,9 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="On hold"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1643,14 +1766,29 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1659,23 +1797,20 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-end"
       >
         <View
           accessibilityLabel="End"
@@ -1685,6 +1820,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
               "opacity": 1,
             }
           }
+          testID="media-call-header-end"
         >
           <Text
             allowFontScaling={false}
@@ -1713,7 +1849,7 @@ exports[`Story Snapshots: WithRemoteHeld should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -1765,14 +1901,29 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1781,32 +1932,30 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-collapse"
       >
         <View
-          accessibilityLabel="[missing "en.Minimize" translation]"
+          accessibilityLabel="Minimize"
           accessible={true}
           style={
             {
               "opacity": 1,
             }
           }
+          testID="media-call-header-collapse"
         >
           <Text
             allowFontScaling={false}
@@ -1835,7 +1984,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
     <View
       accessibilityState={
@@ -1958,6 +2107,9 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Muted"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1998,14 +2150,29 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2014,23 +2181,20 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[MockFunction]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 6,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 6,
+          }
         }
-        testID="media-call-header-end"
       >
         <View
           accessibilityLabel="End"
@@ -2040,6 +2204,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
               "opacity": 1,
             }
           }
+          testID="media-call-header-end"
         >
           <Text
             allowFontScaling={false}
@@ -2068,7 +2233,7 @@ exports[`Story Snapshots: WithRemoteMuted should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
diff --git a/app/containers/MediaCallHeader/components/Subtitle.tsx b/app/containers/MediaCallHeader/components/Subtitle.tsx
index da811423886..c7b755f9ec1 100644
--- a/app/containers/MediaCallHeader/components/Subtitle.tsx
+++ b/app/containers/MediaCallHeader/components/Subtitle.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import { useCallStore } from '~/lib/services/voip/useCallStore';
@@ -40,12 +41,12 @@ const Subtitle = () => {
 	}
 
 	return (
-		<Text
+		<PlainText
 			style={[styles.headerSubtitle, { color: colors.fontSecondaryInfo }]}
 			testID='call-view-header-subtitle'
 			numberOfLines={1}>
 			{subtitle}
-		</Text>
+		</PlainText>
 	);
 };
 
diff --git a/app/containers/MessageActions/Header.tsx b/app/containers/MessageActions/Header.tsx
index c67d9d1f4a8..fb7b96bba95 100644
--- a/app/containers/MessageActions/Header.tsx
+++ b/app/containers/MessageActions/Header.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { FlatList, StyleSheet, Text, View, useWindowDimensions } from 'react-native';
+import { FlatList, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type TSupportedThemes, useTheme } from '~/theme';
 import { themes } from '~/lib/constants/colors';
@@ -80,7 +81,7 @@ const HeaderItem = ({ item, onReaction, theme }: THeaderItem) => {
 			{customEmoji ? (
 				<CustomEmoji style={styles.customEmoji} emoji={customEmoji} />
 			) : (
-				<Text style={styles.headerIcon}>{formatShortnameToUnicode(`:${emojiName}:`)}</Text>
+				<PlainText style={styles.headerIcon}>{formatShortnameToUnicode(`:${emojiName}:`)}</PlainText>
 			)}
 		</Touch>
 	);
diff --git a/app/containers/MessageActions/MessageActionsMenuContext.ts b/app/containers/MessageActions/MessageActionsMenuContext.ts
new file mode 100644
index 00000000000..6a2285b3bbd
--- /dev/null
+++ b/app/containers/MessageActions/MessageActionsMenuContext.ts
@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+import { type TActionSheetOptionsItem } from '../ActionSheet';
+import { type TAnyMessageModel } from '~/definitions';
+
+export interface IMessageActionsMenu {
+	getMenuOptions: (message: TAnyMessageModel) => TActionSheetOptionsItem[];
+}
+
+export const MessageActionsMenuContext = createContext<IMessageActionsMenu | null>(null);
+
+export const useMessageActionsMenu = (): IMessageActionsMenu | null => useContext(MessageActionsMenuContext);
diff --git a/app/containers/MessageActions/__tests__/useMessageActionPermissions.test.ts b/app/containers/MessageActions/__tests__/useMessageActionPermissions.test.ts
new file mode 100644
index 00000000000..d1c9f0b75c8
--- /dev/null
+++ b/app/containers/MessageActions/__tests__/useMessageActionPermissions.test.ts
@@ -0,0 +1,50 @@
+import { renderHook, waitFor } from '@testing-library/react-native';
+
+import { hasPermission } from '~/lib/methods/helpers';
+import { useMessageActionPermissions } from '../useMessageActionOptions';
+
+jest.mock('~/lib/methods/helpers', () => ({
+	...jest.requireActual('~/lib/methods/helpers'),
+	hasPermission: jest.fn()
+}));
+
+const mockedHasPermission = jest.mocked(hasPermission);
+const editPermission = ['admin'];
+const deletePermission = ['owner'];
+
+describe('useMessageActionPermissions', () => {
+	beforeEach(() => {
+		mockedHasPermission.mockReset();
+		mockedHasPermission.mockResolvedValue([true, false, false, true, false, false, false]);
+	});
+
+	it('maps the permission results', async () => {
+		const { result } = renderHook(() => useMessageActionPermissions([editPermission, deletePermission], 'rid'));
+
+		await waitFor(() => expect(result.current.hasEditPermission).toBe(true));
+		expect(result.current.hasPinPermission).toBe(true);
+		expect(result.current.hasDeletePermission).toBe(false);
+	});
+
+	it('loads once when rerendered with a new list holding the same permissions', async () => {
+		const { result, rerender } = renderHook(() => useMessageActionPermissions([editPermission, deletePermission], 'rid'));
+
+		await waitFor(() => expect(result.current.hasEditPermission).toBe(true));
+		rerender({});
+		rerender({});
+
+		expect(mockedHasPermission).toHaveBeenCalledTimes(1);
+	});
+
+	it('reloads when the room changes', async () => {
+		const { result, rerender } = renderHook(({ rid }: { rid: string }) => useMessageActionPermissions([editPermission], rid), {
+			initialProps: { rid: 'first' }
+		});
+
+		await waitFor(() => expect(result.current.hasEditPermission).toBe(true));
+		rerender({ rid: 'second' });
+
+		await waitFor(() => expect(mockedHasPermission).toHaveBeenCalledTimes(2));
+		expect(mockedHasPermission).toHaveBeenLastCalledWith(expect.any(Array), 'second');
+	});
+});
diff --git a/app/containers/MessageActions/index.tsx b/app/containers/MessageActions/index.tsx
index 50c303242ba..9d83c75e903 100644
--- a/app/containers/MessageActions/index.tsx
+++ b/app/containers/MessageActions/index.tsx
@@ -1,18 +1,8 @@
-import { forwardRef, useImperativeHandle, memo } from 'react';
-import { Alert, Share } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
+import { forwardRef, useImperativeHandle, memo, type ReactNode } from 'react';
 import { connect } from 'react-redux';
 
-import dayjs from '~/lib/dayjs';
-import database from '~/lib/database';
-import { getSubscriptionByRoomId } from '~/lib/database/services/Subscription';
 import I18n from '~/i18n';
-import log, { logEvent } from '~/lib/methods/helpers/log';
-import Navigation from '~/lib/navigation/appNavigation';
-import { getMessageTranslation } from '../message/utils';
-import { LISTENER } from '../Toast';
-import EventEmitter from '~/lib/methods/helpers/events';
-import { showConfirmationAlert } from '~/lib/methods/helpers/info';
+import { logEvent } from '~/lib/methods/helpers/log';
 import { type TActionSheetOptionsItem, useActionSheet, ACTION_SHEET_ANIMATION_DURATION } from '../ActionSheet';
 import { useLastFocusedMessageRef } from '~/lib/a11y/useLastFocusedMessageRef';
 import Header, { HEADER_HEIGHT, type IHeader } from './Header';
@@ -24,26 +14,14 @@ import {
 	type TAnyMessageModel,
 	type TSubscriptionModel
 } from '~/definitions';
-import { getPermalinkMessage } from '~/lib/methods/getPermalinks';
-import { getQuoteMessageLink } from '~/lib/methods/getQuoteMessageLink';
-import { compareServerVersion, getRoomTitle, getUidDirectMessage, hasPermission } from '~/lib/methods/helpers';
-import {
-	deleteMessage,
-	markAsUnread,
-	toggleStarMessage,
-	togglePinMessage,
-	translateMessage,
-	reportMessage
-} from '~/lib/services/restApi';
-import { createDirectMessage } from '~/lib/methods/createDirectMessage';
 import { withMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { useMessageActionOptions, useMessageActionPermissions } from './useMessageActionOptions';
+import { MessageActionsMenuContext } from './MessageActionsMenuContext';
 
 // Extra delay on top of the action sheet animation so accessibility focus is restored
 // only after the sheet is fully dismissed.
 const REFOCUS_BUFFER = 50;
 
-const isVideoConf = (message: TAnyMessageModel) => message.t === 'videoconf';
-
 export interface IMessageActionsProps {
 	getRoom: () => TSubscriptionModel;
 	tmid?: string;
@@ -71,12 +49,12 @@ export interface IMessageActionsProps {
 	pinMessagePermission?: string[];
 	createDirectMessagePermission?: string[];
 	createDiscussionOtherUserPermission?: string[];
+	children?: ReactNode;
 }
 
 export interface IMessageActions {
 	showMessageActions: (message: TAnyMessageModel) => Promise<void>;
 }
-
 const MessageActions = memo(
 	forwardRef<IMessageActions, IMessageActionsProps>(
 		(
@@ -106,235 +84,43 @@ const MessageActions = memo(
 				pinMessagePermission,
 				createDirectMessagePermission,
 				createDiscussionOtherUserPermission,
-				serverVersion
+				serverVersion,
+				children
 			},
 			ref
 		) => {
-			let permissions = {
-				hasEditPermission: false,
-				hasDeletePermission: false,
-				hasForceDeletePermission: false,
-				hasPinPermission: false,
-				hasDeleteOwnPermission: false,
-				hasCreateDirectMessagePermission: false,
-				hasCreateDiscussionOtherUserPermission: false
-			};
 			const { showActionSheet, hideActionSheet } = useActionSheet();
 			const { restoreFocusOnClose } = useLastFocusedMessageRef();
+			const { getPermissions, getOptions, permissionList } = useMessageActionOptions({
+				getRoom,
+				tmid,
+				user,
+				editInit,
+				replyInit,
+				quoteInit,
+				jumpToMessage,
+				isReadOnly,
+				Message_AllowDeleting,
+				Message_AllowDeleting_BlockDeleteInMinutes,
+				Message_AllowEditing,
+				Message_AllowEditing_BlockEditInMinutes,
+				Message_AllowPinning,
+				Message_AllowStarring,
+				Message_Read_Receipt_Store_Users,
+				isMasterDetail,
+				editMessagePermission,
+				deleteMessagePermission,
+				forceDeleteMessagePermission,
+				deleteOwnMessagePermission,
+				pinMessagePermission,
+				createDirectMessagePermission,
+				createDiscussionOtherUserPermission,
+				serverVersion
+			});
 
-			const getPermissions = async () => {
-				try {
-					const permission = [
-						editMessagePermission,
-						deleteMessagePermission,
-						forceDeleteMessagePermission,
-						pinMessagePermission,
-						deleteOwnMessagePermission,
-						createDirectMessagePermission,
-						createDiscussionOtherUserPermission
-					];
-					const result = await hasPermission(permission, getRoom().rid);
-					permissions = {
-						hasEditPermission: result[0],
-						hasDeletePermission: result[1],
-						hasForceDeletePermission: result[2],
-						hasPinPermission: result[3],
-						hasDeleteOwnPermission: result[4],
-						hasCreateDirectMessagePermission: result[5],
-						hasCreateDiscussionOtherUserPermission: result[6]
-					};
-				} catch {
-					// Do nothing
-				}
-			};
-
-			const isOwn = (message: TAnyMessageModel) => message.u && message.u._id === user.id;
-
-			const allowEdit = (message: TAnyMessageModel) => {
-				if (isReadOnly) {
-					return false;
-				}
-				const editOwn = isOwn(message);
-
-				if (!(permissions.hasEditPermission || (Message_AllowEditing !== false && editOwn))) {
-					return false;
-				}
-				const blockEditInMinutes = Message_AllowEditing_BlockEditInMinutes;
-				if (blockEditInMinutes) {
-					let msgTs;
-					if (message.ts != null) {
-						msgTs = dayjs(message.ts);
-					}
-					let currentTsDiff = 0;
-					if (msgTs != null) {
-						currentTsDiff = dayjs().diff(msgTs, 'minutes');
-					}
-					return currentTsDiff < blockEditInMinutes;
-				}
-				return true;
-			};
-
-			const allowDelete = (message: TAnyMessageModel) => {
-				if (isReadOnly) {
-					return false;
-				}
-
-				// Prevent from deleting thread start message when positioned inside the thread
-				if (tmid === message.id) {
-					return false;
-				}
-				const deleteOwn = isOwn(message) && permissions.hasDeleteOwnPermission;
-				if (!(permissions.hasDeletePermission || (Message_AllowDeleting && deleteOwn) || permissions.hasForceDeletePermission)) {
-					return false;
-				}
-				if (permissions.hasForceDeletePermission) {
-					return true;
-				}
-				const blockDeleteInMinutes = Message_AllowDeleting_BlockDeleteInMinutes;
-				if (blockDeleteInMinutes != null && blockDeleteInMinutes !== 0) {
-					let msgTs;
-					if (message.ts != null) {
-						msgTs = dayjs(message.ts);
-					}
-					let currentTsDiff = 0;
-					if (msgTs != null) {
-						currentTsDiff = dayjs().diff(msgTs, 'minutes');
-					}
-					return currentTsDiff < blockDeleteInMinutes;
-				}
-				return true;
-			};
-
-			const getPermalink = (message: TAnyMessageModel) => getPermalinkMessage(message);
-
-			const handleReply = (messageId: string) => {
-				logEvent(events.ROOM_MSG_ACTION_REPLY);
-				replyInit(messageId);
-			};
-
-			const handleEdit = (messageId: string) => {
-				logEvent(events.ROOM_MSG_ACTION_EDIT);
-				editInit(messageId);
-			};
-
-			const handleCreateDiscussion = (message: TAnyMessageModel) => {
-				logEvent(events.ROOM_MSG_ACTION_DISCUSSION);
-				const params = { message, channel: getRoom(), showCloseModal: true };
-				if (isMasterDetail) {
-					Navigation.navigate('ModalStackNavigator', { screen: 'CreateDiscussionView', params });
-				} else {
-					Navigation.navigate('NewMessageStackNavigator', { screen: 'CreateDiscussionView', params });
-				}
-			};
-
-			const handleShareMessage = (message: TAnyMessageModel) => {
-				const params = { message };
-				if (isMasterDetail) {
-					Navigation.navigate('ModalStackNavigator', { screen: 'ForwardMessageView', params });
-				} else {
-					Navigation.navigate('NewMessageStackNavigator', { screen: 'ForwardMessageView', params });
-				}
-			};
-
-			const handleUnread = async (message: TAnyMessageModel) => {
-				logEvent(events.ROOM_MSG_ACTION_UNREAD);
-				const { id: messageId, ts } = message;
-				const { rid } = getRoom();
-				try {
-					const db = database.active;
-					const result = await markAsUnread({ messageId });
-					if (result.success) {
-						const subRecord = await getSubscriptionByRoomId(rid);
-						if (!subRecord) {
-							return;
-						}
-
-						await db.write(async () => {
-							try {
-								await subRecord.update(sub => (sub.ls = ts as Date));
-							} catch {
-								// do nothing
-							}
-						});
-					}
-				} catch (e) {
-					log(e);
-				} finally {
-					Navigation.popToTop(isMasterDetail);
-				}
-			};
-
-			const handlePermalink = async (message: TAnyMessageModel) => {
-				logEvent(events.ROOM_MSG_ACTION_PERMALINK);
-				try {
-					const permalink = await getPermalink(message);
-					Clipboard.setString(permalink ?? '');
-					EventEmitter.emit(LISTENER, { message: I18n.t('Permalink_copied_to_clipboard') });
-				} catch {
-					logEvent(events.ROOM_MSG_ACTION_PERMALINK_F);
-				}
-			};
-
-			const handleCopy = async (message: TAnyMessageModel) => {
-				logEvent(events.ROOM_MSG_ACTION_COPY);
-				await Clipboard.setString((message?.attachments?.[0]?.description || message.msg) ?? '');
-				EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
-			};
-
-			const handleShare = async (message: TAnyMessageModel) => {
-				logEvent(events.ROOM_MSG_ACTION_SHARE);
-				try {
-					const permalink = await getPermalink(message);
-					if (permalink) {
-						Share.share({ message: permalink });
-					}
-				} catch {
-					logEvent(events.ROOM_MSG_ACTION_SHARE_F);
-				}
-			};
-
-			const handleQuote = (messageId: string) => {
-				logEvent(events.ROOM_MSG_ACTION_QUOTE);
-				quoteInit(messageId);
-			};
-
-			const handleReplyInDM = async (message: TAnyMessageModel) => {
-				if (message?.u?.username) {
-					const result = await createDirectMessage(message.u.username);
-					if (result.success) {
-						const { room } = result;
-						const params = {
-							rid: room.rid,
-							name: getRoomTitle(room),
-							t: room.t,
-							roomUserId: getUidDirectMessage(room),
-							messageId: message.id
-						};
-						Navigation.replace('RoomView', params);
-					}
-				}
-			};
-
-			const handleStar = async (messageId: string, starred: boolean) => {
-				logEvent(starred ? events.ROOM_MSG_ACTION_UNSTAR : events.ROOM_MSG_ACTION_STAR);
-				try {
-					await toggleStarMessage(messageId, starred);
-					EventEmitter.emit(LISTENER, { message: starred ? I18n.t('Message_unstarred') : I18n.t('Message_starred') });
-				} catch (e) {
-					logEvent(events.ROOM_MSG_ACTION_STAR_F);
-					log(e);
-				}
-			};
+			const menuPermissions = useMessageActionPermissions(permissionList, getRoom().rid);
 
-			const handlePin = async (message: TAnyMessageModel) => {
-				logEvent(events.ROOM_MSG_ACTION_PIN);
-				try {
-					await togglePinMessage(message.id, message.pinned as boolean); // TODO: reevaluate `message.pinned` type on IMessage
-				} catch (e) {
-					logEvent(events.ROOM_MSG_ACTION_PIN_F);
-					log(e);
-				}
-			};
+			const canReact = () => !isReadOnly || !!getRoom().reactWhenReadOnly;
 
 			const handleReaction: IHeader['handleReaction'] = (emoji, message) => {
 				logEvent(events.ROOM_MSG_ACTION_REACTION);
@@ -346,290 +132,34 @@ const MessageActions = memo(
 				hideActionSheet();
 			};
 
-			const handleReadReceipt = (message: TAnyMessageModel) => {
-				if (isMasterDetail) {
-					Navigation.navigate('ModalStackNavigator', { screen: 'ReadReceiptsView', params: { messageId: message.id } });
-				} else {
-					Navigation.navigate('ReadReceiptsView', { messageId: message.id });
+			const getMenuOptions = (message: TAnyMessageModel): TActionSheetOptionsItem[] => {
+				const options = getOptions(message, menuPermissions);
+				if (!canReact()) {
+					return options;
 				}
+				const reactionOption: TActionSheetOptionsItem = {
+					title: I18n.t('Add_reaction'),
+					icon: 'reaction-add',
+					onPress: () => {
+						logEvent(events.ROOM_MSG_ACTION_REACTION);
+						setTimeout(() => reactionInit(message.id), ACTION_SHEET_ANIMATION_DURATION);
+					},
+					testID: 'message-actions-add-reaction'
+				};
+				return [reactionOption, ...options];
 			};
 
-			const handleToggleTranslation = async (message: TAnyMessageModel) => {
-				const room = getRoom();
-				try {
-					if (!room.autoTranslateLanguage) {
-						return;
-					}
-					const db = database.active;
-					await db.write(async () => {
-						await message.update(m => {
-							m.autoTranslate = m.autoTranslate !== null ? !m.autoTranslate : false;
-							m._updatedAt = new Date();
-						});
-					});
-					const translatedMessage = getMessageTranslation(message, room.autoTranslateLanguage);
-					if (!translatedMessage) {
-						await translateMessage(message.id, room.autoTranslateLanguage);
-					}
-				} catch (e) {
-					log(e);
-				}
-			};
-
-			const handleReport = async (message: TAnyMessageModel) => {
-				logEvent(events.ROOM_MSG_ACTION_REPORT);
-				try {
-					await reportMessage(message.id);
-					Alert.alert(I18n.t('Message_Reported'));
-				} catch (e) {
-					logEvent(events.ROOM_MSG_ACTION_REPORT_F);
-					log(e);
-				}
-			};
-
-			const handleDelete = (message: TAnyMessageModel) => {
-				showConfirmationAlert({
-					message: I18n.t('You_will_not_be_able_to_recover_this_message'),
-					confirmationText: I18n.t('Delete'),
-					onPress: async () => {
-						try {
-							logEvent(events.ROOM_MSG_ACTION_DELETE);
-							await deleteMessage(message.id, message.subscription ? message.subscription.id : '');
-						} catch (e) {
-							logEvent(events.ROOM_MSG_ACTION_DELETE_F);
-							log(e);
-						}
-					}
-				});
-			};
-
-			const getConversationOptions = (message: TAnyMessageModel) => {
-				const room = getRoom();
-				const options: TActionSheetOptionsItem[] = [];
-				const videoConfBlock = isVideoConf(message);
-
-				// Edit
-				const isEditAllowed = allowEdit(message);
-				if (!videoConfBlock && (isOwn(message) || isEditAllowed)) {
-					options.push({
-						title: I18n.t('Edit'),
-						icon: 'edit',
-						onPress: () => handleEdit(message.id),
-						enabled: isEditAllowed,
-						testID: 'message-actions-edit'
-					});
-				}
-
-				// Jump to message
-				const quoteMessageLink = getQuoteMessageLink(message.attachments);
-				if (quoteMessageLink && jumpToMessage) {
-					options.push({
-						title: I18n.t('Jump_to_message'),
-						icon: 'jump-to-message',
-						onPress: () => jumpToMessage(quoteMessageLink, true),
-						testID: 'message-actions-jump-to-message'
-					});
-				}
-
-				// Quote
-				if (!isReadOnly && !videoConfBlock) {
-					options.push({
-						title: I18n.t('Quote'),
-						icon: 'quote',
-						onPress: () => handleQuote(message.id),
-						testID: 'message-actions-quote'
-					});
-				}
-
-				// Reply
-				if (!isReadOnly && !tmid) {
-					options.push({
-						title: I18n.t('Reply_in_Thread'),
-						icon: 'threads',
-						onPress: () => handleReply(message.id),
-						testID: 'message-actions-reply-in-thread'
-					});
-				}
-
-				// Reply in DM
-				if (room.t !== 'd' && room.t !== 'l' && !videoConfBlock) {
-					options.push({
-						title: I18n.t('Reply_in_direct_message'),
-						icon: 'arrow-back',
-						onPress: () => handleReplyInDM(message),
-						enabled: permissions.hasCreateDirectMessagePermission && !room.abacAttributes,
-						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
-						testID: 'message-actions-reply-in-dm'
-					});
-				}
-
-				// Create Discussion
-				options.push({
-					title: I18n.t('Start_a_Discussion'),
-					icon: 'discussions',
-					onPress: () => handleCreateDiscussion(message),
-					enabled: permissions.hasCreateDiscussionOtherUserPermission,
-					testID: 'message-actions-create-discussion'
-				});
-
-				return options;
-			};
-
-			const getSharingOptions = (message: TAnyMessageModel) => {
-				const room = getRoom();
-				const options: TActionSheetOptionsItem[] = [];
-				const videoConfBlock = isVideoConf(message);
-
-				// Forward
-				if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.2.0') && !videoConfBlock) {
-					options.push({
-						title: I18n.t('Forward'),
-						icon: 'arrow-forward',
-						onPress: () => handleShareMessage(message),
-						enabled: !room.abacAttributes,
-						disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
-						testID: 'message-actions-forward'
-					});
-				}
-
-				// Get link
-				options.push({
-					title: I18n.t('Get_link'),
-					icon: 'link',
-					onPress: () => handlePermalink(message),
-					enabled: !room.abacAttributes,
-					disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
-					testID: 'message-actions-get-link'
-				});
-
-				// Copy
-				if (!videoConfBlock) {
-					options.push({
-						title: I18n.t('Copy'),
-						icon: 'copy',
-						onPress: () => handleCopy(message),
-						testID: 'message-actions-copy'
-					});
-				}
-
-				// Share
-				options.push({
-					title: I18n.t('Share'),
-					icon: 'share',
-					onPress: () => handleShare(message),
-					testID: 'message-actions-share'
-				});
-
-				return options;
-			};
-
-			const getMessageStateOptions = (message: TAnyMessageModel) => {
-				const options: TActionSheetOptionsItem[] = [];
-				const videoConfBlock = isVideoConf(message);
-				const isFromAnotherUser = !!message.u && message.u._id !== user.id;
-
-				// Pin
-				if (Message_AllowPinning && !videoConfBlock) {
-					options.push({
-						title: I18n.t(message.pinned ? 'Unpin' : 'Pin'),
-						icon: 'pin',
-						onPress: () => handlePin(message),
-						enabled: permissions?.hasPinPermission,
-						testID: `message-actions-${message.pinned ? 'unpin' : 'pin'}`
-					});
-				}
-
-				// Star
-				if (Message_AllowStarring && !videoConfBlock) {
-					options.push({
-						title: I18n.t(message.starred ? 'Unstar' : 'Star'),
-						icon: message.starred ? 'star-filled' : 'star',
-						onPress: () => handleStar(message.id, message.starred || false),
-						testID: `message-actions-${message.starred ? 'unstar' : 'star'}`
-					});
-				}
-
-				// Mark as unread
-				if (isFromAnotherUser) {
-					options.push({
-						title: I18n.t('Mark_unread'),
-						icon: 'flag',
-						onPress: () => handleUnread(message),
-						testID: 'message-actions-mark-unread'
-					});
-				}
-
-				// Read Receipts
-				if (Message_Read_Receipt_Store_Users) {
-					options.push({
-						title: I18n.t('Read_Receipt'),
-						icon: 'info',
-						onPress: () => handleReadReceipt(message),
-						testID: 'message-actions-read-receipt'
-					});
-				}
-
-				// Toggle Auto-translate
-				if (getRoom().autoTranslate && isFromAnotherUser) {
-					options.push({
-						title: I18n.t(message.autoTranslate !== false ? 'View_Original' : 'Translate'),
-						icon: 'language',
-						onPress: () => handleToggleTranslation(message),
-						testID: 'message-actions-toggle-translation'
-					});
-				}
-
-				return options;
-			};
-
-			const getModerationOptions = (message: TAnyMessageModel) => {
-				const options: TActionSheetOptionsItem[] = [];
-
-				// Report
-				options.push({
-					title: I18n.t('Report'),
-					icon: 'warning',
-					danger: true,
-					onPress: () => handleReport(message),
-					testID: 'message-actions-report'
-				});
-
-				// Delete
-				const isDeleteAllowed = allowDelete(message);
-				if (isOwn(message) || isDeleteAllowed) {
-					options.push({
-						title: I18n.t('Delete'),
-						icon: 'delete',
-						danger: true,
-						onPress: () => handleDelete(message),
-						enabled: isDeleteAllowed,
-						testID: 'message-actions-delete'
-					});
-				}
-
-				return options;
-			};
-
-			const getOptions = (message: TAnyMessageModel): TActionSheetOptionsItem[] => [
-				...getConversationOptions(message),
-				...getSharingOptions(message),
-				...getMessageStateOptions(message),
-				...getModerationOptions(message)
-			];
-
 			const showMessageActions = async (message: TAnyMessageModel) => {
 				logEvent(events.ROOM_SHOW_MSG_ACTIONS);
-				await getPermissions();
+				const permissions = await getPermissions();
 				// Buffer so focus lands after the action sheet is fully dismissed, not mid-animation.
 				const onClose = restoreFocusOnClose(ACTION_SHEET_ANIMATION_DURATION + REFOCUS_BUFFER);
 				showActionSheet({
-					options: getOptions(message),
+					options: getOptions(message, permissions),
 					headerHeight: HEADER_HEIGHT,
 					customHeader: (
 						<>
-							{!isReadOnly || getRoom().reactWhenReadOnly ? (
-								<Header handleReaction={handleReaction} isMasterDetail={isMasterDetail} message={message} />
-							) : null}
+							{canReact() ? <Header handleReaction={handleReaction} isMasterDetail={isMasterDetail} message={message} /> : null}
 						</>
 					),
 					onClose
@@ -638,7 +168,7 @@ const MessageActions = memo(
 
 			useImperativeHandle(ref, () => ({ showMessageActions }));
 
-			return null;
+			return <MessageActionsMenuContext.Provider value={{ getMenuOptions }}>{children}</MessageActionsMenuContext.Provider>;
 		}
 	)
 );
diff --git a/app/containers/MessageActions/useMessageActionOptions.ts b/app/containers/MessageActions/useMessageActionOptions.ts
new file mode 100644
index 00000000000..00fbab4c0bf
--- /dev/null
+++ b/app/containers/MessageActions/useMessageActionOptions.ts
@@ -0,0 +1,615 @@
+import { useEffect, useState } from 'react';
+import { Alert, Share } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+import dayjs from '~/lib/dayjs';
+import database from '~/lib/database';
+import { getSubscriptionByRoomId } from '~/lib/database/services/Subscription';
+import I18n from '~/i18n';
+import log, { logEvent } from '~/lib/methods/helpers/log';
+import Navigation from '~/lib/navigation/appNavigation';
+import { getMessageTranslation } from '../message/utils';
+import { LISTENER } from '../Toast';
+import EventEmitter from '~/lib/methods/helpers/events';
+import { showConfirmationAlert } from '~/lib/methods/helpers/info';
+import { type TActionSheetOptionsItem } from '../ActionSheet';
+import events from '~/lib/methods/helpers/log/events';
+import { type TAnyMessageModel } from '~/definitions';
+import { getPermalinkMessage } from '~/lib/methods/getPermalinks';
+import { getQuoteMessageLink } from '~/lib/methods/getQuoteMessageLink';
+import { compareServerVersion, getRoomTitle, getUidDirectMessage, hasPermission } from '~/lib/methods/helpers';
+import {
+	deleteMessage,
+	markAsUnread,
+	toggleStarMessage,
+	togglePinMessage,
+	translateMessage,
+	reportMessage
+} from '~/lib/services/restApi';
+import { createDirectMessage } from '~/lib/methods/createDirectMessage';
+import { type IMessageActionsProps } from '.';
+
+export interface IMessageActionPermissions {
+	hasEditPermission: boolean;
+	hasDeletePermission: boolean;
+	hasForceDeletePermission: boolean;
+	hasPinPermission: boolean;
+	hasDeleteOwnPermission: boolean;
+	hasCreateDirectMessagePermission: boolean;
+	hasCreateDiscussionOtherUserPermission: boolean;
+}
+
+export const DEFAULT_MESSAGE_ACTION_PERMISSIONS: IMessageActionPermissions = {
+	hasEditPermission: false,
+	hasDeletePermission: false,
+	hasForceDeletePermission: false,
+	hasPinPermission: false,
+	hasDeleteOwnPermission: false,
+	hasCreateDirectMessagePermission: false,
+	hasCreateDiscussionOtherUserPermission: false
+};
+
+const loadPermissions = async (permissionList: (string[] | undefined)[], rid: string): Promise<IMessageActionPermissions> => {
+	try {
+		const result = await hasPermission(permissionList, rid);
+		return {
+			hasEditPermission: result[0],
+			hasDeletePermission: result[1],
+			hasForceDeletePermission: result[2],
+			hasPinPermission: result[3],
+			hasDeleteOwnPermission: result[4],
+			hasCreateDirectMessagePermission: result[5],
+			hasCreateDiscussionOtherUserPermission: result[6]
+		};
+	} catch {
+		return DEFAULT_MESSAGE_ACTION_PERMISSIONS;
+	}
+};
+
+export const useMessageActionPermissions = (permissionList: (string[] | undefined)[], rid: string): IMessageActionPermissions => {
+	const [permissions, setPermissions] = useState(DEFAULT_MESSAGE_ACTION_PERMISSIONS);
+	const [
+		editMessagePermission,
+		deleteMessagePermission,
+		forceDeleteMessagePermission,
+		pinMessagePermission,
+		deleteOwnMessagePermission,
+		createDirectMessagePermission,
+		createDiscussionOtherUserPermission
+	] = permissionList;
+
+	useEffect(() => {
+		let active = true;
+		loadPermissions(
+			[
+				editMessagePermission,
+				deleteMessagePermission,
+				forceDeleteMessagePermission,
+				pinMessagePermission,
+				deleteOwnMessagePermission,
+				createDirectMessagePermission,
+				createDiscussionOtherUserPermission
+			],
+			rid
+		).then(loaded => {
+			if (active) {
+				setPermissions(loaded);
+			}
+		});
+		return () => {
+			active = false;
+		};
+	}, [
+		editMessagePermission,
+		deleteMessagePermission,
+		forceDeleteMessagePermission,
+		pinMessagePermission,
+		deleteOwnMessagePermission,
+		createDirectMessagePermission,
+		createDiscussionOtherUserPermission,
+		rid
+	]);
+
+	return permissions;
+};
+
+const isVideoConf = (message: TAnyMessageModel) => message.t === 'videoconf';
+
+export const useMessageActionOptions = ({
+	getRoom,
+	tmid,
+	user,
+	editInit,
+	replyInit,
+	quoteInit,
+	jumpToMessage,
+	isReadOnly,
+	Message_AllowDeleting,
+	Message_AllowDeleting_BlockDeleteInMinutes,
+	Message_AllowEditing,
+	Message_AllowEditing_BlockEditInMinutes,
+	Message_AllowPinning,
+	Message_AllowStarring,
+	Message_Read_Receipt_Store_Users,
+	isMasterDetail,
+	editMessagePermission,
+	deleteMessagePermission,
+	forceDeleteMessagePermission,
+	deleteOwnMessagePermission,
+	pinMessagePermission,
+	createDirectMessagePermission,
+	createDiscussionOtherUserPermission,
+	serverVersion
+}: Omit<IMessageActionsProps, 'reactionInit' | 'onReactionPress'>) => {
+	const permissionList = [
+		editMessagePermission,
+		deleteMessagePermission,
+		forceDeleteMessagePermission,
+		pinMessagePermission,
+		deleteOwnMessagePermission,
+		createDirectMessagePermission,
+		createDiscussionOtherUserPermission
+	];
+	const getPermissions = () => loadPermissions(permissionList, getRoom().rid);
+
+	const isOwn = (message: TAnyMessageModel) => message.u && message.u._id === user.id;
+
+	const allowEdit = (message: TAnyMessageModel, permissions: IMessageActionPermissions) => {
+		if (isReadOnly) {
+			return false;
+		}
+		const editOwn = isOwn(message);
+
+		if (!(permissions.hasEditPermission || (Message_AllowEditing !== false && editOwn))) {
+			return false;
+		}
+		const blockEditInMinutes = Message_AllowEditing_BlockEditInMinutes;
+		if (blockEditInMinutes) {
+			let msgTs;
+			if (message.ts != null) {
+				msgTs = dayjs(message.ts);
+			}
+			let currentTsDiff = 0;
+			if (msgTs != null) {
+				currentTsDiff = dayjs().diff(msgTs, 'minutes');
+			}
+			return currentTsDiff < blockEditInMinutes;
+		}
+		return true;
+	};
+
+	const allowDelete = (message: TAnyMessageModel, permissions: IMessageActionPermissions) => {
+		if (isReadOnly) {
+			return false;
+		}
+
+		// Prevent from deleting thread start message when positioned inside the thread
+		if (tmid === message.id) {
+			return false;
+		}
+		const deleteOwn = isOwn(message) && permissions.hasDeleteOwnPermission;
+		if (!(permissions.hasDeletePermission || (Message_AllowDeleting && deleteOwn) || permissions.hasForceDeletePermission)) {
+			return false;
+		}
+		if (permissions.hasForceDeletePermission) {
+			return true;
+		}
+		const blockDeleteInMinutes = Message_AllowDeleting_BlockDeleteInMinutes;
+		if (blockDeleteInMinutes != null && blockDeleteInMinutes !== 0) {
+			let msgTs;
+			if (message.ts != null) {
+				msgTs = dayjs(message.ts);
+			}
+			let currentTsDiff = 0;
+			if (msgTs != null) {
+				currentTsDiff = dayjs().diff(msgTs, 'minutes');
+			}
+			return currentTsDiff < blockDeleteInMinutes;
+		}
+		return true;
+	};
+
+	const getPermalink = (message: TAnyMessageModel) => getPermalinkMessage(message);
+
+	const handleReply = (messageId: string) => {
+		logEvent(events.ROOM_MSG_ACTION_REPLY);
+		replyInit(messageId);
+	};
+
+	const handleEdit = (messageId: string) => {
+		logEvent(events.ROOM_MSG_ACTION_EDIT);
+		editInit(messageId);
+	};
+
+	const handleCreateDiscussion = (message: TAnyMessageModel) => {
+		logEvent(events.ROOM_MSG_ACTION_DISCUSSION);
+		const params = { message, channel: getRoom(), showCloseModal: true };
+		if (isMasterDetail) {
+			Navigation.navigate('ModalStackNavigator', { screen: 'CreateDiscussionView', params });
+		} else {
+			Navigation.navigate('NewMessageStackNavigator', { screen: 'CreateDiscussionView', params });
+		}
+	};
+
+	const handleShareMessage = (message: TAnyMessageModel) => {
+		const params = { message };
+		if (isMasterDetail) {
+			Navigation.navigate('ModalStackNavigator', { screen: 'ForwardMessageView', params });
+		} else {
+			Navigation.navigate('NewMessageStackNavigator', { screen: 'ForwardMessageView', params });
+		}
+	};
+
+	const handleUnread = async (message: TAnyMessageModel) => {
+		logEvent(events.ROOM_MSG_ACTION_UNREAD);
+		const { id: messageId, ts } = message;
+		const { rid } = getRoom();
+		try {
+			const db = database.active;
+			const result = await markAsUnread({ messageId });
+			if (result.success) {
+				const subRecord = await getSubscriptionByRoomId(rid);
+				if (!subRecord) {
+					return;
+				}
+
+				await db.write(async () => {
+					try {
+						await subRecord.update(sub => (sub.ls = ts as Date));
+					} catch {
+						// do nothing
+					}
+				});
+			}
+		} catch (e) {
+			log(e);
+		} finally {
+			Navigation.popToTop(isMasterDetail);
+		}
+	};
+
+	const handlePermalink = async (message: TAnyMessageModel) => {
+		logEvent(events.ROOM_MSG_ACTION_PERMALINK);
+		try {
+			const permalink = await getPermalink(message);
+			Clipboard.setString(permalink ?? '');
+			EventEmitter.emit(LISTENER, { message: I18n.t('Permalink_copied_to_clipboard') });
+		} catch {
+			logEvent(events.ROOM_MSG_ACTION_PERMALINK_F);
+		}
+	};
+
+	const handleCopy = async (message: TAnyMessageModel) => {
+		logEvent(events.ROOM_MSG_ACTION_COPY);
+		await Clipboard.setString((message?.attachments?.[0]?.description || message.msg) ?? '');
+		EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
+	};
+
+	const handleShare = async (message: TAnyMessageModel) => {
+		logEvent(events.ROOM_MSG_ACTION_SHARE);
+		try {
+			const permalink = await getPermalink(message);
+			if (permalink) {
+				Share.share({ message: permalink });
+			}
+		} catch {
+			logEvent(events.ROOM_MSG_ACTION_SHARE_F);
+		}
+	};
+
+	const handleQuote = (messageId: string) => {
+		logEvent(events.ROOM_MSG_ACTION_QUOTE);
+		quoteInit(messageId);
+	};
+
+	const handleReplyInDM = async (message: TAnyMessageModel) => {
+		if (message?.u?.username) {
+			const result = await createDirectMessage(message.u.username);
+			if (result.success) {
+				const { room } = result;
+				const params = {
+					rid: room.rid,
+					name: getRoomTitle(room),
+					t: room.t,
+					roomUserId: getUidDirectMessage(room),
+					messageId: message.id
+				};
+				Navigation.replace('RoomView', params);
+			}
+		}
+	};
+
+	const handleStar = async (messageId: string, starred: boolean) => {
+		logEvent(starred ? events.ROOM_MSG_ACTION_UNSTAR : events.ROOM_MSG_ACTION_STAR);
+		try {
+			await toggleStarMessage(messageId, starred);
+			EventEmitter.emit(LISTENER, { message: starred ? I18n.t('Message_unstarred') : I18n.t('Message_starred') });
+		} catch (e) {
+			logEvent(events.ROOM_MSG_ACTION_STAR_F);
+			log(e);
+		}
+	};
+
+	const handlePin = async (message: TAnyMessageModel) => {
+		logEvent(events.ROOM_MSG_ACTION_PIN);
+		try {
+			await togglePinMessage(message.id, message.pinned as boolean); // TODO: reevaluate `message.pinned` type on IMessage
+		} catch (e) {
+			logEvent(events.ROOM_MSG_ACTION_PIN_F);
+			log(e);
+		}
+	};
+
+	const handleReadReceipt = (message: TAnyMessageModel) => {
+		if (isMasterDetail) {
+			Navigation.navigate('ModalStackNavigator', { screen: 'ReadReceiptsView', params: { messageId: message.id } });
+		} else {
+			Navigation.navigate('ReadReceiptsView', { messageId: message.id });
+		}
+	};
+
+	const handleToggleTranslation = async (message: TAnyMessageModel) => {
+		const room = getRoom();
+		try {
+			if (!room.autoTranslateLanguage) {
+				return;
+			}
+			const db = database.active;
+			await db.write(async () => {
+				await message.update(m => {
+					m.autoTranslate = m.autoTranslate !== null ? !m.autoTranslate : false;
+					m._updatedAt = new Date();
+				});
+			});
+			const translatedMessage = getMessageTranslation(message, room.autoTranslateLanguage);
+			if (!translatedMessage) {
+				await translateMessage(message.id, room.autoTranslateLanguage);
+			}
+		} catch (e) {
+			log(e);
+		}
+	};
+
+	const handleReport = async (message: TAnyMessageModel) => {
+		logEvent(events.ROOM_MSG_ACTION_REPORT);
+		try {
+			await reportMessage(message.id);
+			Alert.alert(I18n.t('Message_Reported'));
+		} catch (e) {
+			logEvent(events.ROOM_MSG_ACTION_REPORT_F);
+			log(e);
+		}
+	};
+
+	const handleDelete = (message: TAnyMessageModel) => {
+		showConfirmationAlert({
+			message: I18n.t('You_will_not_be_able_to_recover_this_message'),
+			confirmationText: I18n.t('Delete'),
+			onPress: async () => {
+				try {
+					logEvent(events.ROOM_MSG_ACTION_DELETE);
+					await deleteMessage(message.id, message.subscription ? message.subscription.id : '');
+				} catch (e) {
+					logEvent(events.ROOM_MSG_ACTION_DELETE_F);
+					log(e);
+				}
+			}
+		});
+	};
+
+	const getConversationOptions = (message: TAnyMessageModel, permissions: IMessageActionPermissions) => {
+		const room = getRoom();
+		const options: TActionSheetOptionsItem[] = [];
+		const videoConfBlock = isVideoConf(message);
+
+		// Edit
+		const isEditAllowed = allowEdit(message, permissions);
+		if (!videoConfBlock && (isOwn(message) || isEditAllowed)) {
+			options.push({
+				title: I18n.t('Edit'),
+				icon: 'edit',
+				onPress: () => handleEdit(message.id),
+				enabled: isEditAllowed,
+				testID: 'message-actions-edit'
+			});
+		}
+
+		// Jump to message
+		const quoteMessageLink = getQuoteMessageLink(message.attachments);
+		if (quoteMessageLink && jumpToMessage) {
+			options.push({
+				title: I18n.t('Jump_to_message'),
+				icon: 'jump-to-message',
+				onPress: () => jumpToMessage(quoteMessageLink, true),
+				testID: 'message-actions-jump-to-message'
+			});
+		}
+
+		// Quote
+		if (!isReadOnly && !videoConfBlock) {
+			options.push({
+				title: I18n.t('Quote'),
+				icon: 'quote',
+				onPress: () => handleQuote(message.id),
+				testID: 'message-actions-quote'
+			});
+		}
+
+		// Reply
+		if (!isReadOnly && !tmid) {
+			options.push({
+				title: I18n.t('Reply_in_Thread'),
+				icon: 'threads',
+				onPress: () => handleReply(message.id),
+				testID: 'message-actions-reply-in-thread'
+			});
+		}
+
+		// Reply in DM
+		if (room.t !== 'd' && room.t !== 'l' && !videoConfBlock) {
+			options.push({
+				title: I18n.t('Reply_in_direct_message'),
+				icon: 'arrow-back',
+				onPress: () => handleReplyInDM(message),
+				enabled: permissions.hasCreateDirectMessagePermission && !room.abacAttributes,
+				disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
+				testID: 'message-actions-reply-in-dm'
+			});
+		}
+
+		// Create Discussion
+		options.push({
+			title: I18n.t('Start_a_Discussion'),
+			icon: 'discussions',
+			onPress: () => handleCreateDiscussion(message),
+			enabled: permissions.hasCreateDiscussionOtherUserPermission,
+			testID: 'message-actions-create-discussion'
+		});
+
+		return options;
+	};
+
+	const getSharingOptions = (message: TAnyMessageModel) => {
+		const room = getRoom();
+		const options: TActionSheetOptionsItem[] = [];
+		const videoConfBlock = isVideoConf(message);
+
+		// Forward
+		if (compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '6.2.0') && !videoConfBlock) {
+			options.push({
+				title: I18n.t('Forward'),
+				icon: 'arrow-forward',
+				onPress: () => handleShareMessage(message),
+				enabled: !room.abacAttributes,
+				disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
+				testID: 'message-actions-forward'
+			});
+		}
+
+		// Get link
+		options.push({
+			title: I18n.t('Get_link'),
+			icon: 'link',
+			onPress: () => handlePermalink(message),
+			enabled: !room.abacAttributes,
+			disabledReason: room.abacAttributes && I18n.t('ABAC_disabled_action_reason'),
+			testID: 'message-actions-get-link'
+		});
+
+		// Copy
+		if (!videoConfBlock) {
+			options.push({
+				title: I18n.t('Copy'),
+				icon: 'copy',
+				onPress: () => handleCopy(message),
+				testID: 'message-actions-copy'
+			});
+		}
+
+		// Share
+		options.push({
+			title: I18n.t('Share'),
+			icon: 'share',
+			onPress: () => handleShare(message),
+			testID: 'message-actions-share'
+		});
+
+		return options;
+	};
+
+	const getMessageStateOptions = (message: TAnyMessageModel, permissions: IMessageActionPermissions) => {
+		const options: TActionSheetOptionsItem[] = [];
+		const videoConfBlock = isVideoConf(message);
+		const isFromAnotherUser = !!message.u && message.u._id !== user.id;
+
+		// Pin
+		if (Message_AllowPinning && !videoConfBlock) {
+			options.push({
+				title: I18n.t(message.pinned ? 'Unpin' : 'Pin'),
+				icon: 'pin',
+				onPress: () => handlePin(message),
+				enabled: permissions?.hasPinPermission,
+				testID: `message-actions-${message.pinned ? 'unpin' : 'pin'}`
+			});
+		}
+
+		// Star
+		if (Message_AllowStarring && !videoConfBlock) {
+			options.push({
+				title: I18n.t(message.starred ? 'Unstar' : 'Star'),
+				icon: message.starred ? 'star-filled' : 'star',
+				onPress: () => handleStar(message.id, message.starred || false),
+				testID: `message-actions-${message.starred ? 'unstar' : 'star'}`
+			});
+		}
+
+		// Mark as unread
+		if (isFromAnotherUser) {
+			options.push({
+				title: I18n.t('Mark_unread'),
+				icon: 'flag',
+				onPress: () => handleUnread(message),
+				testID: 'message-actions-mark-unread'
+			});
+		}
+
+		// Read Receipts
+		if (Message_Read_Receipt_Store_Users) {
+			options.push({
+				title: I18n.t('Read_Receipt'),
+				icon: 'info',
+				onPress: () => handleReadReceipt(message),
+				testID: 'message-actions-read-receipt'
+			});
+		}
+
+		// Toggle Auto-translate
+		if (getRoom().autoTranslate && isFromAnotherUser) {
+			options.push({
+				title: I18n.t(message.autoTranslate !== false ? 'View_Original' : 'Translate'),
+				icon: 'language',
+				onPress: () => handleToggleTranslation(message),
+				testID: 'message-actions-toggle-translation'
+			});
+		}
+
+		return options;
+	};
+
+	const getModerationOptions = (message: TAnyMessageModel, permissions: IMessageActionPermissions) => {
+		const options: TActionSheetOptionsItem[] = [];
+
+		// Report
+		options.push({
+			title: I18n.t('Report'),
+			icon: 'warning',
+			danger: true,
+			onPress: () => handleReport(message),
+			testID: 'message-actions-report'
+		});
+
+		// Delete
+		const isDeleteAllowed = allowDelete(message, permissions);
+		if (isOwn(message) || isDeleteAllowed) {
+			options.push({
+				title: I18n.t('Delete'),
+				icon: 'delete',
+				danger: true,
+				onPress: () => handleDelete(message),
+				enabled: isDeleteAllowed,
+				testID: 'message-actions-delete'
+			});
+		}
+
+		return options;
+	};
+
+	const getOptions = (message: TAnyMessageModel, permissions: IMessageActionPermissions): TActionSheetOptionsItem[] => [
+		...getConversationOptions(message, permissions),
+		...getSharingOptions(message),
+		...getMessageStateOptions(message, permissions),
+		...getModerationOptions(message, permissions)
+	];
+
+	return { getPermissions, getOptions, permissionList };
+};
diff --git a/app/containers/MessageComposer/MessageComposer.test.tsx b/app/containers/MessageComposer/MessageComposer.test.tsx
index c63cc090e1d..56dce8186ae 100644
--- a/app/containers/MessageComposer/MessageComposer.test.tsx
+++ b/app/containers/MessageComposer/MessageComposer.test.tsx
@@ -876,11 +876,13 @@ describe('MessageComposer', () => {
 			await screen.findByTestId('message-composer-attachment-0');
 			await screen.findByTestId('composer-quote-abc');
 			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'caption');
-			const sendPromise = user.press(screen.getByTestId('message-composer-send'));
+			await user.press(screen.getByTestId('message-composer-send'));
 			await waitFor(() => expect(sendFileMessage).toHaveBeenCalled());
 			await fireEvent.changeText(screen.getByTestId('message-composer-input'), 'typed while uploading');
-			resolveUpload();
-			await sendPromise;
+			await act(() => {
+				resolveUpload();
+				return Promise.resolve();
+			});
 
 			await waitFor(() => expect(composerRef.current?.getText()).toBe(''));
 			expect(screen.queryByTestId('composer-quote-abc')).not.toBeOnTheScreen();
diff --git a/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
index 544ac12a650..684f6cd0cbf 100644
--- a/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
+++ b/app/containers/MessageComposer/__snapshots__/MessageComposer.test.tsx.snap
@@ -50,6 +50,9 @@ exports[`MessageComposer Audio tap record 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="00:00"
+        accessibilityRole="text"
+        accessible={true}
         style={
           {
             "backgroundColor": "transparent",
@@ -77,13 +80,29 @@ exports[`MessageComposer Audio tap record 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -92,22 +111,24 @@ exports[`MessageComposer Audio tap record 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -147,7 +168,7 @@ exports[`MessageComposer Audio tap record 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         accessibilityLabel="Recording audio message"
         accessible={true}
@@ -160,6 +181,9 @@ exports[`MessageComposer Audio tap record 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Recording audio message"
+          accessibilityRole="text"
+          accessible={true}
           style={
             {
               "backgroundColor": "transparent",
@@ -177,13 +201,29 @@ exports[`MessageComposer Audio tap record 1`] = `
           Recording audio message
         </Text>
       </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}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -192,24 +232,26 @@ exports[`MessageComposer Audio tap record 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "backgroundColor": "#156FF5",
               "borderRadius": 16,
               "height": 32,
               "justifyContent": "center",
-              "opacity": 1,
               "width": 32,
             },
             {
-              "cursor": undefined,
+              "backgroundColor": "#156FF5",
             },
           ]
         }
@@ -246,7 +288,7 @@ exports[`MessageComposer Audio tap record 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -298,13 +340,29 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
           }
         }
       >
-        <RNGestureHandlerButton
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 10,
@@ -313,22 +371,24 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
               "top": 10,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             [
               {
                 "alignItems": "center",
-                "height": 24,
                 "justifyContent": "center",
-                "opacity": 1,
-                "width": 24,
               },
               {
-                "cursor": undefined,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
@@ -368,7 +428,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
               
             </Text>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </View>
       <TextInput
         blurOnSubmit={false}
@@ -419,13 +479,29 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
           }
         }
       >
-        <RNGestureHandlerButton
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 10,
@@ -434,22 +510,24 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
               "top": 10,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             [
               {
                 "alignItems": "center",
-                "height": 24,
                 "justifyContent": "center",
-                "opacity": 1,
-                "width": 24,
               },
               {
-                "cursor": undefined,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
@@ -489,7 +567,7 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
               
             </Text>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </View>
     </View>
     <RCTScrollView
@@ -564,6 +642,9 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     {
@@ -583,6 +664,9 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
                   }
                 />
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "backgroundColor": "transparent",
@@ -599,13 +683,29 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
                   }
                 />
               </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}
                 activeOpacity={0.3}
-                borderless={true}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
+                focusable={true}
                 hitSlop={
                   {
                     "bottom": 10,
@@ -614,22 +714,24 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
                     "top": 10,
                   }
                 }
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   [
                     {
                       "alignItems": "center",
-                      "height": 24,
                       "justifyContent": "center",
-                      "opacity": 1,
-                      "width": 24,
                     },
                     {
-                      "cursor": undefined,
+                      "height": 24,
+                      "width": 24,
                     },
                   ]
                 }
@@ -669,10 +771,12 @@ exports[`MessageComposer Quote Add quote \`abc\` 1`] = `
                     
                   </Text>
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </View>
             <Text
               accessibilityLabel="Message abc"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -763,13 +867,29 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
           }
         }
       >
-        <RNGestureHandlerButton
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 10,
@@ -778,22 +898,24 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
               "top": 10,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             [
               {
                 "alignItems": "center",
-                "height": 24,
                 "justifyContent": "center",
-                "opacity": 1,
-                "width": 24,
               },
               {
-                "cursor": undefined,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
@@ -833,7 +955,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
               
             </Text>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </View>
       <TextInput
         blurOnSubmit={false}
@@ -884,13 +1006,29 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
           }
         }
       >
-        <RNGestureHandlerButton
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 10,
@@ -899,22 +1037,24 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
               "top": 10,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             [
               {
                 "alignItems": "center",
-                "height": 24,
                 "justifyContent": "center",
-                "opacity": 1,
-                "width": 24,
               },
               {
-                "cursor": undefined,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
@@ -954,7 +1094,7 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
               
             </Text>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </View>
     </View>
     <RCTScrollView
@@ -1030,6 +1170,9 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     {
@@ -1049,6 +1192,9 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                   }
                 />
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "backgroundColor": "transparent",
@@ -1065,13 +1211,29 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                   }
                 />
               </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}
                 activeOpacity={0.3}
-                borderless={true}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
+                focusable={true}
                 hitSlop={
                   {
                     "bottom": 10,
@@ -1080,22 +1242,24 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                     "top": 10,
                   }
                 }
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   [
                     {
                       "alignItems": "center",
-                      "height": 24,
                       "justifyContent": "center",
-                      "opacity": 1,
-                      "width": 24,
                     },
                     {
-                      "cursor": undefined,
+                      "height": 24,
+                      "width": 24,
                     },
                   ]
                 }
@@ -1135,10 +1299,12 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                     
                   </Text>
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </View>
             <Text
               accessibilityLabel="Message abc"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -1225,6 +1391,9 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     {
@@ -1244,6 +1413,9 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                   }
                 />
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "backgroundColor": "transparent",
@@ -1260,13 +1432,29 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                   }
                 />
               </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}
                 activeOpacity={0.3}
-                borderless={true}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
+                focusable={true}
                 hitSlop={
                   {
                     "bottom": 10,
@@ -1275,22 +1463,24 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                     "top": 10,
                   }
                 }
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   [
                     {
                       "alignItems": "center",
-                      "height": 24,
                       "justifyContent": "center",
-                      "opacity": 1,
-                      "width": 24,
                     },
                     {
-                      "cursor": undefined,
+                      "height": 24,
+                      "width": 24,
                     },
                   ]
                 }
@@ -1330,10 +1520,12 @@ exports[`MessageComposer Quote Add quote \`def\` 1`] = `
                     
                   </Text>
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </View>
             <Text
               accessibilityLabel="Message def"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -1424,13 +1616,29 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
           }
         }
       >
-        <RNGestureHandlerButton
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
           activeOpacity={0.3}
-          borderless={true}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
+          focusable={true}
           hitSlop={
             {
               "bottom": 10,
@@ -1439,22 +1647,24 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
               "top": 10,
             }
           }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             [
               {
                 "alignItems": "center",
-                "height": 24,
                 "justifyContent": "center",
-                "opacity": 1,
-                "width": 24,
               },
               {
-                "cursor": undefined,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
@@ -1494,7 +1704,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
               
             </Text>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </View>
       <TextInput
         blurOnSubmit={false}
@@ -1545,37 +1755,55 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
           }
         }
       >
-        <RNGestureHandlerButton
-          activeOpacity={0.3}
-          borderless={true}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          hitSlop={
+        <View
+          accessibilityState={
             {
-              "bottom": 10,
-              "left": 10,
-              "right": 10,
-              "top": 10,
-            }
-          }
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          activeOpacity={0.3}
+          animationDuration={0}
+          collapsable={false}
+          focusable={true}
+          hitSlop={
+            {
+              "bottom": 10,
+              "left": 10,
+              "right": 10,
+              "top": 10,
+            }
+          }
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[Function]}
+          onResponderGrant={[Function]}
+          onResponderMove={[Function]}
+          onResponderRelease={[Function]}
+          onResponderTerminate={[Function]}
+          onResponderTerminationRequest={[Function]}
+          onStartShouldSetResponder={[Function]}
           style={
             [
               {
                 "alignItems": "center",
-                "height": 24,
                 "justifyContent": "center",
-                "opacity": 1,
-                "width": 24,
               },
               {
-                "cursor": undefined,
+                "height": 24,
+                "width": 24,
               },
             ]
           }
@@ -1615,7 +1843,7 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
               
             </Text>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </View>
     </View>
     <RCTScrollView
@@ -1691,6 +1919,9 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     {
@@ -1710,6 +1941,9 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                   }
                 />
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "backgroundColor": "transparent",
@@ -1726,13 +1960,29 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                   }
                 />
               </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}
                 activeOpacity={0.3}
-                borderless={true}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
+                focusable={true}
                 hitSlop={
                   {
                     "bottom": 10,
@@ -1741,22 +1991,24 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                     "top": 10,
                   }
                 }
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   [
                     {
                       "alignItems": "center",
-                      "height": 24,
                       "justifyContent": "center",
-                      "opacity": 1,
-                      "width": 24,
                     },
                     {
-                      "cursor": undefined,
+                      "height": 24,
+                      "width": 24,
                     },
                   ]
                 }
@@ -1796,10 +2048,12 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                     
                   </Text>
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </View>
             <Text
               accessibilityLabel="Message abc"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -1886,6 +2140,9 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     {
@@ -1905,6 +2162,9 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                   }
                 />
                 <Text
+                  accessibilityLabel=""
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "backgroundColor": "transparent",
@@ -1921,13 +2181,29 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                   }
                 />
               </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}
                 activeOpacity={0.3}
-                borderless={true}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
+                focusable={true}
                 hitSlop={
                   {
                     "bottom": 10,
@@ -1936,22 +2212,24 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                     "top": 10,
                   }
                 }
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
                 style={
                   [
                     {
                       "alignItems": "center",
-                      "height": 24,
                       "justifyContent": "center",
-                      "opacity": 1,
-                      "width": 24,
                     },
                     {
-                      "cursor": undefined,
+                      "height": 24,
+                      "width": 24,
                     },
                   ]
                 }
@@ -1991,10 +2269,12 @@ exports[`MessageComposer Quote Remove a quote 1`] = `
                     
                   </Text>
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </View>
             <Text
               accessibilityLabel="Message def"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -2124,13 +2404,29 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2139,22 +2435,24 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2194,7 +2492,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2202,13 +2500,29 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2217,22 +2531,24 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2272,7 +2588,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2280,13 +2596,29 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2295,22 +2627,24 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2350,7 +2684,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2358,13 +2692,29 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2373,22 +2723,24 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2428,7 +2780,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2436,13 +2788,29 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2451,22 +2819,24 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2506,7 +2876,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2514,13 +2884,29 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2529,22 +2915,24 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2584,7 +2972,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2592,13 +2980,29 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={45}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2607,22 +3011,24 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2662,7 +3068,7 @@ exports[`MessageComposer Toolbar Markdown tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -2753,13 +3159,29 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2768,22 +3190,24 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2823,7 +3247,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2831,13 +3255,29 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2846,22 +3286,24 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2901,7 +3343,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2909,13 +3351,29 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -2924,22 +3382,24 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -2979,7 +3439,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -2987,13 +3447,29 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3002,22 +3478,24 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3057,7 +3535,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3065,13 +3543,29 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3080,22 +3574,24 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3135,7 +3631,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3143,37 +3639,55 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
-        activeOpacity={0.3}
-        borderless={true}
-        collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        hitSlop={
+      <View
+        accessibilityState={
           {
-            "bottom": 10,
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.3}
+        animationDuration={0}
+        collapsable={false}
+        focusable={true}
+        hitSlop={
+          {
+            "bottom": 10,
             "left": 10,
             "right": 10,
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3213,7 +3727,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3221,13 +3735,29 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={123}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3236,22 +3766,24 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3291,7 +3823,7 @@ exports[`MessageComposer Toolbar Markdown tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -3382,13 +3914,29 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3397,22 +3945,24 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3452,7 +4002,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3460,13 +4010,29 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3475,22 +4041,24 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3530,7 +4098,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3538,13 +4106,29 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3553,22 +4137,24 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3608,7 +4194,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3616,13 +4202,29 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3631,22 +4233,24 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3686,7 +4290,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3694,13 +4298,29 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3709,22 +4329,24 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3764,7 +4386,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3772,13 +4394,29 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3787,22 +4425,24 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3842,7 +4482,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -3850,13 +4490,29 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={149}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -3865,22 +4521,24 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -3920,7 +4578,7 @@ exports[`MessageComposer Toolbar Markdown tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -4011,13 +4669,29 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4026,22 +4700,24 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4081,7 +4757,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4089,13 +4765,29 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4104,22 +4796,24 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4159,7 +4853,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4167,13 +4861,29 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4182,22 +4892,24 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4237,7 +4949,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4245,13 +4957,29 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4260,22 +4988,24 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4315,7 +5045,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4323,13 +5053,29 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4338,22 +5084,24 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4393,7 +5141,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4401,13 +5149,29 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4416,22 +5180,24 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4471,7 +5237,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4479,13 +5245,29 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={71}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4494,22 +5276,24 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4549,7 +5333,7 @@ exports[`MessageComposer Toolbar Markdown tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -4640,13 +5424,29 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4655,23 +5455,25 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
-            },
+              "height": 24,
+              "width": 24,
+            },
           ]
         }
       >
@@ -4710,7 +5512,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4718,13 +5520,29 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4733,22 +5551,24 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4788,7 +5608,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4796,13 +5616,29 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4811,22 +5647,24 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4866,7 +5704,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4874,13 +5712,29 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4889,22 +5743,24 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -4944,7 +5800,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -4952,13 +5808,29 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -4967,22 +5839,24 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5022,7 +5896,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5030,13 +5904,29 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5045,22 +5935,24 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5100,7 +5992,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5108,13 +6000,29 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5123,22 +6031,24 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5178,7 +6088,7 @@ exports[`MessageComposer Toolbar Markdown tap markdown 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -5269,13 +6179,29 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5284,22 +6210,24 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5339,7 +6267,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5347,13 +6275,29 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5362,22 +6306,24 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5417,7 +6363,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5425,13 +6371,29 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5440,22 +6402,24 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5495,7 +6459,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5503,13 +6467,29 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5518,22 +6498,24 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5573,7 +6555,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5581,13 +6563,29 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5596,22 +6594,24 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5651,7 +6651,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5659,13 +6659,29 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5674,22 +6690,24 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5729,7 +6747,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5737,13 +6755,29 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={97}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5752,22 +6786,24 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5807,7 +6843,7 @@ exports[`MessageComposer Toolbar Markdown tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -5898,13 +6934,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5913,22 +6965,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -5968,7 +7022,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -5976,13 +7030,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -5991,22 +7061,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6046,7 +7118,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6054,13 +7126,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6069,22 +7157,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6124,7 +7214,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6132,13 +7222,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6147,22 +7253,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6202,7 +7310,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6210,13 +7318,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6225,22 +7349,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6280,7 +7406,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6288,13 +7414,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6303,22 +7445,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6358,7 +7502,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6366,13 +7510,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={58}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6381,22 +7541,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6436,7 +7598,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap bold 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -6527,13 +7689,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6542,22 +7720,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6597,7 +7777,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6605,13 +7785,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6620,22 +7816,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6675,7 +7873,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6683,13 +7881,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6698,22 +7912,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6753,7 +7969,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6761,13 +7977,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6776,22 +8008,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6831,7 +8065,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6839,13 +8073,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6854,22 +8104,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6909,7 +8161,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6917,13 +8169,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -6932,22 +8200,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -6987,7 +8257,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -6995,13 +8265,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={136}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7010,22 +8296,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7065,7 +8353,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -7156,13 +8444,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7171,22 +8475,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7226,7 +8532,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7234,13 +8540,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7249,22 +8571,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7304,7 +8628,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7312,13 +8636,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7327,22 +8667,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7382,7 +8724,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7390,13 +8732,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7405,22 +8763,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7460,7 +8820,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7468,13 +8828,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7483,22 +8859,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7538,7 +8916,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7546,13 +8924,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7561,22 +8955,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7616,7 +9012,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7624,13 +9020,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={162}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7639,23 +9051,25 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
-            },
+              "height": 24,
+              "width": 24,
+            },
           ]
         }
       >
@@ -7694,7 +9108,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap code-block 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -7785,13 +9199,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7800,22 +9230,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7855,7 +9287,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7863,13 +9295,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7878,22 +9326,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -7933,7 +9383,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -7941,13 +9391,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -7956,22 +9422,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8011,7 +9479,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8019,13 +9487,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8034,22 +9518,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8089,7 +9575,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8097,13 +9583,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8112,22 +9614,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8167,7 +9671,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8175,13 +9679,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8190,22 +9710,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8245,7 +9767,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8253,13 +9775,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={84}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8268,22 +9806,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8323,7 +9863,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap italic 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -8414,13 +9954,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8429,22 +9985,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8484,7 +10042,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8492,13 +10050,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8507,22 +10081,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8562,7 +10138,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8570,13 +10146,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8585,22 +10177,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8640,7 +10234,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8648,13 +10242,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8663,22 +10273,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8718,7 +10330,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8726,13 +10338,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8741,22 +10369,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8796,7 +10426,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8804,13 +10434,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8819,22 +10465,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8874,7 +10522,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -8882,13 +10530,29 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={110}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -8897,22 +10561,24 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -8952,7 +10618,7 @@ exports[`MessageComposer Toolbar Markdown type test and tap strike 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -9043,13 +10709,29 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9058,22 +10740,24 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9113,7 +10797,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9121,13 +10805,29 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9136,22 +10836,24 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9191,7 +10893,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9199,13 +10901,29 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9214,22 +10932,24 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9269,7 +10989,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9277,13 +10997,29 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9292,22 +11028,24 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9347,7 +11085,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9355,13 +11093,29 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9370,22 +11124,24 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9425,7 +11181,7 @@ exports[`MessageComposer Toolbar tap actions 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -9516,13 +11272,29 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={10}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9531,22 +11303,24 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9586,7 +11360,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9594,13 +11368,29 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9609,22 +11399,24 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9664,7 +11456,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9672,13 +11464,29 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9687,22 +11495,24 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9742,7 +11552,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9750,13 +11560,29 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9765,22 +11591,24 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9820,7 +11648,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -9828,13 +11656,29 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -9843,22 +11687,24 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -9898,7 +11744,7 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
@@ -9955,47 +11801,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
               }
-              touchSoundDisabled={false}
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Recently used"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-clock"
               >
                 <Text
-                  accessibilityLabel="Recently used"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10020,12 +11870,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-clock"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10049,47 +11898,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-              touchSoundDisabled={false}
-            >
-              <View
-                accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
                 }
+              }
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+            >
+              <View
+                accessibilityLabel="Smileys and people"
+                accessible={true}
+                testID="emoji-picker-tab-emoji"
               >
                 <Text
-                  accessibilityLabel="Smileys and people"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10114,12 +11967,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-emoji"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10143,47 +11995,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-              touchSoundDisabled={false}
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
+              }
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Animals and nature"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-leaf"
               >
                 <Text
-                  accessibilityLabel="Animals and nature"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10208,12 +12064,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-leaf"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10237,47 +12092,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
               }
-              touchSoundDisabled={false}
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Food and drink"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-burger"
               >
                 <Text
-                  accessibilityLabel="Food and drink"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10302,12 +12161,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-burger"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10331,47 +12189,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-              touchSoundDisabled={false}
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
+              }
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Activity"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-basketball"
               >
                 <Text
-                  accessibilityLabel="Activity"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10396,12 +12258,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-basketball"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10425,47 +12286,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
               }
-              touchSoundDisabled={false}
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Travel and places"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-airplane"
               >
                 <Text
-                  accessibilityLabel="Travel and places"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10490,12 +12355,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-airplane"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10519,47 +12383,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-              touchSoundDisabled={false}
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
+              }
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Objects"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-lamp-bulb"
               >
                 <Text
-                  accessibilityLabel="Objects"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10584,12 +12452,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-lamp-bulb"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10613,47 +12480,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
               }
-              touchSoundDisabled={false}
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Symbols"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-percentage"
               >
                 <Text
-                  accessibilityLabel="Symbols"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10678,12 +12549,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-percentage"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10707,47 +12577,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
               }
-              touchSoundDisabled={false}
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
+              }
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Flags"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-flag"
               >
                 <Text
-                  accessibilityLabel="Flags"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10772,12 +12646,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-flag"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -10801,47 +12674,51 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
               }
             }
           >
-            <RNGestureHandlerButton
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              exclusive={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              hitSlop={
-                {
-                  "bottom": 10,
-                  "left": 10,
-                  "right": 10,
-                  "top": 10,
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
                 }
               }
-              innerRef={null}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              rippleColor="transparent"
-              style={
-                [
-                  undefined,
-                  {
-                    "cursor": undefined,
-                  },
-                ]
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeOpacity={0.2}
+              animationDuration={
+                {
+                  "in": 0,
+                  "out": 150,
+                }
               }
-              touchSoundDisabled={false}
+              collapsable={false}
+              focusable={true}
+              hitSlop={10}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
             >
               <View
+                accessibilityLabel="Custom"
                 accessible={true}
-                collapsable={false}
-                style={
-                  {
-                    "opacity": 1,
-                  }
-                }
+                testID="emoji-picker-tab-rocket"
               >
                 <Text
-                  accessibilityLabel="Custom"
-                  accessible={true}
                   allowFontScaling={false}
                   selectable={false}
                   style={
@@ -10866,12 +12743,11 @@ exports[`MessageComposer Toolbar tap emoji 1`] = `
                       {},
                     ]
                   }
-                  testID="emoji-picker-tab-rocket"
                 >
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
             <View
               style={
                 [
@@ -11434,13 +13310,29 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
         }
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -11449,22 +13341,24 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -11504,7 +13398,7 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -11512,13 +13406,29 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -11527,22 +13437,24 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -11582,7 +13494,7 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -11590,13 +13502,29 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -11605,22 +13533,24 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -11660,7 +13590,7 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -11668,13 +13598,29 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -11683,22 +13629,24 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -11738,7 +13686,7 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
       <View
         style={
           {
@@ -11746,13 +13694,29 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
           }
         }
       />
-      <RNGestureHandlerButton
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        handlerTag={175}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 10,
@@ -11761,22 +13725,24 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             "top": 10,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
             {
               "alignItems": "center",
-              "height": 24,
               "justifyContent": "center",
-              "opacity": 1,
-              "width": 24,
             },
             {
-              "cursor": undefined,
+              "height": 24,
+              "width": 24,
             },
           ]
         }
@@ -11816,7 +13782,7 @@ exports[`MessageComposer Toolbar tap mention 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>,
   <View
diff --git a/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.test.tsx b/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.test.tsx
index e606b7b61a5..b02e168c290 100644
--- a/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.test.tsx
+++ b/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.test.tsx
@@ -50,7 +50,7 @@ describe('AttachmentActionSheet', () => {
 	it('shows alt text input for image attachments when supported by the server', () => {
 		render(<AttachmentActionSheet attachment={baseAttachment} onSave={jest.fn()} />);
 
-		expect(screen.getByLabelText('Alternative text')).toBeOnTheScreen();
+		expect(screen.getByPlaceholderText('Add alt text...')).toBeOnTheScreen();
 	});
 
 	it('hides alt text input when the server does not support it', () => {
@@ -72,14 +72,14 @@ describe('AttachmentActionSheet', () => {
 	it('prefills the input with the existing altText', () => {
 		render(<AttachmentActionSheet attachment={{ ...baseAttachment, altText: 'A cat on a sofa' }} onSave={jest.fn()} />);
 
-		expect(screen.getByLabelText('Alternative text').props.value).toBe('A cat on a sofa');
+		expect(screen.getByPlaceholderText('Add alt text...').props.value).toBe('A cat on a sofa');
 	});
 
 	it('calls onSave with the typed altText and hides the action sheet', () => {
 		const onSave = jest.fn();
 		render(<AttachmentActionSheet attachment={baseAttachment} onSave={onSave} />);
 
-		fireEvent.changeText(screen.getByLabelText('Alternative text'), 'A red apple');
+		fireEvent.changeText(screen.getByPlaceholderText('Add alt text...'), 'A red apple');
 		fireEvent.press(screen.getByText('Save'));
 
 		expect(onSave).toHaveBeenCalledWith({ altText: 'A red apple' });
diff --git a/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.tsx b/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.tsx
index 0cc4a186428..db03cf3756a 100644
--- a/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.tsx
+++ b/app/containers/MessageComposer/components/Attachments/AttachmentActionSheet.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { Image, StyleSheet, Text, TextInput, View } from 'react-native';
+import { Image, StyleSheet, TextInput, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
 
 import Button from '~/containers/Button';
@@ -101,16 +102,16 @@ export const AttachmentActionSheet = ({ attachment, onSave }: AttachmentActionSh
 			contentContainerStyle={styles.contentContainer}
 			keyboardShouldPersistTaps='handled'
 			showsVerticalScrollIndicator={false}>
-			<Text numberOfLines={1} style={[styles.title, { color: colors.fontDefault }]}>
+			<PlainText numberOfLines={1} style={[styles.title, { color: colors.fontDefault }]}>
 				{attachment.filename}
-			</Text>
+			</PlainText>
 			<View style={[styles.preview, { backgroundColor: colors.surfaceNeutral }]}>
 				<Preview attachment={attachment} />
 			</View>
 			{showAltTextInput ? (
 				<>
-					<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t('Alt_text')}</Text>
-					<Text style={[styles.helper, { color: colors.fontSecondaryInfo }]}>{I18n.t('Alt_text_description')}</Text>
+					<PlainText style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t('Alt_text')}</PlainText>
+					<PlainText style={[styles.helper, { color: colors.fontSecondaryInfo }]}>{I18n.t('Alt_text_description')}</PlainText>
 					<TextInput
 						accessibilityLabel={I18n.t('Alt_text')}
 						multiline
diff --git a/app/containers/MessageComposer/components/Attachments/__snapshots__/AttachmentActionSheet.test.tsx.snap b/app/containers/MessageComposer/components/Attachments/__snapshots__/AttachmentActionSheet.test.tsx.snap
index 3664b4b3135..300a10d449c 100644
--- a/app/containers/MessageComposer/components/Attachments/__snapshots__/AttachmentActionSheet.test.tsx.snap
+++ b/app/containers/MessageComposer/components/Attachments/__snapshots__/AttachmentActionSheet.test.tsx.snap
@@ -25,6 +25,9 @@ exports[`Story Snapshots: File should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="requirements.pdf"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -110,57 +113,66 @@ exports[`Story Snapshots: File should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Save"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={0.105}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
-            "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 0,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          {
+            "marginBottom": 0,
           },
         ]
       }
       underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
+        accessibilityLabel="Save"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -182,7 +194,7 @@ exports[`Story Snapshots: File should match snapshot 1`] = `
       >
         Save
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -212,6 +224,9 @@ exports[`Story Snapshots: Image should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="sunset.jpg"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -267,57 +282,66 @@ exports[`Story Snapshots: Image should match snapshot 1`] = `
         }
       />
     </View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Save"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={0.105}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
-            "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 0,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          {
+            "marginBottom": 0,
           },
         ]
       }
       underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
+        accessibilityLabel="Save"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -339,7 +363,7 @@ exports[`Story Snapshots: Image should match snapshot 1`] = `
       >
         Save
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -369,6 +393,9 @@ exports[`Story Snapshots: ImageOnLegacyServer should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="sunset.jpg"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -424,57 +451,66 @@ exports[`Story Snapshots: ImageOnLegacyServer should match snapshot 1`] = `
         }
       />
     </View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Save"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={0.105}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
-            "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 0,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          {
+            "marginBottom": 0,
           },
         ]
       }
       underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
+        accessibilityLabel="Save"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -496,7 +532,7 @@ exports[`Story Snapshots: ImageOnLegacyServer should match snapshot 1`] = `
       >
         Save
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -526,6 +562,9 @@ exports[`Story Snapshots: ImageWithPrefilledAltText should match snapshot 1`] =
     }
   >
     <Text
+      accessibilityLabel="sunset.jpg"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -581,57 +620,66 @@ exports[`Story Snapshots: ImageWithPrefilledAltText should match snapshot 1`] =
         }
       />
     </View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Save"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={0.105}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
-            "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 0,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          {
+            "marginBottom": 0,
           },
         ]
       }
       underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
+        accessibilityLabel="Save"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -653,7 +701,7 @@ exports[`Story Snapshots: ImageWithPrefilledAltText should match snapshot 1`] =
       >
         Save
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -683,6 +731,9 @@ exports[`Story Snapshots: Video should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="walkthrough.mp4"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -768,57 +819,66 @@ exports[`Story Snapshots: Video should match snapshot 1`] = `
         </Text>
       </View>
     </View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="Save"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={0.105}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
-            "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 0,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
+          },
+          {},
+          {
+            "marginBottom": 0,
           },
         ]
       }
       underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
+        accessibilityLabel="Save"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -840,7 +900,7 @@ exports[`Story Snapshots: Video should match snapshot 1`] = `
       >
         Save
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
index 743edb5ab01..bb6ebf2047e 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompleteCannedResponse.tsx
@@ -1,4 +1,5 @@
 import { View, Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import sharedStyles from '~/views/Styles';
 import { type IAutocompleteCannedResponse } from '~/containers/MessageComposer/interfaces';
@@ -24,13 +25,13 @@ export const AutocompleteCannedResponse = ({ item }: { item: IAutocompleteCanned
 	return (
 		<View style={styles.canned}>
 			<View style={styles.cannedTitle}>
-				<Text style={styles.cannedTitleText} numberOfLines={1}>
+				<PlainText style={styles.cannedTitleText} numberOfLines={1}>
 					{item.title}
-				</Text>
+				</PlainText>
 			</View>
 			{item.subtitle ? (
 				<View style={styles.cannedSubtitle}>
-					<Text style={styles.cannedSubtitleText}>{item.subtitle}</Text>
+					<PlainText style={styles.cannedSubtitleText}>{item.subtitle}</PlainText>
 				</View>
 			) : null}
 		</View>
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompleteEmoji.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompleteEmoji.tsx
index 07ae1904897..dadc28dc460 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompleteEmoji.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompleteEmoji.tsx
@@ -1,4 +1,5 @@
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IAutocompleteEmoji } from '~/containers/MessageComposer/interfaces';
 import { Emoji } from '~/containers/EmojiPicker/Emoji';
@@ -11,9 +12,9 @@ export const AutocompleteEmoji = ({ item }: { item: IAutocompleteEmoji }) => {
 			<Emoji emoji={item.emoji} />
 			<View style={styles.emoji}>
 				<View style={styles.emojiTitle}>
-					<Text style={styles.emojiText} numberOfLines={1}>
+					<PlainText style={styles.emojiText} numberOfLines={1}>
 						{typeof item.emoji === 'string' ? `:${item.emoji}:` : `:${item.emoji.name}:`}
-					</Text>
+					</PlainText>
 				</View>
 			</View>
 		</>
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompleteItem.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompleteItem.tsx
index b07277ec248..39ad2a018b6 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompleteItem.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompleteItem.tsx
@@ -1,6 +1,6 @@
 import { View } from 'react-native';
-import { RectButton } from 'react-native-gesture-handler';
 
+import { RectButton } from '~/containers/GestureButtons';
 import i18n from '~/i18n';
 import { type IAutocompleteItemProps, type TAutocompleteItem } from '~/containers/MessageComposer/interfaces';
 import { AutocompleteUserRoom } from './AutocompleteUserRoom';
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
index ef4cf1981f9..cb6476d1bb4 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompletePreview.tsx
@@ -1,6 +1,6 @@
-import { RectButton } from 'react-native-gesture-handler';
 import { Image } from 'expo-image';
 
+import { RectButton } from '~/containers/GestureButtons';
 import { type IAutocompleteItemProps } from '~/containers/MessageComposer/interfaces';
 import { CustomIcon } from '~/containers/CustomIcon';
 import { AutocompleteItemLoading } from './AutocompleteItemLoading';
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompleteSlashCommand.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompleteSlashCommand.tsx
index 09f15e0535a..a684c9414cf 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompleteSlashCommand.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompleteSlashCommand.tsx
@@ -1,4 +1,5 @@
 import { View, Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IAutocompleteSlashCommand } from '~/containers/MessageComposer/interfaces';
 import I18n from '~/i18n';
@@ -15,7 +16,9 @@ export const AutocompleteSlashCommand = ({ item }: { item: IAutocompleteSlashCom
 			</View>
 			{item.subtitle ? (
 				<View style={styles.slashSubtitle}>
-					<Text style={styles.slashSubtitleText}>{I18n.isTranslated(item.subtitle) ? I18n.t(item.subtitle) : item.subtitle}</Text>
+					<PlainText style={styles.slashSubtitleText}>
+						{I18n.isTranslated(item.subtitle) ? I18n.t(item.subtitle) : item.subtitle}
+					</PlainText>
 				</View>
 			) : null}
 		</View>
diff --git a/app/containers/MessageComposer/components/Autocomplete/AutocompleteUserRoom.tsx b/app/containers/MessageComposer/components/Autocomplete/AutocompleteUserRoom.tsx
index ba98f7e0a77..e1469350832 100644
--- a/app/containers/MessageComposer/components/Autocomplete/AutocompleteUserRoom.tsx
+++ b/app/containers/MessageComposer/components/Autocomplete/AutocompleteUserRoom.tsx
@@ -1,4 +1,5 @@
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IAutocompleteUserRoom } from '~/containers/MessageComposer/interfaces';
 import Avatar from '~/containers/Avatar';
@@ -20,15 +21,15 @@ export const AutocompleteUserRoom = ({ item }: { item: IAutocompleteUserRoom })
 						<RoomTypeIcon userId={item.id} type={item.t} status={item.status} size={16} teamMain={item.teamMain} />
 					) : null}
 					<View style={{ paddingLeft: isAllOrHere ? 0 : 2 }}>
-						<Text style={styles.userRoomTitleText} numberOfLines={1}>
+						<PlainText style={styles.userRoomTitleText} numberOfLines={1}>
 							{isAllOrHere ? `@${item.title}` : item.title}
-						</Text>
+						</PlainText>
 					</View>
 				</View>
 				{item.type === '#' ? null : (
 					<View style={styles.userRoomSubtitle}>
-						<Text style={styles.userRoomSubtitleText}>{item.subtitle}</Text>
-						{item.outside ? <Text style={styles.userRoomOutsideText}>{I18n.t('Not_in_channel')}</Text> : null}
+						<PlainText style={styles.userRoomSubtitleText}>{item.subtitle}</PlainText>
+						{item.outside ? <PlainText style={styles.userRoomOutsideText}>{I18n.t('Not_in_channel')}</PlainText> : null}
 					</View>
 				)}
 			</View>
diff --git a/app/containers/MessageComposer/components/Buttons/BaseButton.tsx b/app/containers/MessageComposer/components/Buttons/BaseButton.tsx
index e62678de629..4de6290c412 100644
--- a/app/containers/MessageComposer/components/Buttons/BaseButton.tsx
+++ b/app/containers/MessageComposer/components/Buttons/BaseButton.tsx
@@ -1,6 +1,6 @@
-import { BorderlessButton } from 'react-native-gesture-handler';
 import { View, StyleSheet, useWindowDimensions } from 'react-native';
 
+import { BorderlessButton } from '~/containers/GestureButtons';
 import I18n from '~/i18n';
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
 import { useMessageComposerApi } from '~/containers/MessageComposer/context';
diff --git a/app/containers/MessageComposer/components/EmojiSearchbar.tsx b/app/containers/MessageComposer/components/EmojiSearchbar.tsx
index f4471ed549a..c6c5b182bae 100644
--- a/app/containers/MessageComposer/components/EmojiSearchbar.tsx
+++ b/app/containers/MessageComposer/components/EmojiSearchbar.tsx
@@ -1,5 +1,6 @@
 import { useContext, useState, type ReactElement } from 'react';
-import { View, Text, Pressable, FlatList, StyleSheet } from 'react-native';
+import { View, Pressable, FlatList, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { textInputDebounceTime } from '~/lib/constants/debounceConfig';
 import { MessageInnerContext } from '../context';
@@ -48,7 +49,7 @@ export const EmojiSearchbar = (): ReactElement => {
 				showsHorizontalScrollIndicator={false}
 				ListEmptyComponent={() => (
 					<View style={styles.emptyContainer} testID='no-results-found'>
-						<Text style={[styles.emptyText, { color: colors.fontHint }]}>{I18n.t('No_results_found')}</Text>
+						<PlainText style={[styles.emptyText, { color: colors.fontHint }]}>{I18n.t('No_results_found')}</PlainText>
 					</View>
 				)}
 				keyExtractor={item => (typeof item === 'string' ? item : item.name)}
diff --git a/app/containers/MessageComposer/components/Quotes/Quote.tsx b/app/containers/MessageComposer/components/Quotes/Quote.tsx
index f2b231170cb..dcee80c1248 100644
--- a/app/containers/MessageComposer/components/Quotes/Quote.tsx
+++ b/app/containers/MessageComposer/components/Quotes/Quote.tsx
@@ -1,4 +1,5 @@
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import dayjs from '~/lib/dayjs';
 import { useTheme } from '~/theme';
@@ -34,10 +35,10 @@ export const Quote = ({ messageId }: { messageId: string }) => {
 		<View style={styles.root} testID={`composer-quote-${message.id}`}>
 			<View style={styles.header}>
 				<View style={styles.title}>
-					<Text style={styles.username} numberOfLines={1}>
+					<PlainText style={styles.username} numberOfLines={1}>
 						{username}
-					</Text>
-					<Text style={styles.time}>{time}</Text>
+					</PlainText>
+					<PlainText style={styles.time}>{time}</PlainText>
 				</View>
 				<BaseButton
 					icon='close'
diff --git a/app/containers/MessageComposer/components/RecordAudio/Duration.tsx b/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
index 9390b653311..808593408f2 100644
--- a/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
+++ b/app/containers/MessageComposer/components/RecordAudio/Duration.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { type FontVariant, Text } from 'react-native';
+import { type FontVariant } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useAudioRecorderState, type AudioRecorder } from 'expo-audio';
 
 import sharedStyles from '~/views/Styles';
@@ -17,7 +18,7 @@ export const Duration = ({ audioRecorder }: { audioRecorder: AudioRecorder }) =>
 		setDuration(nextDuration);
 	}
 
-	return <Text style={styles.text}>{duration}</Text>;
+	return <PlainText style={styles.text}>{duration}</PlainText>;
 };
 
 function useStyle() {
diff --git a/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx b/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
index 25c6712dcfa..94924282924 100644
--- a/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
+++ b/app/containers/MessageComposer/components/RecordAudio/RecordAudio.tsx
@@ -1,4 +1,5 @@
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useEffect, useState, type ReactElement } from 'react';
 import { requestRecordingPermissionsAsync, setAudioModeAsync, useAudioRecorder } from 'expo-audio';
 import { getInfoAsync } from 'expo-file-system/legacy';
@@ -143,7 +144,7 @@ export const RecordAudio = (): ReactElement | null => {
 			<View style={styles.buttons}>
 				<CancelButton onPress={cancelRecording} cancelAndDelete />
 				<View accessible accessibilityLabel={i18n.t('Recording_audio_in_progress')} style={styles.recordingNote}>
-					<Text style={styles.recordingNoteText}>{i18n.t('Recording_audio_in_progress')}</Text>
+					<PlainText style={styles.recordingNoteText}>{i18n.t('Recording_audio_in_progress')}</PlainText>
 				</View>
 				<ReviewButton onPress={goReview} />
 			</View>
diff --git a/app/containers/MessageComposer/components/RecordAudio/ReviewButton.tsx b/app/containers/MessageComposer/components/RecordAudio/ReviewButton.tsx
index 852f48c2080..91ea88ce580 100644
--- a/app/containers/MessageComposer/components/RecordAudio/ReviewButton.tsx
+++ b/app/containers/MessageComposer/components/RecordAudio/ReviewButton.tsx
@@ -1,7 +1,7 @@
 import { StyleSheet, View } from 'react-native';
 import { type ReactElement } from 'react';
-import { BorderlessButton } from 'react-native-gesture-handler';
 
+import { BorderlessButton } from '~/containers/GestureButtons';
 import i18n from '~/i18n';
 import { useTheme } from '~/theme';
 import { CustomIcon } from '~/containers/CustomIcon';
diff --git a/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/CancelButton.test.tsx.snap b/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/CancelButton.test.tsx.snap
index 75a95c41fb2..57b49fd2283 100644
--- a/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/CancelButton.test.tsx.snap
+++ b/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/CancelButton.test.tsx.snap
@@ -1,13 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`a11y label is cancel when cancelAndDelete 1`] = `
-<RNGestureHandlerButton
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
   activeOpacity={0.3}
-  borderless={true}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
+  focusable={true}
   hitSlop={
     {
       "bottom": 10,
@@ -16,22 +32,24 @@ exports[`a11y label is cancel when cancelAndDelete 1`] = `
       "top": 10,
     }
   }
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
         "alignItems": "center",
-        "height": 24,
         "justifyContent": "center",
-        "opacity": 1,
-        "width": 24,
       },
       {
-        "cursor": undefined,
+        "height": 24,
+        "width": 24,
       },
     ]
   }
@@ -71,17 +89,33 @@ exports[`a11y label is cancel when cancelAndDelete 1`] = `
       
     </Text>
   </View>
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`a11y label is delete otherwise and fires onPress 1`] = `
-<RNGestureHandlerButton
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
   activeOpacity={0.3}
-  borderless={true}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
+  focusable={true}
   hitSlop={
     {
       "bottom": 10,
@@ -90,22 +124,24 @@ exports[`a11y label is delete otherwise and fires onPress 1`] = `
       "top": 10,
     }
   }
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
         "alignItems": "center",
-        "height": 24,
         "justifyContent": "center",
-        "opacity": 1,
-        "width": 24,
       },
       {
-        "cursor": undefined,
+        "height": 24,
+        "width": 24,
       },
     ]
   }
@@ -145,5 +181,5 @@ exports[`a11y label is delete otherwise and fires onPress 1`] = `
       
     </Text>
   </View>
-</RNGestureHandlerButton>
+</View>
 `;
diff --git a/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/ReviewButton.test.tsx.snap b/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/ReviewButton.test.tsx.snap
index 0856345019b..f9aa42ffea7 100644
--- a/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/ReviewButton.test.tsx.snap
+++ b/app/containers/MessageComposer/components/RecordAudio/__tests__/__snapshots__/ReviewButton.test.tsx.snap
@@ -1,13 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders and fires onPress 1`] = `
-<RNGestureHandlerButton
+<View
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
+  accessible={true}
   activeOpacity={0.3}
-  borderless={true}
+  animationDuration={0}
   collapsable={false}
-  delayLongPress={600}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
+  focusable={true}
   hitSlop={
     {
       "bottom": 10,
@@ -16,24 +32,26 @@ exports[`renders and fires onPress 1`] = `
       "top": 10,
     }
   }
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
+  onBlur={[Function]}
+  onClick={[Function]}
+  onFocus={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
   style={
     [
       {
         "alignItems": "center",
-        "backgroundColor": "#054",
         "borderRadius": 16,
         "height": 32,
         "justifyContent": "center",
-        "opacity": 1,
         "width": 32,
       },
       {
-        "cursor": undefined,
+        "backgroundColor": "#054",
       },
     ]
   }
@@ -70,5 +88,5 @@ exports[`renders and fires onPress 1`] = `
       
     </Text>
   </View>
-</RNGestureHandlerButton>
+</View>
 `;
diff --git a/app/containers/MessageComposer/components/SendThreadToChannel.tsx b/app/containers/MessageComposer/components/SendThreadToChannel.tsx
index 416cc6e4b23..70dd31b65de 100644
--- a/app/containers/MessageComposer/components/SendThreadToChannel.tsx
+++ b/app/containers/MessageComposer/components/SendThreadToChannel.tsx
@@ -1,5 +1,6 @@
-import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
-import { StyleSheet, Text } from 'react-native';
+import { Touchable } from 'react-native-gesture-handler';
+import { StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useEffect, useRef, type ReactElement } from 'react';
 import { type Subscription } from 'rxjs';
 import { Q } from '@nozbe/watermelondb';
@@ -68,7 +69,7 @@ export const SendThreadToChannel = (): ReactElement | null => {
 	}
 
 	return (
-		<TouchableWithoutFeedback
+		<Touchable
 			style={styles.container}
 			onPress={() => setAlsoSendThreadToChannel(!alsoSendThreadToChannel)}
 			testID='message-composer-send-to-channel'>
@@ -78,8 +79,8 @@ export const SendThreadToChannel = (): ReactElement | null => {
 				size={24}
 				color={alsoSendThreadToChannel ? colors.buttonBackgroundPrimaryDefault : colors.fontDefault}
 			/>
-			<Text style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Message_composer_Send_to_channel')}</Text>
-		</TouchableWithoutFeedback>
+			<PlainText style={[styles.text, { color: colors.fontDefault }]}>{I18n.t('Message_composer_Send_to_channel')}</PlainText>
+		</Touchable>
 	);
 };
 
diff --git a/app/containers/NativeListRow/Disclosure.ios.tsx b/app/containers/NativeListRow/Disclosure.ios.tsx
new file mode 100644
index 00000000000..aecd8926d2b
--- /dev/null
+++ b/app/containers/NativeListRow/Disclosure.ios.tsx
@@ -0,0 +1,11 @@
+import { Host } from '@expo/ui/swift-ui';
+
+import NativeListIndicator from '~/containers/List/native/Indicator.ios';
+
+const Disclosure = () => (
+	<Host matchContents>
+		<NativeListIndicator indicator='disclosure' />
+	</Host>
+);
+
+export default Disclosure;
diff --git a/app/containers/NativeListRow/Disclosure.tsx b/app/containers/NativeListRow/Disclosure.tsx
new file mode 100644
index 00000000000..214ae769553
--- /dev/null
+++ b/app/containers/NativeListRow/Disclosure.tsx
@@ -0,0 +1,9 @@
+import { I18nManager } from 'react-native';
+
+import ListIcon from '~/containers/List/ListIcon';
+
+const Disclosure = () => (
+	<ListIcon name='chevron-right' style={I18nManager.isRTL ? { transform: [{ rotate: '180deg' }] } : undefined} />
+);
+
+export default Disclosure;
diff --git a/app/containers/NativeListRow/Separator.ios.tsx b/app/containers/NativeListRow/Separator.ios.tsx
new file mode 100644
index 00000000000..a1d9aece613
--- /dev/null
+++ b/app/containers/NativeListRow/Separator.ios.tsx
@@ -0,0 +1,28 @@
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '~/theme';
+import { AVATAR_SIZE, CONTENT_SPACING, ROW_MARGIN_HORIZONTAL, ROW_PADDING_HORIZONTAL } from './constants';
+
+const styles = StyleSheet.create({
+	card: {
+		marginHorizontal: ROW_MARGIN_HORIZONTAL
+	},
+	line: {
+		height: StyleSheet.hairlineWidth
+	}
+});
+
+const Line = ({ inset }: { inset: number }) => {
+	const { colors } = useTheme();
+	return (
+		<View style={[styles.card, { backgroundColor: colors.surfaceLight }]}>
+			<View style={[styles.line, { marginLeft: inset, backgroundColor: colors.strokeLight }]} />
+		</View>
+	);
+};
+
+export const PlainSeparator = () => <Line inset={ROW_PADDING_HORIZONTAL} />;
+
+const Separator = () => <Line inset={ROW_PADDING_HORIZONTAL + AVATAR_SIZE + CONTENT_SPACING} />;
+
+export default Separator;
diff --git a/app/containers/NativeListRow/Separator.tsx b/app/containers/NativeListRow/Separator.tsx
new file mode 100644
index 00000000000..77c984db2d9
--- /dev/null
+++ b/app/containers/NativeListRow/Separator.tsx
@@ -0,0 +1,5 @@
+import ListSeparator from '../List/ListSeparator';
+
+export const PlainSeparator = ListSeparator;
+
+export default ListSeparator;
diff --git a/app/containers/NativeListRow/constants.ts b/app/containers/NativeListRow/constants.ts
new file mode 100644
index 00000000000..95432acad82
--- /dev/null
+++ b/app/containers/NativeListRow/constants.ts
@@ -0,0 +1,6 @@
+export const ROW_HEIGHT = 54;
+export const ROW_RADIUS = 10;
+export const ROW_MARGIN_HORIZONTAL = 16;
+export const ROW_PADDING_HORIZONTAL = 16;
+export const AVATAR_SIZE = 30;
+export const CONTENT_SPACING = 12;
diff --git a/app/containers/NativeListRow/index.tsx b/app/containers/NativeListRow/index.tsx
new file mode 100644
index 00000000000..1b7e6a59820
--- /dev/null
+++ b/app/containers/NativeListRow/index.tsx
@@ -0,0 +1,161 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { PixelRatio, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
+import { useTheme } from '~/theme';
+import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
+import { CONTENT_SPACING, ROW_HEIGHT, ROW_MARGIN_HORIZONTAL, ROW_PADDING_HORIZONTAL, ROW_RADIUS } from './constants';
+
+const TRAILING_ACTION_HIT_SLOP = 12;
+const SPACER_MIN_LENGTH = 8;
+
+const styles = StyleSheet.create({
+	card: {
+		marginHorizontal: ROW_MARGIN_HORIZONTAL,
+		overflow: 'hidden'
+	},
+	firstCard: {
+		borderTopLeftRadius: ROW_RADIUS,
+		borderTopRightRadius: ROW_RADIUS
+	},
+	lastCard: {
+		borderBottomLeftRadius: ROW_RADIUS,
+		borderBottomRightRadius: ROW_RADIUS
+	},
+	row: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		paddingHorizontal: ROW_PADDING_HORIZONTAL,
+		gap: CONTENT_SPACING
+	},
+	content: {
+		flex: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		alignSelf: 'stretch',
+		gap: CONTENT_SPACING
+	},
+	pressed: {
+		opacity: 0.75
+	},
+	disabled: {
+		opacity: 0.3
+	},
+	texts: {
+		flex: 1,
+		marginRight: SPACER_MIN_LENGTH + CONTENT_SPACING
+	},
+	titleRow: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		gap: 4
+	},
+	title: {
+		flexShrink: 1,
+		fontSize: 17,
+		fontWeight: '500'
+	},
+	subtitle: {
+		fontSize: 15
+	}
+});
+
+export interface INativeListRowAction {
+	icon: TIconsName;
+	onPress: () => void;
+	testID: string;
+	accessibilityLabel: string;
+	disabled?: boolean;
+}
+
+export interface INativeListRow {
+	title: string;
+	subtitle?: string;
+	leading?: ReactNode;
+	titleLeading?: ReactElement;
+	trailing?: ReactNode;
+	trailingAction?: INativeListRowAction;
+	onPress: () => void;
+	onLongPress?: () => void;
+	testID: string;
+	accessibilityLabel: string;
+	isSelected?: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
+	disabled?: boolean;
+}
+
+const NativeListRow = ({
+	title,
+	subtitle,
+	leading,
+	titleLeading,
+	trailing,
+	trailingAction,
+	onPress,
+	onLongPress,
+	testID,
+	accessibilityLabel,
+	isSelected,
+	isFirst,
+	isLast,
+	disabled
+}: INativeListRow) => {
+	const { colors } = useTheme();
+	const { fontScale } = useResponsiveLayout();
+	const height = PixelRatio.roundToNearestPixel(ROW_HEIGHT * fontScale);
+
+	return (
+		<View
+			style={[
+				styles.card,
+				styles.row,
+				{ height, backgroundColor: colors.surfaceLight },
+				isFirst && styles.firstCard,
+				isLast && styles.lastCard
+			]}>
+			<Pressable
+				onPress={onPress}
+				onLongPress={onLongPress}
+				disabled={disabled}
+				testID={testID}
+				accessibilityRole='button'
+				accessibilityLabel={accessibilityLabel}
+				accessibilityState={{ selected: isSelected, disabled }}
+				style={({ pressed }) => [styles.content, pressed && styles.pressed, disabled && styles.disabled]}>
+				{leading}
+				<View style={styles.texts}>
+					<View style={styles.titleRow}>
+						{titleLeading}
+						<Text numberOfLines={1} style={[styles.title, { color: colors.fontDefault }]}>
+							{title}
+						</Text>
+					</View>
+					{subtitle ? (
+						<Text numberOfLines={1} style={[styles.subtitle, { color: colors.fontSecondaryInfo }]}>
+							{subtitle}
+						</Text>
+					) : null}
+				</View>
+				{trailing}
+			</Pressable>
+			{trailingAction ? (
+				<Pressable
+					onPress={trailingAction.onPress}
+					disabled={trailingAction.disabled}
+					testID={trailingAction.testID}
+					accessibilityRole='button'
+					accessibilityLabel={trailingAction.accessibilityLabel}
+					hitSlop={TRAILING_ACTION_HIT_SLOP}>
+					<CustomIcon
+						name={trailingAction.icon}
+						size={20}
+						color={trailingAction.disabled ? colors.fontDisabled : colors.fontDefault}
+					/>
+				</Pressable>
+			) : null}
+		</View>
+	);
+};
+
+export default NativeListRow;
diff --git a/app/containers/NativeListRow/useListBackgroundColor.ios.ts b/app/containers/NativeListRow/useListBackgroundColor.ios.ts
new file mode 100644
index 00000000000..afac5d421f5
--- /dev/null
+++ b/app/containers/NativeListRow/useListBackgroundColor.ios.ts
@@ -0,0 +1,6 @@
+import { useTheme } from '~/theme';
+
+export const useListBackgroundColor = (_backgroundColor: string) => {
+	const { colors } = useTheme();
+	return colors.surfaceHover;
+};
diff --git a/app/containers/NativeListRow/useListBackgroundColor.ts b/app/containers/NativeListRow/useListBackgroundColor.ts
new file mode 100644
index 00000000000..66f1affabcd
--- /dev/null
+++ b/app/containers/NativeListRow/useListBackgroundColor.ts
@@ -0,0 +1 @@
+export const useListBackgroundColor = (backgroundColor: string) => backgroundColor;
diff --git a/app/containers/NewMediaCall/CreateCall.tsx b/app/containers/NewMediaCall/CreateCall.tsx
index c2ae96a1b06..2eca3856416 100644
--- a/app/containers/NewMediaCall/CreateCall.tsx
+++ b/app/containers/NewMediaCall/CreateCall.tsx
@@ -1,4 +1,5 @@
-import { Pressable, StyleSheet, Text } from 'react-native';
+import { Pressable, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '~/i18n';
 import { useTheme } from '~/theme';
@@ -52,9 +53,9 @@ export const CreateCall = () => {
 			testID='new-media-call-button'
 			android_ripple={{ color: colors.buttonBackgroundSuccessPress }}>
 			<CustomIcon name='phone' size={24} color={isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite} />
-			<Text style={[styles.callText, { color: isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite }]}>
+			<PlainText style={[styles.callText, { color: isCallDisabled ? colors.buttonPrimaryDisabled : colors.fontWhite }]}>
 				{I18n.t('Call')}
-			</Text>
+			</PlainText>
 		</Pressable>
 	);
 };
diff --git a/app/containers/NewMediaCall/FilterHeader.tsx b/app/containers/NewMediaCall/FilterHeader.tsx
index 148cbe96151..bac8339a011 100644
--- a/app/containers/NewMediaCall/FilterHeader.tsx
+++ b/app/containers/NewMediaCall/FilterHeader.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSelector } from 'react-redux';
 import { type ReactElement, useCallback } from 'react';
 
@@ -40,7 +41,7 @@ export const FilterHeader = (): ReactElement => {
 
 	return (
 		<>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</Text>
+			<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('New_call')}</PlainText>
 
 			<View style={styles.searchContainer}>
 				<FormTextInput
@@ -52,7 +53,7 @@ export const FilterHeader = (): ReactElement => {
 					value={filter}
 				/>
 			</View>
-			<Text style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</Text>
+			<PlainText style={[styles.inputLabel, { color: colors.fontDefault }]}>{I18n.t('Enter_username_or_number')}</PlainText>
 		</>
 	);
 };
diff --git a/app/containers/NewMediaCall/PeerItemInner.tsx b/app/containers/NewMediaCall/PeerItemInner.tsx
index 8e950417f58..0edf2fc1596 100644
--- a/app/containers/NewMediaCall/PeerItemInner.tsx
+++ b/app/containers/NewMediaCall/PeerItemInner.tsx
@@ -1,4 +1,5 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import type { TPeerItem } from '~/lib/services/voip/getPeerAutocompleteOptions';
@@ -23,9 +24,9 @@ export const PeerItemInner = ({ item }: { item: TPeerItem }) => {
 			</View>
 			<View style={styles.nameContainer}>
 				{!isSip ? <Status id={item.value} size={20} /> : null}
-				<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
+				<PlainText style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 					{item.label}
-				</Text>
+				</PlainText>
 			</View>
 		</View>
 	);
diff --git a/app/containers/NewMediaCall/SelectedPeer.tsx b/app/containers/NewMediaCall/SelectedPeer.tsx
index 611593265ae..c95bbdb8b0e 100644
--- a/app/containers/NewMediaCall/SelectedPeer.tsx
+++ b/app/containers/NewMediaCall/SelectedPeer.tsx
@@ -1,6 +1,6 @@
 import { View, StyleSheet } from 'react-native';
-import { BorderlessButton } from 'react-native-gesture-handler';
 
+import { BorderlessButton } from '~/containers/GestureButtons';
 import { useTheme } from '~/theme';
 import { CustomIcon } from '../CustomIcon';
 import I18n from '~/i18n';
diff --git a/app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap
index c784187f9d8..fd736212a55 100644
--- a/app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/CreateCall.test.tsx.snap
@@ -78,6 +78,9 @@ exports[`Story Snapshots: Disabled should match snapshot 1`] = `
     
   </Text>
   <Text
+    accessibilityLabel="Call"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -180,6 +183,9 @@ exports[`Story Snapshots: Enabled should match snapshot 1`] = `
     
   </Text>
   <Text
+    accessibilityLabel="Call"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
diff --git a/app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap
index 1b2a83f0383..70fe0ee6493 100644
--- a/app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/FilterHeader.test.tsx.snap
@@ -9,6 +9,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="New call"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -40,13 +43,13 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
     }
   >
     <A11yOrderView
-      orderKey="«r2»"
+      orderKey="_r_2_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r2»"
+        orderKey="_r_2_"
       >
         <View
           style={
@@ -160,6 +163,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
     </A11yOrderView>
   </View>
   <Text
+    accessibilityLabel="Enter username or number"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -194,6 +200,9 @@ exports[`Story Snapshots: WithFilter should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="New call"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -225,13 +234,13 @@ exports[`Story Snapshots: WithFilter should match snapshot 1`] = `
     }
   >
     <A11yOrderView
-      orderKey="«r3»"
+      orderKey="_r_3_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r3»"
+        orderKey="_r_3_"
       >
         <View
           style={
@@ -345,6 +354,9 @@ exports[`Story Snapshots: WithFilter should match snapshot 1`] = `
     </A11yOrderView>
   </View>
   <Text
+    accessibilityLabel="Enter username or number"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
diff --git a/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
index e6a3a7c4cb4..a8cc944071e 100644
--- a/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/PeerItem.test.tsx.snap
@@ -116,6 +116,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -133,6 +134,8 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                 "width": 28,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={28}
           />
@@ -183,6 +186,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           
         </Text>
         <Text
+          accessibilityLabel="Alice Johnson"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -320,6 +326,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="+55 11 99999-9999"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -452,6 +461,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -469,6 +479,8 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                 "width": 28,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={28}
           />
@@ -519,6 +531,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           
         </Text>
         <Text
+          accessibilityLabel="Long display name to validate text truncation behavior for PeerItem in narrow widths"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
diff --git a/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
index 3647f8288b7..df504a91cf8 100644
--- a/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/PeerList.test.tsx.snap
@@ -173,6 +173,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="+55 11 98888-7777"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -314,6 +317,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                   onProgress={[Function]}
                   placeholder={[]}
                   priority="high"
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -331,6 +335,8 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                       "width": 28,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={28}
                 />
@@ -381,6 +387,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="Alice Johnson"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -522,6 +531,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                   onProgress={[Function]}
                   placeholder={[]}
                   priority="high"
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -539,6 +549,8 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                       "width": 28,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={28}
                 />
@@ -589,6 +601,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="Long display name to validate text truncation behavior for PeerItem in narrow widths"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -730,6 +745,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                   onProgress={[Function]}
                   placeholder={[]}
                   priority="high"
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -747,6 +763,8 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                       "width": 28,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={28}
                 />
@@ -797,6 +815,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="Bob Smith"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
diff --git a/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap b/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
index 1da0008460a..0f4948419e8 100644
--- a/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
+++ b/app/containers/NewMediaCall/__snapshots__/SelectedPeer.test.tsx.snap
@@ -97,6 +97,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
               onProgress={[Function]}
               placeholder={[]}
               priority="high"
+              sfEffect={null}
               source={
                 [
                   {
@@ -114,6 +115,8 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                   "width": 28,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={28}
             />
@@ -164,6 +167,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             
           </Text>
           <Text
+            accessibilityLabel="Alice Johnson"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -189,33 +195,45 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-      <RNGestureHandlerButton
+      <View
         accessibilityLabel="Remove"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        foreground={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={10}
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#9EA2A8"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 2,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 2,
+          }
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -245,7 +263,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
         >
           
         </Text>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
   <Text
@@ -340,6 +358,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="+55 11 99999-9999"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -365,33 +386,45 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-      <RNGestureHandlerButton
+      <View
         accessibilityLabel="Remove"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        foreground={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={10}
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#9EA2A8"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 2,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 2,
+          }
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -421,7 +454,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
         >
           
         </Text>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
   <Text
@@ -511,6 +544,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
               onProgress={[Function]}
               placeholder={[]}
               priority="high"
+              sfEffect={null}
               source={
                 [
                   {
@@ -528,6 +562,8 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
                   "width": 28,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={28}
             />
@@ -578,6 +614,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
             
           </Text>
           <Text
+            accessibilityLabel="Long display name to validate text truncation behavior for SelectedPeer in narrow widths"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -603,33 +642,45 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-      <RNGestureHandlerButton
+      <View
         accessibilityLabel="Remove"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        foreground={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={10}
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#9EA2A8"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 2,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 2,
+          }
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -659,7 +710,7 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
         >
           
         </Text>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -762,6 +813,7 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
               onProgress={[Function]}
               placeholder={[]}
               priority="high"
+              sfEffect={null}
               source={
                 [
                   {
@@ -779,6 +831,8 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
                   "width": 28,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={28}
             />
@@ -829,6 +883,9 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
             
           </Text>
           <Text
+            accessibilityLabel="Long display name to validate text truncation behavior for SelectedPeer in narrow widths"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -854,33 +911,45 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-      <RNGestureHandlerButton
+      <View
         accessibilityLabel="Remove"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        foreground={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={10}
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#9EA2A8"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 2,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 2,
+          }
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -910,7 +979,7 @@ exports[`Story Snapshots: LongUsername should match snapshot 1`] = `
         >
           
         </Text>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -1018,6 +1087,9 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="+55 11 99999-9999"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1043,33 +1115,45 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-      <RNGestureHandlerButton
+      <View
         accessibilityLabel="Remove"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        foreground={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={10}
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#9EA2A8"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 2,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 2,
+          }
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -1099,7 +1183,7 @@ exports[`Story Snapshots: Sip should match snapshot 1`] = `
         >
           
         </Text>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
@@ -1202,6 +1286,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
               onProgress={[Function]}
               placeholder={[]}
               priority="high"
+              sfEffect={null}
               source={
                 [
                   {
@@ -1219,6 +1304,8 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
                   "width": 28,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={28}
             />
@@ -1269,6 +1356,9 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
             
           </Text>
           <Text
+            accessibilityLabel="Alice Johnson"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1294,33 +1384,45 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-      <RNGestureHandlerButton
+      <View
         accessibilityLabel="Remove"
         accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
         activeOpacity={0.3}
-        borderless={true}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        foreground={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={10}
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#9EA2A8"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
-          [
-            {
-              "opacity": 1,
-              "padding": 2,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
+          {
+            "padding": 2,
+          }
         }
         testID="new-media-call-clear-selected-peer"
       >
@@ -1350,7 +1452,7 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
         >
           
         </Text>
-      </RNGestureHandlerButton>
+      </View>
     </View>
   </View>
 </View>
diff --git a/app/containers/OrSeparator.tsx b/app/containers/OrSeparator.tsx
index 81b425a9272..b3ea3758ae2 100644
--- a/app/containers/OrSeparator.tsx
+++ b/app/containers/OrSeparator.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '../i18n';
 import sharedStyles from '../views/Styles';
@@ -28,9 +29,11 @@ const OrSeparator = memo(() => {
 	const text = { color: colors.fontSecondaryInfo };
 
 	return (
-		<View accessible style={styles.container}>
+		<View importantForAccessibility='no' style={styles.container}>
 			<View style={[styles.line, line]} />
-			<Text style={[styles.text, text]}>{I18n.t('OR')}</Text>
+			<PlainText accessible={false} style={[styles.text, text]}>
+				{I18n.t('OR')}
+			</PlainText>
 			<View style={[styles.line, line]} />
 		</View>
 	);
diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx
index 15c3dccbc2f..01f6a65af04 100644
--- a/app/containers/Passcode/Base/Button.tsx
+++ b/app/containers/Passcode/Base/Button.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Text, type StyleProp, type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import styles from './styles';
 import Touch from '~/containers/Touch';
@@ -9,13 +10,12 @@ import { useTheme } from '~/theme';
 interface IPasscodeButton {
 	text?: string;
 	icon?: TIconsName;
-	disabled?: boolean;
 	onPress?: Function;
 	style?: StyleProp<ViewStyle>;
 	testID?: string;
 }
 
-const Button = memo(({ style, text, disabled, onPress, icon, testID }: IPasscodeButton) => {
+const Button = memo(({ style, text, onPress, icon, testID }: IPasscodeButton) => {
 	const { colors } = useTheme();
 
 	const press = () => onPress && onPress(text);
@@ -26,12 +26,11 @@ const Button = memo(({ style, text, disabled, onPress, icon, testID }: IPasscode
 			style={[styles.buttonView, { backgroundColor: 'transparent' }, style]}
 			underlayColor={colors.buttonBackgroundSecondaryDefault}
 			rippleColor={colors.buttonBackgroundSecondaryPress}
-			enabled={!disabled}
 			onPress={press}>
 			{icon ? (
 				<CustomIcon name={icon} size={36} />
 			) : (
-				<Text style={[styles.buttonText, { color: colors.fontDefault }]}>{text}</Text>
+				<PlainText style={[styles.buttonText, { color: colors.fontDefault }]}>{text}</PlainText>
 			)}
 		</Touch>
 	);
diff --git a/app/containers/Passcode/Base/Subtitle.tsx b/app/containers/Passcode/Base/Subtitle.tsx
index b87a25d9bec..260c4b25f6e 100644
--- a/app/containers/Passcode/Base/Subtitle.tsx
+++ b/app/containers/Passcode/Base/Subtitle.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
@@ -16,7 +17,7 @@ const Subtitle = memo(({ text }: IPasscodeSubtitle) => {
 	return (
 		<Row style={styles.row}>
 			<View style={styles.subtitleView}>
-				<Text style={[styles.textSubtitle, { color: themes[theme].fontDanger }]}>{text}</Text>
+				<PlainText style={[styles.textSubtitle, { color: themes[theme].fontDanger }]}>{text}</PlainText>
 			</View>
 		</Row>
 	);
diff --git a/app/containers/Passcode/Base/Title.tsx b/app/containers/Passcode/Base/Title.tsx
index 2cf611dd782..8152085adf5 100644
--- a/app/containers/Passcode/Base/Title.tsx
+++ b/app/containers/Passcode/Base/Title.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Row } from 'react-native-easy-grid';
 
 import styles from './styles';
@@ -15,7 +16,7 @@ const Title = memo(({ text }: IPasscodeTitle) => {
 	return (
 		<Row style={styles.row}>
 			<View style={styles.titleView}>
-				<Text style={[styles.textTitle, { color: colors.fontTitlesLabels }]}>{text}</Text>
+				<PlainText style={[styles.textTitle, { color: colors.fontTitlesLabels }]}>{text}</PlainText>
 			</View>
 		</Row>
 	);
diff --git a/app/containers/Passcode/Base/__snapshots__/Base.test.tsx.snap b/app/containers/Passcode/Base/__snapshots__/Base.test.tsx.snap
index 32964571263..3b46a89b17a 100644
--- a/app/containers/Passcode/Base/__snapshots__/Base.test.tsx.snap
+++ b/app/containers/Passcode/Base/__snapshots__/Base.test.tsx.snap
@@ -89,6 +89,9 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="Create Passcode"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -317,61 +320,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-1"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -381,8 +386,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-1"
               >
                 <Text
+                  accessibilityLabel="1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -404,7 +413,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   1
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -442,61 +451,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-2"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -506,8 +517,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-2"
               >
                 <Text
+                  accessibilityLabel="2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -529,7 +544,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   2
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -567,61 +582,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-3"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -631,8 +648,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-3"
               >
                 <Text
+                  accessibilityLabel="3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -654,7 +675,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   3
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -704,61 +725,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-4"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -768,8 +791,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-4"
               >
                 <Text
+                  accessibilityLabel="4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -791,7 +818,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   4
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -829,61 +856,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-5"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -893,8 +922,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-5"
               >
                 <Text
+                  accessibilityLabel="5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -916,7 +949,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   5
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -954,61 +987,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-6"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -1018,8 +1053,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-6"
               >
                 <Text
+                  accessibilityLabel="6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1041,7 +1080,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   6
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -1091,61 +1130,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-7"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -1155,8 +1196,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-7"
               >
                 <Text
+                  accessibilityLabel="7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1178,7 +1223,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   7
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -1216,61 +1261,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-8"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -1280,8 +1327,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-8"
               >
                 <Text
+                  accessibilityLabel="8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1303,7 +1354,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   8
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -1341,61 +1392,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-9"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -1405,8 +1458,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-9"
               >
                 <Text
+                  accessibilityLabel="9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1428,7 +1485,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   9
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -1491,61 +1548,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-0"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -1555,8 +1614,12 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-0"
               >
                 <Text
+                  accessibilityLabel="0"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1578,7 +1641,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   0
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -1616,61 +1679,63 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-backspace"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -1680,6 +1745,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-backspace"
               >
                 <Text
                   allowFontScaling={false}
@@ -1708,7 +1774,7 @@ exports[`Story Snapshots: ChooseType should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -1806,6 +1872,9 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="Confirm Passcode"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -2034,61 +2103,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-1"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2098,8 +2169,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-1"
               >
                 <Text
+                  accessibilityLabel="1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2121,7 +2196,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   1
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -2159,61 +2234,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-2"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2223,8 +2300,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-2"
               >
                 <Text
+                  accessibilityLabel="2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2246,7 +2327,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   2
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -2284,61 +2365,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-3"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2348,8 +2431,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-3"
               >
                 <Text
+                  accessibilityLabel="3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2371,7 +2458,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   3
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -2421,61 +2508,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-4"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2485,8 +2574,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-4"
               >
                 <Text
+                  accessibilityLabel="4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2508,7 +2601,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   4
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -2546,61 +2639,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-5"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2610,8 +2705,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-5"
               >
                 <Text
+                  accessibilityLabel="5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2633,7 +2732,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   5
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -2671,61 +2770,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-6"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2735,8 +2836,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-6"
               >
                 <Text
+                  accessibilityLabel="6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2758,7 +2863,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   6
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -2808,61 +2913,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-7"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2872,8 +2979,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-7"
               >
                 <Text
+                  accessibilityLabel="7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2895,7 +3006,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   7
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -2933,61 +3044,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-8"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -2997,8 +3110,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-8"
               >
                 <Text
+                  accessibilityLabel="8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3020,7 +3137,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   8
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -3058,61 +3175,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-9"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -3122,8 +3241,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-9"
               >
                 <Text
+                  accessibilityLabel="9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3145,7 +3268,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   9
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -3208,61 +3331,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-0"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -3272,8 +3397,12 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-0"
               >
                 <Text
+                  accessibilityLabel="0"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3295,7 +3424,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   0
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -3333,61 +3462,63 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-backspace"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -3397,6 +3528,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-backspace"
               >
                 <Text
                   allowFontScaling={false}
@@ -3425,7 +3557,7 @@ exports[`Story Snapshots: ConfirmType should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -3523,6 +3655,9 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="Enter Passcode"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -3751,61 +3886,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-1"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -3815,8 +3952,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-1"
               >
                 <Text
+                  accessibilityLabel="1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3838,7 +3979,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   1
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -3876,61 +4017,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-2"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -3940,8 +4083,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-2"
               >
                 <Text
+                  accessibilityLabel="2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3963,7 +4110,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   2
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -4001,61 +4148,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-3"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4065,8 +4214,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-3"
               >
                 <Text
+                  accessibilityLabel="3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4088,7 +4241,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   3
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -4138,61 +4291,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-4"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4202,8 +4357,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-4"
               >
                 <Text
+                  accessibilityLabel="4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4225,7 +4384,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   4
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -4263,61 +4422,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-5"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4327,8 +4488,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-5"
               >
                 <Text
+                  accessibilityLabel="5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4350,7 +4515,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   5
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -4388,61 +4553,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-6"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4452,8 +4619,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-6"
               >
                 <Text
+                  accessibilityLabel="6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4475,7 +4646,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   6
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -4525,61 +4696,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-7"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4589,8 +4762,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-7"
               >
                 <Text
+                  accessibilityLabel="7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4612,7 +4789,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   7
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -4650,61 +4827,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-8"
               underlayColor="#E4E7EA"
-            >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4714,8 +4893,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-8"
               >
                 <Text
+                  accessibilityLabel="8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4737,7 +4920,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   8
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -4775,61 +4958,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-9"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4839,8 +5024,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-9"
               >
                 <Text
+                  accessibilityLabel="9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4862,7 +5051,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   9
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -4925,61 +5114,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-0"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -4989,8 +5180,12 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-0"
               >
                 <Text
+                  accessibilityLabel="0"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -5012,7 +5207,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   0
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -5050,61 +5245,63 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-backspace"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -5114,6 +5311,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-backspace"
               >
                 <Text
                   allowFontScaling={false}
@@ -5142,7 +5340,7 @@ exports[`Story Snapshots: EnterType should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -5240,6 +5438,9 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
           }
         >
           <Text
+            accessibilityLabel="Unlock App"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -5280,6 +5481,9 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
           }
         >
           <Text
+            accessibilityLabel="Authentication required"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -5508,61 +5712,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-1"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -5572,8 +5778,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-1"
               >
                 <Text
+                  accessibilityLabel="1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -5595,7 +5805,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   1
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -5633,61 +5843,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-2"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -5697,8 +5909,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-2"
               >
                 <Text
+                  accessibilityLabel="2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -5720,7 +5936,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   2
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -5758,61 +5974,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-3"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -5822,8 +6040,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-3"
               >
                 <Text
+                  accessibilityLabel="3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -5845,7 +6067,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   3
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -5895,61 +6117,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-4"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -5959,8 +6183,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-4"
               >
                 <Text
+                  accessibilityLabel="4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -5982,7 +6210,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   4
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -6020,61 +6248,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-5"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6084,8 +6314,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-5"
               >
                 <Text
+                  accessibilityLabel="5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6107,7 +6341,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   5
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -6145,61 +6379,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-6"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6209,8 +6445,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-6"
               >
                 <Text
+                  accessibilityLabel="6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6232,7 +6472,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   6
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -6282,61 +6522,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-7"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6346,8 +6588,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-7"
               >
                 <Text
+                  accessibilityLabel="7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6369,7 +6615,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   7
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -6407,61 +6653,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-8"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6471,8 +6719,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-8"
               >
                 <Text
+                  accessibilityLabel="8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6494,7 +6746,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   8
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -6532,61 +6784,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-9"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6596,8 +6850,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-9"
               >
                 <Text
+                  accessibilityLabel="9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6619,7 +6877,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   9
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -6669,61 +6927,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
-              collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
+              collapsable={false}
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
+              style={
+                [
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="biometry-button"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6733,6 +6993,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="biometry-button"
               >
                 <Text
                   allowFontScaling={false}
@@ -6761,7 +7022,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -6799,61 +7060,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-0"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6863,8 +7126,12 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-0"
               >
                 <Text
+                  accessibilityLabel="0"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6886,7 +7153,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   0
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -6924,61 +7191,63 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-backspace"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -6988,6 +7257,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                     "width": 78,
                   }
                 }
+                testID="passcode-button-backspace"
               >
                 <Text
                   allowFontScaling={false}
@@ -7016,7 +7286,7 @@ exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`]
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -7114,6 +7384,9 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="Enter Passcode"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -7342,61 +7615,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-1"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -7406,8 +7681,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-1"
               >
                 <Text
+                  accessibilityLabel="1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -7429,7 +7708,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   1
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -7467,61 +7746,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-2"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -7531,8 +7812,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-2"
               >
                 <Text
+                  accessibilityLabel="2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -7554,7 +7839,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   2
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -7592,61 +7877,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-3"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -7656,8 +7943,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-3"
               >
                 <Text
+                  accessibilityLabel="3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -7679,7 +7970,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   3
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -7729,61 +8020,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-4"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -7793,8 +8086,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-4"
               >
                 <Text
+                  accessibilityLabel="4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -7816,7 +8113,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   4
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -7854,61 +8151,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-5"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -7918,8 +8217,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-5"
               >
                 <Text
+                  accessibilityLabel="5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -7941,7 +8244,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   5
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -7979,61 +8282,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-6"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -8043,8 +8348,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-6"
               >
                 <Text
+                  accessibilityLabel="6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -8066,7 +8375,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   6
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -8116,61 +8425,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-7"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -8180,8 +8491,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-7"
               >
                 <Text
+                  accessibilityLabel="7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -8203,7 +8518,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   7
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -8241,61 +8556,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-8"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -8305,8 +8622,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-8"
               >
                 <Text
+                  accessibilityLabel="8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -8328,7 +8649,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   8
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -8366,61 +8687,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-9"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -8430,8 +8753,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-9"
               >
                 <Text
+                  accessibilityLabel="9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -8453,7 +8780,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   9
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -8503,61 +8830,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="biometry-button"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -8567,6 +8896,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="biometry-button"
               >
                 <Text
                   allowFontScaling={false}
@@ -8595,7 +8925,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -8633,61 +8963,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-0"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -8697,8 +9029,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-0"
               >
                 <Text
+                  accessibilityLabel="0"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -8720,7 +9056,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   0
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -8758,61 +9094,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-backspace"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -8822,6 +9160,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-backspace"
               >
                 <Text
                   allowFontScaling={false}
@@ -8850,7 +9189,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -8948,6 +9287,9 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="Create Passcode"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -8988,6 +9330,9 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="This passcode will protect your data"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -9216,61 +9561,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-1"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -9280,8 +9627,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-1"
               >
                 <Text
+                  accessibilityLabel="1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -9303,7 +9654,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   1
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -9341,61 +9692,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-2"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -9405,8 +9758,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-2"
               >
                 <Text
+                  accessibilityLabel="2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -9428,7 +9785,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   2
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -9466,61 +9823,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-3"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -9530,8 +9889,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-3"
               >
                 <Text
+                  accessibilityLabel="3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -9553,7 +9916,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   3
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -9603,61 +9966,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-4"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -9667,8 +10032,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-4"
               >
                 <Text
+                  accessibilityLabel="4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -9690,7 +10059,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   4
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -9728,61 +10097,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-5"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -9792,8 +10163,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-5"
               >
                 <Text
+                  accessibilityLabel="5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -9815,7 +10190,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   5
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -9853,61 +10228,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-6"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -9917,8 +10294,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-6"
               >
                 <Text
+                  accessibilityLabel="6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -9940,7 +10321,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   6
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -9990,61 +10371,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-7"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -10054,8 +10437,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-7"
               >
                 <Text
+                  accessibilityLabel="7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -10077,7 +10464,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   7
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -10115,61 +10502,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-8"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -10179,8 +10568,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-8"
               >
                 <Text
+                  accessibilityLabel="8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -10202,7 +10595,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   8
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -10240,61 +10633,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-9"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -10304,8 +10699,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-9"
               >
                 <Text
+                  accessibilityLabel="9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -10327,7 +10726,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   9
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
@@ -10390,61 +10789,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-0"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -10454,8 +10855,12 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-0"
               >
                 <Text
+                  accessibilityLabel="0"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -10477,7 +10882,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   0
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
         <View
@@ -10515,61 +10920,63 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
               ]
             }
           >
-            <RNGestureHandlerButton
-              activeOpacity={1}
+            <View
+              accessibilityState={
+                {
+                  "busy": undefined,
+                  "checked": undefined,
+                  "disabled": undefined,
+                  "expanded": undefined,
+                  "selected": undefined,
+                }
+              }
+              accessibilityValue={
+                {
+                  "max": undefined,
+                  "min": undefined,
+                  "now": undefined,
+                  "text": undefined,
+                }
+              }
+              accessible={true}
+              activeUnderlayOpacity={1}
+              animationDuration={0}
               collapsable={false}
-              delayLongPress={600}
-              enabled={true}
-              handlerTag={-1}
-              handlerType="NativeViewGestureHandler"
-              innerRef={null}
-              onActiveStateChange={[Function]}
-              onGestureHandlerEvent={[Function]}
-              onGestureHandlerStateChange={[Function]}
-              onPress={[Function]}
-              rippleColor="#9EA2A8"
+              focusable={true}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onResponderGrant={[Function]}
+              onResponderMove={[Function]}
+              onResponderRelease={[Function]}
+              onResponderTerminate={[Function]}
+              onResponderTerminationRequest={[Function]}
+              onStartShouldSetResponder={[Function]}
               style={
                 [
-                  {
-                    "backgroundColor": "transparent",
-                    "borderRadius": 4,
-                    "margin": undefined,
-                    "marginBottom": undefined,
-                    "marginEnd": undefined,
-                    "marginHorizontal": undefined,
-                    "marginLeft": undefined,
-                    "marginRight": undefined,
-                    "marginStart": undefined,
-                    "marginTop": undefined,
-                    "marginVertical": undefined,
-                  },
-                  {
-                    "cursor": undefined,
-                  },
+                  [
+                    undefined,
+                    {
+                      "margin": undefined,
+                      "marginBottom": undefined,
+                      "marginEnd": undefined,
+                      "marginHorizontal": undefined,
+                      "marginLeft": undefined,
+                      "marginRight": undefined,
+                      "marginStart": undefined,
+                      "marginTop": undefined,
+                      "marginVertical": undefined,
+                    },
+                    {
+                      "backgroundColor": "transparent",
+                      "borderRadius": 4,
+                    },
+                  ],
+                  undefined,
                 ]
               }
-              testID="passcode-button-backspace"
               underlayColor="#E4E7EA"
             >
-              <View
-                collapsable={false}
-                style={
-                  {
-                    "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={
                   {
@@ -10579,6 +10986,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                     "width": 78,
                   }
                 }
+                testID="passcode-button-backspace"
               >
                 <Text
                   allowFontScaling={false}
@@ -10607,7 +11015,7 @@ exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = `
                   
                 </Text>
               </View>
-            </RNGestureHandlerButton>
+            </View>
           </ExternalKeyboardView>
         </View>
       </View>
diff --git a/app/containers/Passcode/PasscodeChoose.tsx b/app/containers/Passcode/PasscodeChoose.tsx
index 268809313e3..55587369df4 100644
--- a/app/containers/Passcode/PasscodeChoose.tsx
+++ b/app/containers/Passcode/PasscodeChoose.tsx
@@ -1,6 +1,5 @@
 import { useRef, useState } from 'react';
 import * as Haptics from 'expo-haptics';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 
 import Base, { type IBase } from './Base';
 import { TYPE } from './constants';
@@ -62,4 +61,4 @@ const PasscodeChoose = ({ finishProcess, force = false }: IPasscodeChoose) => {
 	);
 };
 
-export default gestureHandlerRootHOC(PasscodeChoose);
+export default PasscodeChoose;
diff --git a/app/containers/Passcode/PasscodeEnter.tsx b/app/containers/Passcode/PasscodeEnter.tsx
index e7a211e1b98..2b5b28e12e8 100644
--- a/app/containers/Passcode/PasscodeEnter.tsx
+++ b/app/containers/Passcode/PasscodeEnter.tsx
@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useAsyncStorage } from '@react-native-async-storage/async-storage';
-import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
 import * as Haptics from 'expo-haptics';
 import { sha256 } from 'js-sha256';
 
@@ -136,4 +135,4 @@ const PasscodeEnter = ({ hasBiometry: initialHasBiometry, reason: initialReason,
 	);
 };
 
-export default gestureHandlerRootHOC(PasscodeEnter);
+export default PasscodeEnter;
diff --git a/app/containers/PasswordPolicies/components/Tip.tsx b/app/containers/PasswordPolicies/components/Tip.tsx
index 8ae56d5424b..84fbbcd93ae 100644
--- a/app/containers/PasswordPolicies/components/Tip.tsx
+++ b/app/containers/PasswordPolicies/components/Tip.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
@@ -42,7 +43,7 @@ const Tip = ({ iconType, description }: ITipProps) => {
 	return (
 		<View accessible accessibilityLabel={`${accessibilityLabel}${description}`} style={styles.container}>
 			<CustomIcon color={color} name={icon} size={16} />
-			<Text style={{ ...styles.text, color }}>{description}</Text>
+			<PlainText style={{ ...styles.text, color }}>{description}</PlainText>
 		</View>
 	);
 };
diff --git a/app/containers/PasswordPolicies/index.tsx b/app/containers/PasswordPolicies/index.tsx
index 3c9f0d36506..2bb8d408a71 100644
--- a/app/containers/PasswordPolicies/index.tsx
+++ b/app/containers/PasswordPolicies/index.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IPasswordPolicy } from '~/lib/hooks/useVerifyPassword';
 import Tip from './components/Tip';
@@ -32,12 +33,12 @@ const PasswordPolicies = ({ isDirty, password, policies }: IPasswordTips) => {
 
 	return (
 		<View>
-			<Text
+			<PlainText
 				accessibilityLabel={i18n.t('Your_Password_Must_Have')}
 				accessible
 				style={[styles.passwordPoliciesTitle, { color: colors.fontDefault }]}>
 				{i18n.t('Your_Password_Must_Have')}
-			</Text>
+			</PlainText>
 			<View style={styles.policies}>
 				{policies.map(item => (
 					<Tip iconType={selectTipIconType(item.name, item.regex)} description={item.label} />
diff --git a/app/containers/PlainText/index.tsx b/app/containers/PlainText/index.tsx
new file mode 100644
index 00000000000..b5350fa6132
--- /dev/null
+++ b/app/containers/PlainText/index.tsx
@@ -0,0 +1,23 @@
+import { PlainText as NativePlainText, type PlainTextProps } from 'react-native-plain-text';
+
+export const PlainText = ({
+	children,
+	style,
+	numberOfLines,
+	ellipsizeMode,
+	testID,
+	accessible = true,
+	accessibilityRole = 'text',
+	accessibilityLabel = children
+}: PlainTextProps) => (
+	<NativePlainText
+		style={style}
+		numberOfLines={numberOfLines}
+		ellipsizeMode={ellipsizeMode}
+		testID={testID}
+		accessible={accessible}
+		accessibilityRole={accessibilityRole}
+		accessibilityLabel={accessibilityLabel}>
+		{children}
+	</NativePlainText>
+);
diff --git a/app/containers/ReactionsList/AllTab.tsx b/app/containers/ReactionsList/AllTab.tsx
index d120a1f5f08..34300bfca3e 100644
--- a/app/containers/ReactionsList/AllTab.tsx
+++ b/app/containers/ReactionsList/AllTab.tsx
@@ -1,10 +1,12 @@
 import { memo, type ReactElement } from 'react';
-import { Text, View, FlatList } from 'react-native';
+import { View, FlatList } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import Emoji from '../message/components/Emoji';
 import { useTheme } from '~/theme';
 import { type IReaction } from '~/definitions';
 import I18n from '~/i18n';
+import { isAndroid } from '~/lib/methods/helpers';
 import styles from './styles';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 
@@ -47,10 +49,10 @@ const AllReactionsListItem = ({ item }: IAllReactionsListItemProps) => {
 				customEmojiStyle={styles.allTabCustomEmojiStyle}
 			/>
 			<View style={styles.textContainer}>
-				<Text style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
+				<PlainText style={[styles.allListNPeopleReacted, { color: colors.fontDefault }]}>
 					{count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })}
-				</Text>
-				<Text style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</Text>
+				</PlainText>
+				<PlainText style={[styles.allListWhoReacted, { color: colors.fontSecondaryInfo }]}>{displayNames}</PlainText>
 			</View>
 		</View>
 	);
@@ -61,6 +63,7 @@ const AllTab = ({ reactions }: IAllTabProps): ReactElement => (
 		<FlatList
 			data={reactions}
 			contentContainerStyle={styles.listContainer}
+			nestedScrollEnabled={isAndroid}
 			renderItem={({ item }) => <AllReactionsListItem item={item} />}
 			keyExtractor={item => item.emoji}
 		/>
diff --git a/app/containers/ReactionsList/UsersList.tsx b/app/containers/ReactionsList/UsersList.tsx
index 1292bdc9fb0..e52d03ee1e8 100644
--- a/app/containers/ReactionsList/UsersList.tsx
+++ b/app/containers/ReactionsList/UsersList.tsx
@@ -1,10 +1,12 @@
 import { memo, type ReactElement } from 'react';
-import { Text, View, FlatList } from 'react-native';
+import { View, FlatList } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSelector } from 'react-redux';
 
 import { useTheme } from '~/theme';
 import { type IApplicationState } from '~/definitions';
 import Avatar from '../Avatar';
+import { isAndroid } from '~/lib/methods/helpers';
 import styles from './styles';
 
 const UsersList = ({ emoji, usernames, names }: { emoji: string; usernames: string[]; names: string[] }): ReactElement => {
@@ -20,20 +22,21 @@ const UsersList = ({ emoji, usernames, names }: { emoji: string; usernames: stri
 		<FlatList
 			data={users}
 			contentContainerStyle={styles.listContainer}
+			nestedScrollEnabled={isAndroid}
 			ListHeaderComponent={
 				<View style={styles.emojiNameContainer}>
-					<Text style={[styles.emojiName, { color: colors.fontSecondaryInfo }]} testID='usersListEmojiName'>
+					<PlainText style={[styles.emojiName, { color: colors.fontSecondaryInfo }]} testID='usersListEmojiName'>
 						{emoji}
-					</Text>
+					</PlainText>
 				</View>
 			}
 			renderItem={({ item }) => (
 				<View style={styles.listItemContainer} testID='userItem'>
 					<Avatar text={item.username} size={36} />
 					<View style={styles.textContainer}>
-						<Text style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
+						<PlainText style={[styles.usernameText, { color: colors.fontDefault }]} numberOfLines={1}>
 							{useRealName && item.name ? item.name : item.username}
-						</Text>
+						</PlainText>
 					</View>
 				</View>
 			)}
diff --git a/app/containers/ReactionsList/__snapshots__/ReactionsList.test.tsx.snap b/app/containers/ReactionsList/__snapshots__/ReactionsList.test.tsx.snap
index 7c2f1d2d9f9..909061a6944 100644
--- a/app/containers/ReactionsList/__snapshots__/ReactionsList.test.tsx.snap
+++ b/app/containers/ReactionsList/__snapshots__/ReactionsList.test.tsx.snap
@@ -75,6 +75,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
             testID="reactions-tab-all"
           >
             <Text
+              accessibilityLabel="All"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -160,6 +163,7 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
               onLoadStart={[Function]}
               onProgress={[Function]}
               placeholder={[]}
+              sfEffect={null}
               source={
                 [
                   {
@@ -173,6 +177,8 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   "width": 24,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={24}
             />
@@ -262,6 +268,7 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
               onLoadStart={[Function]}
               onProgress={[Function]}
               placeholder={[]}
+              sfEffect={null}
               source={
                 [
                   {
@@ -275,6 +282,8 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   "width": 24,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={24}
             />
@@ -364,6 +373,7 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
               onLoadStart={[Function]}
               onProgress={[Function]}
               placeholder={[]}
+              sfEffect={null}
               source={
                 [
                   {
@@ -377,6 +387,8 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   "width": 24,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={24}
             />
@@ -451,6 +463,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
             testID="reactions-tab-:grinning:"
           >
             <Text
+              accessibilityLabel="😀"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 {
                   "color": "#fff",
@@ -534,6 +549,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
             testID="reactions-tab-:tada:"
           >
             <Text
+              accessibilityLabel="🎉"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 {
                   "color": "#fff",
@@ -647,6 +665,7 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
           getItem={[Function]}
           getItemCount={[Function]}
           keyExtractor={[Function]}
+          nestedScrollEnabled={false}
           onContentSizeChange={[Function]}
           onLayout={[Function]}
           onMomentumScrollBegin={[Function]}
@@ -691,6 +710,7 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   onLoadStart={[Function]}
                   onProgress={[Function]}
                   placeholder={[]}
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -704,6 +724,8 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                       "width": 36,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={36}
                 />
@@ -717,6 +739,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="2 people reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -738,6 +763,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                     2 people reacted
                   </Text>
                   <Text
+                    accessibilityLabel="you and Diego Mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -791,6 +819,7 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   onLoadStart={[Function]}
                   onProgress={[Function]}
                   placeholder={[]}
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -804,6 +833,8 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                       "width": 36,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={36}
                 />
@@ -817,6 +848,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="2 people reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -838,6 +872,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                     2 people reacted
                   </Text>
                   <Text
+                    accessibilityLabel="you and Diego Mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -891,6 +928,7 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   onLoadStart={[Function]}
                   onProgress={[Function]}
                   placeholder={[]}
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -904,6 +942,8 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                       "width": 36,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={36}
                 />
@@ -917,6 +957,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="1 person reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -938,6 +981,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                     1 person reacted
                   </Text>
                   <Text
+                    accessibilityLabel="you"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -976,6 +1022,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="😀"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "color": "#fff",
@@ -997,6 +1046,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="1 person reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -1018,6 +1070,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                     1 person reacted
                   </Text>
                   <Text
+                    accessibilityLabel="Diego Mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -1056,6 +1111,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="🎉"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "color": "#fff",
@@ -1077,6 +1135,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="1 person reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -1098,6 +1159,9 @@ exports[`Story Snapshots: ReactionsListFullName should match snapshot 1`] = `
                     1 person reacted
                   </Text>
                   <Text
+                    accessibilityLabel="Diego Mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -1204,6 +1268,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
             testID="reactions-tab-all"
           >
             <Text
+              accessibilityLabel="All"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1289,6 +1356,7 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
               onLoadStart={[Function]}
               onProgress={[Function]}
               placeholder={[]}
+              sfEffect={null}
               source={
                 [
                   {
@@ -1302,6 +1370,8 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   "width": 24,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={24}
             />
@@ -1391,6 +1461,7 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
               onLoadStart={[Function]}
               onProgress={[Function]}
               placeholder={[]}
+              sfEffect={null}
               source={
                 [
                   {
@@ -1404,6 +1475,8 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   "width": 24,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={24}
             />
@@ -1493,6 +1566,7 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
               onLoadStart={[Function]}
               onProgress={[Function]}
               placeholder={[]}
+              sfEffect={null}
               source={
                 [
                   {
@@ -1506,6 +1580,8 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   "width": 24,
                 }
               }
+              symbolSize={null}
+              symbolWeight={null}
               transition={null}
               width={24}
             />
@@ -1580,6 +1656,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
             testID="reactions-tab-:grinning:"
           >
             <Text
+              accessibilityLabel="😀"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 {
                   "color": "#fff",
@@ -1663,6 +1742,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
             testID="reactions-tab-:tada:"
           >
             <Text
+              accessibilityLabel="🎉"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 {
                   "color": "#fff",
@@ -1776,6 +1858,7 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
           getItem={[Function]}
           getItemCount={[Function]}
           keyExtractor={[Function]}
+          nestedScrollEnabled={false}
           onContentSizeChange={[Function]}
           onLayout={[Function]}
           onMomentumScrollBegin={[Function]}
@@ -1820,6 +1903,7 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   onLoadStart={[Function]}
                   onProgress={[Function]}
                   placeholder={[]}
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -1833,6 +1917,8 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                       "width": 36,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={36}
                 />
@@ -1846,6 +1932,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="2 people reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -1867,6 +1956,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                     2 people reacted
                   </Text>
                   <Text
+                    accessibilityLabel="you and diego.mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -1920,6 +2012,7 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   onLoadStart={[Function]}
                   onProgress={[Function]}
                   placeholder={[]}
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -1933,6 +2026,8 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                       "width": 36,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={36}
                 />
@@ -1946,6 +2041,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="2 people reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -1967,6 +2065,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                     2 people reacted
                   </Text>
                   <Text
+                    accessibilityLabel="you and diego.mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -2020,6 +2121,7 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   onLoadStart={[Function]}
                   onProgress={[Function]}
                   placeholder={[]}
+                  sfEffect={null}
                   source={
                     [
                       {
@@ -2033,6 +2135,8 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                       "width": 36,
                     }
                   }
+                  symbolSize={null}
+                  symbolWeight={null}
                   transition={null}
                   width={36}
                 />
@@ -2046,6 +2150,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="1 person reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -2067,6 +2174,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                     1 person reacted
                   </Text>
                   <Text
+                    accessibilityLabel="you"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -2105,6 +2215,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="😀"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "color": "#fff",
@@ -2126,6 +2239,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="1 person reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -2147,6 +2263,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                     1 person reacted
                   </Text>
                   <Text
+                    accessibilityLabel="diego.mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -2185,6 +2304,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="🎉"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     {
                       "color": "#fff",
@@ -2206,6 +2328,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                   }
                 >
                   <Text
+                    accessibilityLabel="1 person reacted"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -2227,6 +2352,9 @@ exports[`Story Snapshots: ReactionsListStory should match snapshot 1`] = `
                     1 person reacted
                   </Text>
                   <Text
+                    accessibilityLabel="diego.mello"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
diff --git a/app/containers/ReactionsList/index.tsx b/app/containers/ReactionsList/index.tsx
index aa9815b2a9b..ef05cfbe2a6 100644
--- a/app/containers/ReactionsList/index.tsx
+++ b/app/containers/ReactionsList/index.tsx
@@ -1,4 +1,5 @@
 import { Text, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IReaction } from '~/definitions';
 import I18n from '~/i18n';
@@ -65,7 +66,7 @@ const ReactionsList = ({ reactions }: IReactionsListProps) => {
 		if (tab.key === 'all') {
 			return (
 				<View style={styles.tabBarItem} testID='reactions-tab-all'>
-					<Text style={[styles.allTabItem, { color }]}>{I18n.t('All')}</Text>
+					<PlainText style={[styles.allTabItem, { color }]}>{I18n.t('All')}</PlainText>
 				</View>
 			);
 		}
diff --git a/app/containers/RoomHeader/RoomHeader.tsx b/app/containers/RoomHeader/RoomHeader.tsx
index 9b702283284..fb45634e252 100644
--- a/app/containers/RoomHeader/RoomHeader.tsx
+++ b/app/containers/RoomHeader/RoomHeader.tsx
@@ -1,6 +1,7 @@
 import { memo, type ReactElement } from 'react';
 import { StyleSheet, Text, useWindowDimensions, View } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { PlainText } from '~/containers/PlainText';
+import { Touchable } from 'react-native-gesture-handler';
 import { KeyboardFocusView } from 'react-native-external-keyboard';
 
 import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
@@ -88,7 +89,6 @@ interface IRoomHeader {
 	testID?: string;
 	sourceType?: IOmnichannelSource;
 	disabled?: boolean;
-	rightButtonsWidth?: number;
 	abacAttributes?: ISubscription['abacAttributes'];
 }
 
@@ -141,9 +141,9 @@ const HeaderTitle = memo(({ title, tmid, prid, scale, testID }: TRoomHeaderHeade
 	const titleStyle = { fontSize: TITLE_SIZE * scale, color: colors.fontTitlesLabels };
 	if (!tmid && !prid) {
 		return (
-			<Text style={[styles.title, titleStyle]} numberOfLines={isLargeFontScale ? 2 : 1} testID={testID}>
+			<PlainText style={[styles.title, titleStyle]} numberOfLines={isLargeFontScale ? 2 : 1} testID={testID}>
 				{title}
-			</Text>
+			</PlainText>
 		);
 	}
 
@@ -215,9 +215,9 @@ const Header = ({
 					teamMain={teamMain}
 					abacAttributes={abacAttributes}
 				/>
-				<Text style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
+				<PlainText style={[styles.subtitle, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 					{parentTitle}
-				</Text>
+				</PlainText>
 			</View>
 		);
 	}
@@ -233,11 +233,16 @@ const Header = ({
 			enableA11yFocus={autoFocusHeader && !disabled}
 			focusable={!disabled}
 			canBeFocused={!disabled}
-			style={[styles.container, { opacity: disabled ? 0.5 : 1, height: 36.9 * fontScale }]}
-			accessible
-			accessibilityLabel={accessibilityLabel}
-			accessibilityRole='header'>
-			<TouchableOpacity testID='room-header' onPress={handleOnPress} disabled={disabled} hitSlop={HIT_SLOP}>
+			style={[styles.container, { opacity: disabled ? 0.5 : 1, height: 36.9 * fontScale }]}>
+			<Touchable
+				activeOpacity={0.2}
+				animationDuration={{ in: 0, out: 150 }}
+				testID='room-header'
+				onPress={handleOnPress}
+				disabled={disabled}
+				hitSlop={HIT_SLOP}
+				accessibilityLabel={accessibilityLabel}
+				accessibilityRole='header'>
 				<View style={styles.titleContainer}>
 					{tmid ? null : (
 						<RoomTypeIcon
@@ -259,7 +264,7 @@ const Header = ({
 					renderFunc={renderFunc}
 					scale={scale}
 				/>
-			</TouchableOpacity>
+			</Touchable>
 		</KeyboardFocusView>
 	);
 };
diff --git a/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap b/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
index 9941163ce0e..73fc0fa6d94 100644
--- a/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
+++ b/app/containers/RoomHeader/__snapshots__/RoomHeader.test.tsx.snap
@@ -12,9 +12,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="John Doe. Online."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -45,13 +42,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="John Doe. Online."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -60,122 +80,71 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#158D65",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#158D65",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="Online"
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -183,21 +152,63 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-Online"
+            testID="John Doe"
           >
-            Online
+            John Doe
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="Online"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-Online"
+        >
+          Online
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -210,9 +221,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="John Doe. Away."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -243,13 +251,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="John Doe. Away."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -258,122 +289,71 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#AC892F",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#AC892F",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="Away"
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -381,21 +361,63 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-Away"
+            testID="John Doe"
           >
-            Away
+            John Doe
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="Away"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-Away"
+        >
+          Away
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -408,9 +430,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="John Doe. Busy."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -441,13 +460,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="John Doe. Busy."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -456,122 +498,71 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#D40C26",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#D40C26",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="Busy"
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -579,21 +570,63 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-Busy"
+            testID="John Doe"
           >
-            Busy
+            John Doe
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="Busy"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-Busy"
+        >
+          Busy
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -606,9 +639,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="John Doe. Offline."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -639,13 +669,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="John Doe. Offline."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -654,144 +707,135 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#6C727A",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="Offline"
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
                 {
                   "backgroundColor": "transparent",
+                  "flexShrink": 1,
                   "fontFamily": "Inter",
-                  "fontSize": 16,
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-Offline"
+            testID="John Doe"
           >
-            Offline
+            John Doe
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="Offline"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-Offline"
+        >
+          Offline
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -804,9 +848,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Online John Doe In a meeting."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -837,13 +878,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Online John Doe In a meeting."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -852,122 +916,71 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#158D65",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#158D65",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="In a meeting"
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -975,21 +988,63 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-In a meeting"
+            testID="John Doe"
           >
-            In a meeting
+            John Doe
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="In a meeting"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-In a meeting"
+        >
+          In a meeting
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -1002,9 +1057,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Online John Doe In a meeting, Until Jun 15, 7:00 PM."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -1035,13 +1087,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Online John Doe In a meeting, Until Jun 15, 7:00 PM."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1050,181 +1125,172 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#158D65",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#158D65",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "#6C727A",
-                    "fontSize": 12,
-                  },
-                  [
-                    {
-                      "lineHeight": 12,
-                    },
-                    {
-                      "marginRight": 4,
-                    },
+            
+          </Text>
+          <Text
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              accessibilityLabel="In a meeting"
-              numberOfLines={1}
-              style={
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="John Doe"
+          >
+            John Doe
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 12,
+                },
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
+                    "lineHeight": 12,
                   },
                   {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                    "fontSize": 12,
+                    "marginRight": 4,
                   },
-                ]
-              }
-              testID="markdown-preview-In a meeting"
-            >
-              In a meeting
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="In a meeting"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                  "lineHeight": undefined,
+                },
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                  "fontSize": 12,
+                },
+              ]
+            }
+            testID="markdown-preview-In a meeting"
+          >
+            In a meeting
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -1237,9 +1303,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Away John Doe having lunch (clock icon should be visible), Until 1:00 PM."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -1270,13 +1333,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Away John Doe having lunch (clock icon should be visible), Until 1:00 PM."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1285,181 +1371,172 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#AC892F",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#AC892F",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
             }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "#6C727A",
-                    "fontSize": 12,
-                  },
-                  [
-                    {
-                      "lineHeight": 12,
-                    },
-                    {
-                      "marginRight": 4,
-                    },
+            
+          </Text>
+          <Text
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              accessibilityLabel="having lunch (clock icon should be visible)"
-              numberOfLines={1}
-              style={
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="John Doe"
+          >
+            John Doe
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 12,
+                },
                 [
                   {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
+                    "lineHeight": 12,
                   },
                   {
-                    "color": "#6C727A",
-                    "fontSize": 12,
+                    "marginRight": 4,
                   },
-                ]
-              }
-              testID="markdown-preview-having lunch (clock icon should be visible)"
-            >
-              having lunch (clock icon should be visible)
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="having lunch (clock icon should be visible)"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                  "lineHeight": undefined,
+                },
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                  "fontSize": 12,
+                },
+              ]
+            }
+            testID="markdown-preview-having lunch (clock icon should be visible)"
+          >
+            having lunch (clock icon should be visible)
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -1472,9 +1549,6 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Online John Doe In a meeting (past expiry — clock icon should be hidden)."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -1505,13 +1579,36 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Online John Doe In a meeting (past expiry — clock icon should be hidden)."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1520,122 +1617,71 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#158D65",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#158D65",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "height": 16,
+                      "textAlign": "center",
+                      "textAlignVertical": "center",
+                      "width": 16,
                     },
                     [
                       {
-                        "height": 16,
-                        "textAlign": "center",
-                        "textAlignVertical": "center",
-                        "width": 16,
+                        "marginRight": 4,
                       },
-                      [
-                        {
-                          "marginRight": 4,
-                        },
-                        undefined,
-                      ],
+                      undefined,
                     ],
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="John Doe"
-            >
-              John Doe
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="In a meeting (past expiry — clock icon should be hidden)"
+            accessibilityLabel="John Doe"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -1643,21 +1689,63 @@ exports[`Story Snapshots: DM_Status should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-In a meeting (past expiry — clock icon should be hidden)"
+            testID="John Doe"
           >
-            In a meeting (past expiry — clock icon should be hidden)
+            John Doe
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="In a meeting (past expiry — clock icon should be hidden)"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-In a meeting (past expiry — clock icon should be hidden)"
+        >
+          In a meeting (past expiry — clock icon should be hidden)
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
 ]
@@ -1675,9 +1763,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel private channel ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -1708,13 +1793,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel private channel ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1723,96 +1831,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="private channel"
-            >
-              private channel
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="private channel"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="private channel"
+          >
+            private channel
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -1825,9 +1922,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="public channel public channel ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -1858,13 +1952,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="public channel public channel ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -1873,96 +1990,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="public channel"
-            >
-              public channel
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="public channel"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="public channel"
+          >
+            public channel
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -1975,9 +2081,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Discussion discussion ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -2008,13 +2111,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Discussion discussion ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2023,112 +2149,100 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              accessibilityLabel="discussion"
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="discussion"
-            >
-              discussion
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="discussion"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                  "lineHeight": undefined,
+                },
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="discussion"
+          >
+            discussion
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2141,9 +2255,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Omnichannel omnichannel ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -2174,13 +2285,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Omnichannel omnichannel ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2189,96 +2323,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#6C727A",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#6C727A",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="omnichannel"
-            >
-              omnichannel
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="omnichannel"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="omnichannel"
+          >
+            omnichannel
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2291,9 +2414,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private team private team ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -2324,13 +2444,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private team private team ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2339,96 +2482,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="private team"
-            >
-              private team
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="private team"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="private team"
+          >
+            private team
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2441,9 +2573,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Team public team ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -2474,13 +2603,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Team public team ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2489,96 +2641,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="public team"
-            >
-              public team
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="public team"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="public team"
+          >
+            public team
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2591,9 +2732,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="Message group dm ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -2624,13 +2762,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="Message group dm ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2639,96 +2800,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="group dm"
-            >
-              group dm
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="group dm"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="group dm"
+          >
+            group dm
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2741,9 +2891,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel online dm ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -2774,13 +2921,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel online dm ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2789,96 +2959,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="online dm"
-            >
-              online dm
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="online dm"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="online dm"
+          >
+            online dm
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2891,9 +3050,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel away dm ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -2924,13 +3080,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel away dm ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -2939,96 +3118,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="away dm"
-            >
-              away dm
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="away dm"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="away dm"
+          >
+            away dm
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -3041,9 +3209,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel busy dm ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -3074,13 +3239,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel busy dm ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -3089,96 +3277,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="busy dm"
-            >
-              busy dm
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="busy dm"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="busy dm"
+          >
+            busy dm
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -3191,9 +3368,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel loading dm ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -3224,13 +3398,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel loading dm ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -3239,96 +3436,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="loading dm"
-            >
-              loading dm
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="loading dm"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="loading dm"
+          >
+            loading dm
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -3341,9 +3527,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel offline dm ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -3374,13 +3557,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel offline dm ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -3389,96 +3595,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="offline dm"
-            >
-              offline dm
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="offline dm"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="offline dm"
+          >
+            offline dm
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -3491,9 +3686,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel classified ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -3524,13 +3716,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel classified ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -3539,96 +3754,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="classified"
-            >
-              classified
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="classified"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="classified"
+          >
+            classified
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -3641,9 +3845,6 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private team classified ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -3674,13 +3875,36 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private team classified ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -3689,96 +3913,85 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="classified"
-            >
-              classified
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="classified"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="classified"
+          >
+            classified
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
 ]
@@ -3796,9 +4009,6 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title subtitle."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -3829,13 +4039,36 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title subtitle."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -3844,113 +4077,63 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="subtitle"
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -3958,21 +4141,62 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-subtitle"
           >
-            subtitle
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="subtitle"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-subtitle"
+        >
+          subtitle
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -3985,9 +4209,6 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title subtitle."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -4018,13 +4239,36 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title subtitle."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -4033,113 +4277,63 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#F2F3F5",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#F2F3F5",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#F2F3F5",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="subtitle"
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#C1C7D0",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -4147,21 +4341,62 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#9EA2A8",
-                  "fontSize": 12,
+                  "color": "#F2F3F5",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-subtitle"
           >
-            subtitle
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="subtitle"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#C1C7D0",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#9EA2A8",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-subtitle"
+        >
+          subtitle
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -4174,9 +4409,6 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title subtitle."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -4207,13 +4439,36 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title subtitle."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -4222,113 +4477,63 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#F2F3F5",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#F2F3F5",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#F2F3F5",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="subtitle"
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#E4E7EA",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -4336,21 +4541,62 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#9EA2A8",
-                  "fontSize": 12,
+                  "color": "#F2F3F5",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-subtitle"
           >
-            subtitle
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="subtitle"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#E4E7EA",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#9EA2A8",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-subtitle"
+        >
+          subtitle
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
 ]
@@ -4368,9 +4614,6 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title parent title."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -4401,13 +4644,36 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title parent title."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -4416,143 +4682,134 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                  "lineHeight": undefined,
+                },
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
             }
+            testID="markdown-preview-title"
           >
-            <Text
-              accessibilityLabel="title"
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="markdown-preview-title"
-            >
-              title
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
+            title
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
             }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
-              }
-            >
-              parent title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="parent title"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            parent title
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -4565,13 +4822,6 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel markdown
-preview
-#3
-4
-5 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."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -4602,13 +4852,40 @@ preview
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel markdown
+preview
+#3
+4
+5 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."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -4617,147 +4894,138 @@ preview
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            accessibilityLabel="markdown preview #3 4 5"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontFamily": "Inter",
+                  "fontSize": 16,
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "lineHeight": 22,
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#2F343D",
+                  "lineHeight": undefined,
+                },
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
             }
-          >
-            <Text
-              accessibilityLabel="markdown preview #3 4 5"
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                    "lineHeight": undefined,
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="markdown
+            testID="markdown
 preview
 #3
 4
 5"
-            >
-              markdown preview #3 4 5
-            </Text>
-          </View>
-          <View
-            style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
           >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+            markdown preview #3 4 5
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+            }
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#6C727A",
-                  },
-                ]
-              }
-            >
-              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>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <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"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "400",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#6C727A",
+                },
+              ]
+            }
+          >
+            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>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
 ]
@@ -4775,9 +5043,6 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -4808,13 +5073,36 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -4823,96 +5111,85 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="title"
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <Text
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="title"
+          >
+            title
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -4925,9 +5202,6 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel 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 ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -4958,13 +5232,36 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel 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 ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -4973,96 +5270,85 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="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"
-            >
-              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>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
+          <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"
+            accessibilityRole="text"
+            accessible={true}
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "flexShrink": 1,
+                  "fontFamily": "Inter",
+                  "fontVariant": [
+                    "tabular-nums",
+                  ],
+                  "fontWeight": "600",
+                  "textAlign": "left",
+                },
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
+              ]
+            }
+            testID="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"
+          >
+            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>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -5075,9 +5361,6 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title subtitle."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -5108,13 +5391,36 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title subtitle."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -5123,113 +5429,63 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
-            accessibilityLabel="subtitle"
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -5237,21 +5493,62 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-subtitle"
           >
-            subtitle
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          accessibilityLabel="subtitle"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-subtitle"
+        >
+          subtitle
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -5264,9 +5561,6 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title 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."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -5297,13 +5591,36 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title 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."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -5312,113 +5629,63 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <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"
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -5426,21 +5693,62 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-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"
           >
-            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
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <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"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-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"
+        >
+          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>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -5453,9 +5761,6 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel 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 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."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -5486,13 +5791,36 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel 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 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."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -5501,114 +5829,63 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
-                    },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-              testID="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"
-            >
-              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>
+                      "marginRight": 4,
+                    },
+                    undefined,
+                  ],
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <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"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                  "lineHeight": undefined,
-                },
                 {
                   "backgroundColor": "transparent",
                   "flexShrink": 1,
@@ -5616,21 +5893,63 @@ exports[`Story Snapshots: TitleSubtitle should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
-            testID="markdown-preview-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"
+            testID="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"
           >
             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>
-      </RNGestureHandlerButton>
+        <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"
+          accessibilityRole="text"
+          accessible={true}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontSize": 16,
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "lineHeight": 22,
+                "textAlign": "left",
+              },
+              {
+                "color": "#2F343D",
+                "lineHeight": undefined,
+              },
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+          testID="markdown-preview-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"
+        >
+          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>
     </ExternalKeyboardView>
   </View>,
 ]
@@ -5648,9 +5967,6 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -5681,13 +5997,36 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -5696,94 +6035,60 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5794,37 +6099,60 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
           >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                }
-              }
-            >
-              user 1
-               
-            </Text>
-            is typing
-            ...
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "600",
+                "textAlign": "left",
+              }
+            }
+          >
+            user 1
+             
+          </Text>
+          is typing
+          ...
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -5837,9 +6165,6 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -5870,13 +6195,36 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -5885,94 +6233,60 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5983,37 +6297,60 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
           >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                }
-              }
-            >
-              user 1 and user 2
-               
-            </Text>
-            are typing
-            ...
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "600",
+                "textAlign": "left",
+              }
+            }
+          >
+            user 1 and user 2
+             
+          </Text>
+          are typing
+          ...
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -6026,9 +6363,6 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
     }
   >
     <ExternalKeyboardView
-      accessibilityLabel="private channel title ."
-      accessibilityRole="header"
-      accessible={true}
       autoFocus={false}
       canBeFocused={true}
       enableA11yFocus={false}
@@ -6059,13 +6393,36 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
+      <View
+        accessibilityLabel="private channel title ."
+        accessibilityRole="header"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeOpacity={0.2}
+        animationDuration={
+          {
+            "in": 0,
+            "out": 150,
+          }
+        }
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        exclusive={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 5,
@@ -6074,94 +6431,60 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
             "top": 5,
           }
         }
-        innerRef={null}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        rippleColor="transparent"
-        style={
-          [
-            undefined,
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         testID="room-header"
-        touchSoundDisabled={false}
       >
         <View
-          accessible={true}
-          collapsable={false}
           style={
             {
-              "opacity": 1,
+              "alignItems": "center",
+              "flexDirection": "row",
             }
           }
         >
-          <View
+          <Text
+            allowFontScaling={false}
+            selectable={false}
             style={
-              {
-                "alignItems": "center",
-                "flexDirection": "row",
-              }
-            }
-          >
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
+              [
+                {
+                  "color": "#1F2329",
+                  "fontSize": 16,
+                },
                 [
                   {
-                    "color": "#1F2329",
-                    "fontSize": 16,
+                    "lineHeight": 16,
                   },
                   [
                     {
-                      "lineHeight": 16,
+                      "marginRight": 4,
                     },
-                    [
-                      {
-                        "marginRight": 4,
-                      },
-                      undefined,
-                    ],
+                    undefined,
                   ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-            <Text
-              numberOfLines={1}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "600",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#1F2329",
-                    "fontSize": 16,
-                  },
-                ]
-              }
-            >
-              title
-            </Text>
-          </View>
+                ],
+                {
+                  "fontFamily": "custom",
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                },
+                {},
+              ]
+            }
+          >
+            
+          </Text>
           <Text
+            accessibilityLabel="title"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6172,37 +6495,60 @@ exports[`Story Snapshots: Typing should match snapshot 1`] = `
                   "fontVariant": [
                     "tabular-nums",
                   ],
-                  "fontWeight": "400",
+                  "fontWeight": "600",
                   "textAlign": "left",
                 },
                 {
-                  "color": "#6C727A",
-                  "fontSize": 12,
+                  "color": "#1F2329",
+                  "fontSize": 16,
                 },
               ]
             }
           >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                }
-              }
-            >
-              user 1, user 2, user 3, user 4, user 5
-               
-            </Text>
-            are typing
-            ...
+            title
           </Text>
         </View>
-      </RNGestureHandlerButton>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "backgroundColor": "transparent",
+                "flexShrink": 1,
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              {
+                "color": "#6C727A",
+                "fontSize": 12,
+              },
+            ]
+          }
+        >
+          <Text
+            style={
+              {
+                "backgroundColor": "transparent",
+                "fontFamily": "Inter",
+                "fontVariant": [
+                  "tabular-nums",
+                ],
+                "fontWeight": "600",
+                "textAlign": "left",
+              }
+            }
+          >
+            user 1, user 2, user 3, user 4, user 5
+             
+          </Text>
+          are typing
+          ...
+        </Text>
+      </View>
     </ExternalKeyboardView>
   </View>,
 ]
diff --git a/app/containers/RoomItem/Actions.tsx b/app/containers/RoomItem/Actions.tsx
index ed14ae1e18a..0e45cd6df34 100644
--- a/app/containers/RoomItem/Actions.tsx
+++ b/app/containers/RoomItem/Actions.tsx
@@ -1,19 +1,19 @@
 import { memo } from 'react';
 import { View } from 'react-native';
 import Animated, {
+	type SharedValue,
 	useAnimatedStyle,
-	interpolate,
-	withSpring,
 	useAnimatedReaction,
-	useSharedValue
+	useDerivedValue,
+	useSharedValue,
+	withTiming
 } from 'react-native-reanimated';
-import { RectButton } from 'react-native-gesture-handler';
-import * as Haptics from 'expo-haptics';
-import { scheduleOnRN } from 'react-native-worklets';
 
+import { RectButton } from '~/containers/GestureButtons';
 import { CustomIcon } from '../CustomIcon';
 import { DisplayMode } from '~/lib/constants/constantDisplayMode';
-import styles, { ACTION_WIDTH, LONG_SWIPE } from './styles';
+import styles from './styles';
+import { getActionWidth, getFullSwipeThreshold } from './swipeRelease';
 import { type ILeftActionsProps, type IRightActionsProps } from './interfaces';
 import { useTheme } from '~/theme';
 import I18n from '~/i18n';
@@ -21,14 +21,33 @@ import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsi
 
 const CONDENSED_ICON_SIZE = 24;
 const EXPANDED_ICON_SIZE = 28;
+const EXPAND_DURATION = 300;
+
+const useHideExpandProgress = (transX: SharedValue<number>, width: number) => {
+	const fullSwipeThreshold = getFullSwipeThreshold(width);
+	const expandProgress = useSharedValue(0);
+
+	useAnimatedReaction(
+		() => -transX.value >= fullSwipeThreshold,
+		(isCrossed, wasCrossed) => {
+			if (isCrossed !== wasCrossed) {
+				expandProgress.value = withTiming(isCrossed ? 1 : 0, { duration: EXPAND_DURATION });
+			}
+		}
+	);
+
+	return expandProgress;
+};
 
 export const LeftActions = memo(({ transX, isRead, width, onToggleReadPress, displayMode }: ILeftActionsProps) => {
 	const { colors } = useTheme();
 
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
 
-	const animatedStyles = useAnimatedStyle(() => ({
-		transform: [{ translateX: transX.value }]
+	const actionWidth = getActionWidth(width);
+
+	const animatedButtonStyles = useAnimatedStyle(() => ({
+		width: Math.max(transX.value, 0)
 	}));
 
 	const isCondensed = displayMode === DisplayMode.Condensed;
@@ -43,23 +62,23 @@ export const LeftActions = memo(({ transX, isRead, width, onToggleReadPress, dis
 			<Animated.View
 				style={[
 					styles.actionLeftButtonContainer,
-					{ width: width * 2, backgroundColor: colors.badgeBackgroundLevel2, right: '100%' },
+					{ backgroundColor: colors.badgeBackgroundLevel2 },
 					viewHeight,
-					animatedStyles
+					animatedButtonStyles
 				]}>
-				<View style={[styles.actionLeftButtonContainer, viewHeight]}>
-					<RectButton
-						accessible={false}
-						accessibilityLabel={I18n.t(isRead ? 'Mark_unread' : 'Mark_read')}
-						style={styles.actionButton}
-						onPress={onToggleReadPress}>
+				<RectButton
+					accessible={false}
+					accessibilityLabel={I18n.t(isRead ? 'Mark_unread' : 'Mark_read')}
+					style={[styles.actionButton, styles.actionButtonContentEnd]}
+					onPress={onToggleReadPress}>
+					<View style={[styles.actionIconSlot, { width: actionWidth }]}>
 						<CustomIcon
 							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
 							name={isRead ? 'flag' : 'check'}
 							color={colors.fontWhite}
 						/>
-					</RectButton>
-				</View>
+					</View>
+				</RectButton>
 			</Animated.View>
 		</View>
 	);
@@ -70,55 +89,23 @@ export const RightActions = memo(({ transX, favorite, width, toggleFav, onHidePr
 
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
 
-	const animatedFavStyles = useAnimatedStyle(() => ({ transform: [{ translateX: transX.value }] }));
-
-	const translateXHide = useSharedValue(0);
+	const actionWidth = getActionWidth(width);
+	const expandProgress = useHideExpandProgress(transX, width);
 
-	const triggerHideAnimation = (toValue: number) => {
-		Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
-		translateXHide.value = withSpring(toValue, { overshootClamping: true, mass: 0.7 });
-	};
+	const buttonWidths = useDerivedValue(() => {
+		const reveal = Math.max(-transX.value, 0);
+		const favorite = (reveal / 2) * (1 - expandProgress.value);
+		return { favorite, hide: reveal - favorite };
+	});
 
-	useAnimatedReaction(
-		() => transX.value,
-		(currentTransX, previousTransX) => {
-			// Triggers the animation and hapticFeedback if swipe reaches/unreaches the threshold.
-			if (I18n.isRTL) {
-				if (previousTransX && currentTransX > LONG_SWIPE && previousTransX <= LONG_SWIPE) {
-					scheduleOnRN(triggerHideAnimation, ACTION_WIDTH);
-				} else if (previousTransX && currentTransX <= LONG_SWIPE && previousTransX > LONG_SWIPE) {
-					scheduleOnRN(triggerHideAnimation, 0);
-				}
-			} else if (previousTransX && currentTransX < -LONG_SWIPE && previousTransX >= -LONG_SWIPE) {
-				scheduleOnRN(triggerHideAnimation, -ACTION_WIDTH);
-			} else if (previousTransX && currentTransX >= -LONG_SWIPE && previousTransX < -LONG_SWIPE) {
-				scheduleOnRN(triggerHideAnimation, 0);
-			}
-		}
-	);
+	const animatedFavStyles = useAnimatedStyle(() => ({
+		width: buttonWidths.value.favorite,
+		right: buttonWidths.value.hide
+	}));
 
-	const animatedHideStyles = useAnimatedStyle(() => {
-		if (I18n.isRTL) {
-			if (transX.value < LONG_SWIPE && transX.value >= 2 * ACTION_WIDTH) {
-				const parallaxSwipe = interpolate(
-					transX.value,
-					[2 * ACTION_WIDTH, LONG_SWIPE],
-					[ACTION_WIDTH, ACTION_WIDTH + 0.1 * transX.value]
-				);
-				return { transform: [{ translateX: parallaxSwipe + translateXHide.value }] };
-			}
-			return { transform: [{ translateX: transX.value - ACTION_WIDTH + translateXHide.value }] };
-		}
-		if (transX.value > -LONG_SWIPE && transX.value <= -2 * ACTION_WIDTH) {
-			const parallaxSwipe = interpolate(
-				transX.value,
-				[-2 * ACTION_WIDTH, -LONG_SWIPE],
-				[-ACTION_WIDTH, -ACTION_WIDTH + 0.1 * transX.value]
-			);
-			return { transform: [{ translateX: parallaxSwipe + translateXHide.value }] };
-		}
-		return { transform: [{ translateX: transX.value + ACTION_WIDTH + translateXHide.value }] };
-	});
+	const animatedHideStyles = useAnimatedStyle(() => ({
+		width: buttonWidths.value.hide
+	}));
 
 	const isCondensed = displayMode === DisplayMode.Condensed;
 	const viewHeight = { height: isCondensed ? rowHeightCondensed : rowHeight };
@@ -130,49 +117,36 @@ export const RightActions = memo(({ transX, favorite, width, toggleFav, onHidePr
 			accessibilityElementsHidden
 			importantForAccessibility='no'>
 			<Animated.View
-				style={[
-					styles.actionRightButtonContainer,
-					{
-						width,
-						backgroundColor: colors.statusFontWarning,
-						left: '100%'
-					},
-					viewHeight,
-					animatedFavStyles
-				]}>
+				style={[styles.actionRightButtonContainer, { backgroundColor: colors.statusFontWarning }, viewHeight, animatedFavStyles]}>
 				<RectButton
 					accessible={false}
 					accessibilityLabel={I18n.t(favorite ? 'Unfavorite' : 'Favorite')}
-					style={[styles.actionButton, { backgroundColor: colors.statusFontWarning }]}
+					style={styles.actionButton}
 					onPress={toggleFav}>
-					<CustomIcon
-						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
-						name={favorite ? 'star-filled' : 'star'}
-						color={colors.fontWhite}
-					/>
+					<View style={[styles.actionIconSlot, { width: actionWidth }]}>
+						<CustomIcon
+							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
+							name={favorite ? 'star-filled' : 'star'}
+							color={colors.fontWhite}
+						/>
+					</View>
 				</RectButton>
 			</Animated.View>
 			<Animated.View
 				style={[
 					styles.actionRightButtonContainer,
-					{
-						width: width * 2,
-						backgroundColor: colors.buttonBackgroundSecondaryPress,
-						left: '100%'
-					},
+					{ right: 0, backgroundColor: colors.buttonBackgroundSecondaryPress },
 					viewHeight,
 					animatedHideStyles
 				]}>
-				<RectButton
-					accessible={false}
-					accessibilityLabel={I18n.t('Hide')}
-					style={[styles.actionButton, { backgroundColor: colors.buttonBackgroundSecondaryPress }]}
-					onPress={onHidePress}>
-					<CustomIcon
-						size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
-						name='unread-on-top-disabled'
-						color={colors.fontWhite}
-					/>
+				<RectButton accessible={false} accessibilityLabel={I18n.t('Hide')} style={styles.actionButton} onPress={onHidePress}>
+					<View style={[styles.actionIconSlot, { width: actionWidth }]}>
+						<CustomIcon
+							size={isCondensed ? CONDENSED_ICON_SIZE : EXPANDED_ICON_SIZE}
+							name='unread-on-top-disabled'
+							color={colors.fontWhite}
+						/>
+					</View>
 				</RectButton>
 			</Animated.View>
 		</View>
diff --git a/app/containers/RoomItem/RoomContextMenu.ios.tsx b/app/containers/RoomItem/RoomContextMenu.ios.tsx
new file mode 100644
index 00000000000..b11fe3d793d
--- /dev/null
+++ b/app/containers/RoomItem/RoomContextMenu.ios.tsx
@@ -0,0 +1,60 @@
+import { Host } from '@expo/ui';
+import { ContextMenu, RNHostView, Text, VStack } from '@expo/ui/swift-ui';
+import { font, foregroundStyle, frame, lineLimit, padding } from '@expo/ui/swift-ui/modifiers';
+import { View } from 'react-native';
+
+import ContextMenuButton from '~/containers/ContextMenuButton/ContextMenuButton.ios';
+import { useTheme } from '~/theme';
+import { useRoomContextMenuActions } from './useRoomContextMenuActions';
+import { type IRoomContextMenu } from './RoomContextMenu';
+
+const PREVIEW_WIDTH = 300;
+
+const RoomContextMenu = ({ children, enabled, rid, type, name, lastMessage, isRead, favorite, width }: IRoomContextMenu) => {
+	const { colors, theme } = useTheme();
+	const actions = useRoomContextMenuActions({ rid, type, isRead, favorite });
+
+	if (!enabled) {
+		return children;
+	}
+
+	return (
+		<Host style={{ width }} matchContents={{ vertical: true }} colorScheme={theme === 'light' ? 'light' : 'dark'}>
+			<ContextMenu>
+				<ContextMenu.Trigger>
+					<RNHostView matchContents>
+						<View style={{ width }}>{children}</View>
+					</RNHostView>
+				</ContextMenu.Trigger>
+				<ContextMenu.Preview>
+					<VStack
+						alignment='leading'
+						spacing={4}
+						modifiers={[frame({ width: PREVIEW_WIDTH, alignment: 'leading' }), padding({ all: 16 })]}>
+						<Text modifiers={[font({ textStyle: 'headline' }), foregroundStyle(colors.fontTitlesLabels), lineLimit(1)]}>
+							{name}
+						</Text>
+						{lastMessage ? (
+							<Text modifiers={[font({ textStyle: 'subheadline' }), foregroundStyle(colors.fontSecondaryInfo), lineLimit(3)]}>
+								{lastMessage}
+							</Text>
+						) : null}
+					</VStack>
+				</ContextMenu.Preview>
+				<ContextMenu.Items>
+					{actions.map(action => (
+						<ContextMenuButton
+							key={action.testID}
+							testID={action.testID}
+							title={action.title}
+							icon={action.icon}
+							onPress={action.onPress}
+						/>
+					))}
+				</ContextMenu.Items>
+			</ContextMenu>
+		</Host>
+	);
+};
+
+export default RoomContextMenu;
diff --git a/app/containers/RoomItem/RoomContextMenu.tsx b/app/containers/RoomItem/RoomContextMenu.tsx
new file mode 100644
index 00000000000..41189832517
--- /dev/null
+++ b/app/containers/RoomItem/RoomContextMenu.tsx
@@ -0,0 +1,19 @@
+import { type ReactElement } from 'react';
+
+import { type SubscriptionType } from '~/definitions';
+
+export interface IRoomContextMenu {
+	children: ReactElement;
+	enabled: boolean;
+	rid: string;
+	type: SubscriptionType;
+	name: string;
+	lastMessage: string;
+	isRead: boolean;
+	favorite: boolean;
+	width: number;
+}
+
+const RoomContextMenu = ({ children }: IRoomContextMenu) => children;
+
+export default RoomContextMenu;
diff --git a/app/containers/RoomItem/RoomItem.tsx b/app/containers/RoomItem/RoomItem.tsx
index 3122a052b8a..e531c66dfba 100644
--- a/app/containers/RoomItem/RoomItem.tsx
+++ b/app/containers/RoomItem/RoomItem.tsx
@@ -10,6 +10,7 @@ import Title from './Title';
 import UpdatedAt from './UpdatedAt';
 import Touchable from './Touchable';
 import Tag from './Tag';
+import RoomContextMenu from './RoomContextMenu';
 import I18n from '~/i18n';
 import { DisplayMode } from '~/lib/constants/constantDisplayMode';
 import { type IRoomItemProps } from './interfaces';
@@ -77,112 +78,70 @@ const RoomItem = ({
 	const accessibilityLabel = `${name}. ${statusAccessibilityLabel}. ${accessibilityDate}. ${memoizedMessage}`;
 
 	return (
-		<Touchable
-			onPress={onPress}
-			onLongPress={onLongPress}
-			width={width}
-			favorite={favorite}
-			isRead={isRead}
+		<RoomContextMenu
+			enabled={swipeEnabled}
 			rid={rid}
-			testID={testID}
 			type={type}
-			isFocused={!!isFocused}
-			swipeEnabled={swipeEnabled}
-			displayMode={displayMode}>
-			<Wrapper
-				accessibilityLabel={accessibilityLabel}
-				accessibilityHint={I18n.t('Long_press_for_more_actions')}
-				avatar={avatar}
-				type={type}
-				userId={userId}
+			name={name}
+			lastMessage={memoizedMessage}
+			isRead={isRead}
+			favorite={!!favorite}
+			width={width}>
+			<Touchable
+				onPress={onPress}
+				onLongPress={onLongPress}
+				width={width}
+				favorite={favorite}
+				isRead={isRead}
 				rid={rid}
-				prid={prid}
-				status={status}
-				isGroupChat={isGroupChat}
-				teamMain={teamMain}
-				displayMode={displayMode}
-				showAvatar={showAvatar}
-				showLastMessage={!!showLastMessage}
-				sourceType={sourceType}>
-				{showLastMessage && displayMode === DisplayMode.Expanded ? (
-					<>
-						<View style={styles.titleContainer}>
-							{showAvatar ? (
-								<TypeIcon
-									userId={userId}
+				type={type}
+				isFocused={!!isFocused}
+				swipeEnabled={swipeEnabled}
+				displayMode={displayMode}>
+				<Wrapper
+					testID={testID}
+					accessibilityLabel={accessibilityLabel}
+					accessibilityHint={I18n.t('Long_press_for_more_actions')}
+					avatar={avatar}
+					type={type}
+					userId={userId}
+					rid={rid}
+					prid={prid}
+					status={status}
+					isGroupChat={isGroupChat}
+					teamMain={teamMain}
+					displayMode={displayMode}
+					showAvatar={showAvatar}
+					showLastMessage={!!showLastMessage}
+					sourceType={sourceType}>
+					{showLastMessage && displayMode === DisplayMode.Expanded ? (
+						<>
+							<View style={styles.titleContainer}>
+								{showAvatar ? (
+									<TypeIcon
+										userId={userId}
+										type={type}
+										prid={prid}
+										status={status}
+										isGroupChat={isGroupChat}
+										teamMain={teamMain}
+										sourceType={sourceType}
+										abacAttributes={abacAttributes}
+									/>
+								) : null}
+								<Title name={name} hideUnreadStatus={hideUnreadStatus} alert={alert} />
+								{autoJoin ? <Tag testID='auto-join-tag' name={I18n.t('Auto-join')} /> : null}
+								{isLargeFontScale ? null : <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />}
+							</View>
+							<View style={styles.row} testID='room-item-last-message-container'>
+								<LastMessage
+									lastMessage={lastMessage}
 									type={type}
-									prid={prid}
-									status={status}
-									isGroupChat={isGroupChat}
-									teamMain={teamMain}
-									sourceType={sourceType}
-									abacAttributes={abacAttributes}
-								/>
-							) : null}
-							<Title name={name} hideUnreadStatus={hideUnreadStatus} alert={alert} />
-							{autoJoin ? <Tag testID='auto-join-tag' name={I18n.t('Auto-join')} /> : null}
-							{isLargeFontScale ? null : <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />}
-						</View>
-						<View style={styles.row} testID='room-item-last-message-container'>
-							<LastMessage
-								lastMessage={lastMessage}
-								type={type}
-								showLastMessage={showLastMessage}
-								username={username || ''}
-								alert={alert && !hideUnreadStatus}
-								useRealName={useRealName}
-							/>
-							<UnreadBadge
-								unread={unread}
-								userMentions={userMentions}
-								groupMentions={groupMentions}
-								tunread={tunread}
-								tunreadUser={tunreadUser}
-								tunreadGroup={tunreadGroup}
-								hideMentionStatus={hideMentionStatus}
-								hideUnreadStatus={hideUnreadStatus}
-							/>
-							{isInvited ? (
-								<CustomIcon
-									size={24}
-									name='mail'
-									role='status'
-									accessibilityLabel={I18n.t('Invited')}
-									color={colors.badgeBackgroundLevel2}
+									showLastMessage={showLastMessage}
+									username={username || ''}
+									alert={alert && !hideUnreadStatus}
+									useRealName={useRealName}
 								/>
-							) : null}
-						</View>
-						{isLargeFontScale ? <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} /> : null}
-					</>
-				) : (
-					<>
-						<View style={[styles.titleContainer, styles.flex]}>
-							<TypeIcon
-								userId={userId}
-								type={type}
-								prid={prid}
-								status={status}
-								isGroupChat={isGroupChat}
-								teamMain={teamMain}
-								size={22}
-								style={{ marginRight: 8 }}
-								sourceType={sourceType}
-								abacAttributes={abacAttributes}
-							/>
-							<Title name={name} hideUnreadStatus={hideUnreadStatus} alert={alert} />
-							{autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null}
-							{isInvited ? (
-								<CustomIcon
-									size={24}
-									name='mail'
-									role='status'
-									accessibilityLabel={I18n.t('Invited')}
-									color={colors.badgeBackgroundLevel2}
-								/>
-							) : null}
-
-							<View style={styles.wrapUpdatedAndBadge}>
-								{isLargeFontScale ? null : <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />}
 								<UnreadBadge
 									unread={unread}
 									userMentions={userMentions}
@@ -193,13 +152,65 @@ const RoomItem = ({
 									hideMentionStatus={hideMentionStatus}
 									hideUnreadStatus={hideUnreadStatus}
 								/>
+								{isInvited ? (
+									<CustomIcon
+										size={24}
+										name='mail'
+										role='status'
+										accessibilityLabel={I18n.t('Invited')}
+										color={colors.badgeBackgroundLevel2}
+									/>
+								) : null}
+							</View>
+							{isLargeFontScale ? <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} /> : null}
+						</>
+					) : (
+						<>
+							<View style={[styles.titleContainer, styles.flex]}>
+								<TypeIcon
+									userId={userId}
+									type={type}
+									prid={prid}
+									status={status}
+									isGroupChat={isGroupChat}
+									teamMain={teamMain}
+									size={22}
+									style={{ marginRight: 8 }}
+									sourceType={sourceType}
+									abacAttributes={abacAttributes}
+								/>
+								<Title name={name} hideUnreadStatus={hideUnreadStatus} alert={alert} />
+								{autoJoin ? <Tag name={I18n.t('Auto-join')} /> : null}
+								{isInvited ? (
+									<CustomIcon
+										size={24}
+										name='mail'
+										role='status'
+										accessibilityLabel={I18n.t('Invited')}
+										color={colors.badgeBackgroundLevel2}
+									/>
+								) : null}
+
+								<View style={styles.wrapUpdatedAndBadge}>
+									{isLargeFontScale ? null : <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} />}
+									<UnreadBadge
+										unread={unread}
+										userMentions={userMentions}
+										groupMentions={groupMentions}
+										tunread={tunread}
+										tunreadUser={tunreadUser}
+										tunreadGroup={tunreadGroup}
+										hideMentionStatus={hideMentionStatus}
+										hideUnreadStatus={hideUnreadStatus}
+									/>
+								</View>
 							</View>
-						</View>
-						{isLargeFontScale ? <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} /> : null}
-					</>
-				)}
-			</Wrapper>
-		</Touchable>
+							{isLargeFontScale ? <UpdatedAt date={date} hideUnreadStatus={hideUnreadStatus} alert={alert} /> : null}
+						</>
+					)}
+				</Wrapper>
+			</Touchable>
+		</RoomContextMenu>
 	);
 };
 
diff --git a/app/containers/RoomItem/Tag.tsx b/app/containers/RoomItem/Tag.tsx
index 095017e8b75..0ff0d2e5d9d 100644
--- a/app/containers/RoomItem/Tag.tsx
+++ b/app/containers/RoomItem/Tag.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { themes } from '~/lib/constants/colors';
 import { useTheme } from '~/theme';
@@ -15,9 +16,9 @@ const Tag = memo(({ name, testID }: ITag) => {
 
 	return (
 		<View style={[styles.tagContainer, { backgroundColor: themes[theme].strokeLight }]}>
-			<Text style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
+			<PlainText style={[styles.tagText, { color: themes[theme].fontHint }]} numberOfLines={1} testID={testID}>
 				{name}
-			</Text>
+			</PlainText>
 		</View>
 	);
 });
diff --git a/app/containers/RoomItem/Title.tsx b/app/containers/RoomItem/Title.tsx
index 69432588bc2..24b9060516e 100644
--- a/app/containers/RoomItem/Title.tsx
+++ b/app/containers/RoomItem/Title.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import styles from './styles';
 import { type ITitleProps } from './interfaces';
@@ -8,12 +8,12 @@ import { useTheme } from '~/theme';
 const Title = memo(({ name, hideUnreadStatus, alert }: ITitleProps) => {
 	const { colors } = useTheme();
 	return (
-		<Text
+		<PlainText
 			style={[styles.title, alert && !hideUnreadStatus && styles.alert, { color: colors.fontTitlesLabels }]}
 			ellipsizeMode='tail'
 			numberOfLines={1}>
 			{name}
-		</Text>
+		</PlainText>
 	);
 });
 
diff --git a/app/containers/RoomItem/Touchable.tsx b/app/containers/RoomItem/Touchable.tsx
index b3a0db45221..0e943398818 100644
--- a/app/containers/RoomItem/Touchable.tsx
+++ b/app/containers/RoomItem/Touchable.tsx
@@ -1,30 +1,35 @@
-import { useRef, memo, type ReactElement } from 'react';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import {
-	Gesture,
-	GestureDetector,
-	type GestureUpdateEvent,
-	type PanGestureHandlerEventPayload
-} from 'react-native-gesture-handler';
-import { scheduleOnRN } from 'react-native-worklets';
+import { useEffect, useState, memo, type ReactElement } from 'react';
+import { I18nManager } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, useAnimatedReaction } from 'react-native-reanimated';
+import { GestureDetector, usePanGesture } from 'react-native-gesture-handler';
+import { runOnUISync, scheduleOnRN } from 'react-native-worklets';
+import * as Haptics from 'expo-haptics';
 
 import Touch from '../Touch';
-import { ACTION_WIDTH, LONG_SWIPE, SMALL_SWIPE } from './styles';
 import { LeftActions, RightActions } from './Actions';
+import { getFullSwipeThreshold, getSwipeRelease } from './swipeRelease';
+import { unregisterOpenSwipeItem, closeOpenSwipeItem, settleSwipeRow } from './openSwipeItem';
 import { type ITouchableProps } from './interfaces';
 import { useTheme } from '~/theme';
-import I18n from '~/i18n';
 import { toggleFav } from '~/lib/methods/toggleFav';
 import { toggleRead } from '~/lib/methods/toggleRead';
 import { hideRoom } from '~/lib/methods/hideRoom';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 
+const rubberband = (overshoot: number, dimension: number, constant = 0.55) => {
+	'worklet';
+	return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
+};
+
+const triggerThresholdHaptic = () => {
+	Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+};
+
 const Touchable = ({
 	children,
 	type,
 	onPress,
 	onLongPress,
-	testID,
 	width,
 	favorite,
 	isRead,
@@ -35,190 +40,129 @@ const Touchable = ({
 }: ITouchableProps): ReactElement => {
 	const { colors } = useTheme();
 	const serverVersion = useAppSelector(state => state.server.version);
+	const direction = I18nManager.isRTL ? -1 : 1;
 	const rowOffSet = useSharedValue(0);
 	const transX = useSharedValue(0);
-	const rowState = useSharedValue(0); // 0: closed, 1: right opened, -1: left opened
-	const valueRef = useRef(0);
-
-	const close = () => {
-		rowState.value = 0;
-		transX.value = withSpring(0, { overshootClamping: true });
-		rowOffSet.value = 0;
-		valueRef.current = 0;
-	};
+	const crossedFullSwipe = useSharedValue(false);
+	const touchClosedOtherRow = useSharedValue(false);
+	const [actionsMounted, setActionsMounted] = useState(false);
+	const row = { rid, transX, rowOffSet };
+
+	useAnimatedReaction(
+		() => transX.value !== 0,
+		(moved, previouslyMoved) => {
+			if (previouslyMoved !== null && moved !== previouslyMoved) {
+				scheduleOnRN(setActionsMounted, moved);
+			}
+		}
+	);
+
+	const close = () => settleSwipeRow(row, 0);
+
+	useEffect(() => () => unregisterOpenSwipeItem(rid), [rid]);
 
 	const handleToggleFav = () => {
 		toggleFav(rid, favorite);
 		close();
 	};
 
-	const handleToggleRead = () => {
-		toggleRead(rid, isRead, serverVersion);
-	};
+	const toggleReadRoom = () => toggleRead(rid, isRead, serverVersion);
 
-	const handleHideChannel = () => {
-		hideRoom(rid, type);
-	};
+	const hideChannel = () => hideRoom(rid, type);
 
 	const onToggleReadPress = () => {
-		handleToggleRead();
+		toggleReadRoom();
 		close();
 	};
 
 	const onHidePress = () => {
-		handleHideChannel();
+		hideChannel();
 		close();
 	};
 
-	const handlePress = () => {
-		if (rowState.value !== 0) {
+	const guardTouch = (action?: () => void) => () => {
+		if (rowOffSet.value !== 0) {
 			close();
 			return;
 		}
-		if (onPress) {
-			onPress();
-		}
-	};
-
-	const handleLongPress = () => {
-		if (rowState.value !== 0) {
-			close();
+		if (touchClosedOtherRow.value || runOnUISync(closeOpenSwipeItem, rid)) {
+			touchClosedOtherRow.value = false;
 			return;
 		}
-
-		if (onLongPress) {
-			onLongPress();
-		}
+		action?.();
 	};
 
-	const handleRelease = (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
-		const { translationX } = event;
-		valueRef.current += translationX;
-		let toValue = 0;
-		if (rowState.value === 0) {
-			// if no option is opened
-			if (translationX > 0 && translationX < LONG_SWIPE) {
-				if (I18n.isRTL) {
-					toValue = 2 * ACTION_WIDTH;
-				} else {
-					toValue = ACTION_WIDTH;
-				}
-				rowState.value = -1;
-			} else if (translationX >= LONG_SWIPE) {
-				toValue = 0;
-				if (I18n.isRTL) {
-					handleHideChannel();
-				} else {
-					handleToggleRead();
-				}
-			} else if (translationX < 0 && translationX > -LONG_SWIPE) {
-				// open trailing option if he swipe left
-				if (I18n.isRTL) {
-					toValue = -ACTION_WIDTH;
-				} else {
-					toValue = -2 * ACTION_WIDTH;
-				}
-				rowState.value = 1;
-			} else if (translationX <= -LONG_SWIPE) {
-				toValue = 0;
-				rowState.value = 1;
-				if (I18n.isRTL) {
-					handleToggleRead();
-				} else {
-					handleHideChannel();
-				}
-			} else {
-				toValue = 0;
-			}
-		} else if (rowState.value === -1) {
-			// if left option is opened
-			if (valueRef.current < SMALL_SWIPE) {
-				toValue = 0;
-				rowState.value = 0;
-			} else if (valueRef.current > LONG_SWIPE) {
-				toValue = 0;
-				rowState.value = 0;
-				if (I18n.isRTL) {
-					handleHideChannel();
-				} else {
-					handleToggleRead();
-				}
-			} else if (I18n.isRTL) {
-				toValue = 2 * ACTION_WIDTH;
-			} else {
-				toValue = ACTION_WIDTH;
+	const handlePress = guardTouch(onPress);
+
+	const handleLongPress = guardTouch(onLongPress);
+
+	const panGesture = usePanGesture({
+		activeOffsetX: [-10, 10], // More sensitive horizontal detection
+		failOffsetY: [-20, 20], // Fail on vertical movement to distinguish scrolling
+		enabled: swipeEnabled,
+		onBegin: () => {
+			crossedFullSwipe.value = false;
+			touchClosedOtherRow.value = closeOpenSwipeItem(rid);
+		},
+		onActivate: () => {
+			scheduleOnRN(setActionsMounted, true);
+		},
+		onUpdate: event => {
+			const next = rowOffSet.value + direction * event.translationX;
+			const threshold = getFullSwipeThreshold(width);
+			const overshoot = Math.abs(next) - threshold;
+			transX.value = overshoot > 0 ? Math.sign(next) * (threshold + rubberband(overshoot, width)) : next;
+			const crossed = overshoot >= 0;
+			if (crossed !== crossedFullSwipe.value) {
+				crossedFullSwipe.value = crossed;
+				scheduleOnRN(triggerThresholdHaptic);
 			}
-		} else if (rowState.value === 1) {
-			// if right option is opened
-			if (valueRef.current > -2 * SMALL_SWIPE) {
-				toValue = 0;
-				rowState.value = 0;
-			} else if (valueRef.current < -LONG_SWIPE) {
-				if (I18n.isRTL) {
-					handleToggleRead();
-				} else {
-					handleHideChannel();
-				}
-			} else if (I18n.isRTL) {
-				toValue = -ACTION_WIDTH;
-			} else {
-				toValue = -2 * ACTION_WIDTH;
+		},
+		onDeactivate: event => {
+			const release = getSwipeRelease({
+				restingOffset: rowOffSet.value,
+				offset: rowOffSet.value + direction * event.translationX,
+				width
+			});
+			settleSwipeRow(row, release.restingOffset, direction * event.velocityX);
+			if (release.fullSwipe === 'left') {
+				scheduleOnRN(toggleReadRoom);
+			} else if (release.fullSwipe === 'right') {
+				scheduleOnRN(hideChannel);
 			}
 		}
-		transX.value = withSpring(toValue, { overshootClamping: true });
-		rowOffSet.value = toValue;
-		valueRef.current = toValue;
-	};
-
-	const longPressGesture = Gesture.LongPress()
-		.minDuration(500)
-		.onStart(() => {
-			scheduleOnRN(handleLongPress);
-		});
-
-	const panGesture = Gesture.Pan()
-		.activeOffsetX([-10, 10]) // More sensitive horizontal detection
-		.failOffsetY([-20, 20]) // Fail on vertical movement to distinguish scrolling
-		.enabled(swipeEnabled)
-		.onUpdate(event => {
-			transX.value = event.translationX + rowOffSet.value;
-			if (transX.value > 2 * width) transX.value = 2 * width;
-		})
-		.onEnd(event => {
-			scheduleOnRN(handleRelease, event);
-		});
-
-	// Use Race instead of Simultaneous to prevent conflicts
-	// Pan gesture will take priority over long press for horizontal swipes
-	const composedGesture = Gesture.Race(panGesture, longPressGesture);
+	});
 
 	const animatedStyles = useAnimatedStyle(() => ({
-		transform: [{ translateX: transX.value }]
+		transform: [{ translateX: direction * transX.value }]
 	}));
 
 	return (
-		<GestureDetector gesture={composedGesture}>
+		<GestureDetector gesture={panGesture}>
 			<Animated.View>
-				<LeftActions
-					transX={transX}
-					isRead={isRead}
-					width={width}
-					onToggleReadPress={onToggleReadPress}
-					displayMode={displayMode}
-				/>
-				<RightActions
-					transX={transX}
-					favorite={favorite}
-					width={width}
-					toggleFav={handleToggleFav}
-					onHidePress={onHidePress}
-					displayMode={displayMode}
-				/>
+				{actionsMounted ? (
+					<>
+						<LeftActions
+							transX={transX}
+							isRead={isRead}
+							width={width}
+							onToggleReadPress={onToggleReadPress}
+							displayMode={displayMode}
+						/>
+						<RightActions
+							transX={transX}
+							favorite={favorite}
+							width={width}
+							toggleFav={handleToggleFav}
+							onHidePress={onHidePress}
+							displayMode={displayMode}
+						/>
+					</>
+				) : null}
 				<Animated.View style={animatedStyles}>
 					<Touch
 						onPress={handlePress}
 						onLongPress={handleLongPress}
-						testID={testID}
 						style={{
 							backgroundColor: isFocused ? colors.surfaceTint : colors.surfaceRoom
 						}}>
diff --git a/app/containers/RoomItem/UpdatedAt.tsx b/app/containers/RoomItem/UpdatedAt.tsx
index 021328e849f..98d3f1e74c2 100644
--- a/app/containers/RoomItem/UpdatedAt.tsx
+++ b/app/containers/RoomItem/UpdatedAt.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import styles from './styles';
 import { capitalize } from '~/lib/methods/helpers/room';
@@ -13,7 +13,7 @@ const UpdatedAt = memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps) => {
 		return null;
 	}
 	return (
-		<Text
+		<PlainText
 			style={[
 				styles.date,
 				{
@@ -30,7 +30,7 @@ const UpdatedAt = memo(({ date, hideUnreadStatus, alert }: IUpdatedAtProps) => {
 			ellipsizeMode='tail'
 			numberOfLines={1}>
 			{capitalize(date)}
-		</Text>
+		</PlainText>
 	);
 });
 
diff --git a/app/containers/RoomItem/Wrapper.tsx b/app/containers/RoomItem/Wrapper.tsx
index e2990b283dd..8f6e55b5530 100644
--- a/app/containers/RoomItem/Wrapper.tsx
+++ b/app/containers/RoomItem/Wrapper.tsx
@@ -8,7 +8,14 @@ import { type IWrapperProps } from './interfaces';
 import styles from './styles';
 import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
-const Wrapper = ({ accessibilityLabel, accessibilityHint, children, displayMode, ...props }: IWrapperProps): ReactElement => {
+const Wrapper = ({
+	accessibilityLabel,
+	accessibilityHint,
+	children,
+	displayMode,
+	testID,
+	...props
+}: IWrapperProps): ReactElement => {
 	const { colors } = useTheme();
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
 	return (
@@ -16,6 +23,7 @@ const Wrapper = ({ accessibilityLabel, accessibilityHint, children, displayMode,
 			style={[styles.container, { height: displayMode === DisplayMode.Condensed ? rowHeightCondensed : rowHeight }]}
 			accessibilityLabel={accessibilityLabel}
 			accessibilityHint={accessibilityHint}
+			testID={testID}
 			accessible
 			accessibilityRole='button'>
 			<IconOrAvatar displayMode={displayMode} {...props} />
diff --git a/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap b/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
index 9743e9e9ebc..863b437b2c8 100644
--- a/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
+++ b/app/containers/RoomItem/__snapshots__/RoomItem.test.tsx.snap
@@ -2,37185 +2,27487 @@
 
 exports[`Story Snapshots: Alerts should match snapshot 1`] = `
 [
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
       }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
       >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
+          <View
             style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
+              {
+                "width": 750,
+              }
             }
-            underlayColor="black"
           >
             <View
-              collapsable={false}
+              handlerTags={
+                [
+                  1,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
               style={
                 {
-                  "backgroundColor": "black",
-                  "borderBottomLeftRadius": undefined,
-                  "borderBottomRightRadius": undefined,
-                  "borderRadius": undefined,
-                  "borderTopLeftRadius": undefined,
-                  "borderTopRightRadius": undefined,
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
+                  "display": "contents",
                 }
               }
-            />
-            <Text
-              allowFontScaling={false}
-              selectable={false}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
             >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  2,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
+                          undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="unread. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="unread"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                unread
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#9EA2A8",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="unread"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  3,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="unread. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="unread"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                unread
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#9EA2A8",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-+999"
+                                >
+                                  <Text
+                                    accessibilityLabel="+999"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    +999
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="unread"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="unread. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  4,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    unread
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#9EA2A8",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="user mentions. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="user mentions"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                user mentions
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#F5455C",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="mention-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="user mentions"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="unread. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  5,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    unread
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#9EA2A8",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-+999"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        +999
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="group mentions. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="group mentions"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                group mentions
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#F38C39",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="group-mention-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="group mentions"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  6,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="thread unread. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="thread unread"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                thread unread
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#095AD2",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="thread unread"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="user mentions. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  7,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    user mentions
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#F5455C",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="mention-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="thread unread user. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="thread unread user"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                thread unread user
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#F5455C",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="thread unread user"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
+        >
+          <View
+            style={
+              {
+                "width": 750,
+              }
             }
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            <View
+              handlerTags={
+                [
+                  8,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="thread unread group. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="thread unread group"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                thread unread group
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#F38C39",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="thread unread group"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="group mentions. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  9,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    group mentions
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#F38C39",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="group-mention-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="user mentions priority 1. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="user mentions priority 1"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                user mentions priority 1
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#F5455C",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="mention-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="user mentions priority 1"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="thread unread. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  10,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    thread unread
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#095AD2",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="group mentions priority 2. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="group mentions priority 2"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                group mentions priority 2
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#F38C39",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="group-mention-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="group mentions priority 2"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  11,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="thread unread user. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
+                  "display": "contents",
+                }
               }
             >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    thread unread user
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#F5455C",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="thread unread priority 3. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="thread unread priority 3"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                thread unread priority 3
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#095AD2",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="thread unread priority 3"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: Basic should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  matchContentsVertical={true}
+  style={
+    {
+      "width": 750,
+    }
+  }
+>
+  <ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      name="trigger"
     >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <ViewManagerAdapter_ExpoUI
+        expoInternalSizeFromChildren={true}
+        layoutRoot={false}
+        matchContents={true}
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
+        <View
           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,
-              },
-            ]
+            {
+              "width": 750,
+            }
           }
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
+            handlerTags={
+              [
+                12,
+              ]
+            }
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onGestureHandlerTouchEvent={[Function]}
+            onStartShouldSetResponder={[Function]}
+            pointerEvents="box-none"
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "display": "contents",
               }
             }
-          />
-          <View
-            style={{}}
           >
-            <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="thread unread group. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
+            <View>
               <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
+                style={[Function]}
               >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  placeholder={[]}
-                  priority="high"
-                  source={
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={true}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
+                  style={
                     [
-                      {
-                        "headers": {
-                          "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                        },
-                        "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
-                      },
+                      undefined,
+                      undefined,
                     ]
                   }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
+                >
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
                     }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
+                    accessibilityValue={
                       {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
                         [
+                          undefined,
                           {
-                            "lineHeight": 22,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "#FFFFFF",
+                            "borderRadius": undefined,
                           },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
                         ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
+                        undefined,
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    thread unread group
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#1D74F5",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
                     <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#F38C39",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
-                          undefined,
-                        ]
-                      }
-                      testID="unread-badge-1"
+                      style={{}}
                     >
-                      <Text
-                        numberOfLines={1}
+                      <View
+                        accessibilityHint="Long press for more actions"
+                        accessibilityLabel="rocket.cat. private channel. undefined. "
+                        accessibilityRole="button"
+                        accessible={true}
                         style={
                           [
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "paddingLeft": 14,
                             },
-                            undefined,
                             {
-                              "color": "#FFFFFF",
+                              "height": 75,
                             },
                           ]
                         }
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityLabel="rocket.cat's avatar"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "borderRadius": 4,
+                                "height": 48,
+                                "width": 48,
+                              },
+                              {
+                                "marginRight": 10,
+                              },
+                            ]
+                          }
+                          testID="avatar"
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={{"current":"Object"}}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={48}
+                            nativeViewRef={{"current":"NativeComponent"}}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            sfEffect={null}
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 48,
+                                "width": 48,
+                              }
+                            }
+                            symbolSize={null}
+                            symbolWeight={null}
+                            transition={null}
+                            width={48}
+                          />
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "borderBottomWidth": 0.5,
+                                "flex": 1,
+                                "paddingRight": 14,
+                                "paddingVertical": 10,
+                              },
+                              {
+                                "borderColor": "#CBCED1",
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                },
+                                {
+                                  "flex": 1,
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#1F2329",
+                                    "fontSize": 22,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 22,
+                                    },
+                                    [
+                                      {
+                                        "marginRight": 4,
+                                      },
+                                      {
+                                        "marginRight": 8,
+                                      },
+                                    ],
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                            <Text
+                              accessibilityLabel="rocket.cat"
+                              accessibilityRole="text"
+                              accessible={true}
+                              ellipsizeMode="tail"
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 17,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              rocket.cat
+                            </Text>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-end",
+                                }
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
                   </View>
-                </View>
+                </ExternalKeyboardView>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
+        </View>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      name="preview"
     >
-      <View
-        style={
+      <ViewManagerAdapter_ExpoUI
+        alignment="leading"
+        modifiers={
           [
             {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
+              "$type": "frame",
+              "alignment": "leading",
+              "width": 300,
             },
             {
-              "height": 75,
+              "$type": "padding",
+              "all": 16,
             },
-            [Function],
           ]
         }
+        onGlobalEvent={[Function]}
+        spacing={4}
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "font",
+                "textStyle": "headline",
+              },
+              {
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#1F2329",
+                  "type": "color",
+                },
               },
               {
-                "height": 75,
+                "$type": "lineLimit",
+                "limit": 1,
+                "reservesSpace": undefined,
               },
             ]
           }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
+          onGlobalEvent={[Function]}
+          text="rocket.cat"
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      name="items"
     >
-      <View
-        style={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
+              "$type": "disabled",
+              "disabled": false,
             },
+          ]
+        }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+        role="default"
+        testID="action-sheet-mark-read"
+      >
+        <ViewManagerAdapter_ExpoUI
+          title="Mark read"
+        />
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
             {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
+              "$type": "disabled",
+              "disabled": false,
             },
+          ]
+        }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+        role="default"
+        testID="action-sheet-favorite"
+      >
+        <ViewManagerAdapter_ExpoUI
+          title="Favorite"
+        />
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
             {
-              "height": 75,
+              "$type": "disabled",
+              "disabled": false,
             },
-            [Function],
           ]
         }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+        role="default"
+        testID="action-sheet-hide"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
+        <ViewManagerAdapter_ExpoUI
+          title="Hide"
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: CondensedRoomItem should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  13,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 60,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 36,
+                                  "width": 36,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={36}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              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,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={36}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#095AD2",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="user mentions priority 1. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  14,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    user mentions priority 1
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#F5455C",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="mention-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="unread. private channel. undefined. No message"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 60,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 36,
+                                  "width": 36,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={36}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              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,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={36}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="unread"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                unread
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#9EA2A8",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-+999"
+                                >
+                                  <Text
+                                    accessibilityLabel="+999"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    +999
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="unread"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="No message"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="group mentions priority 2. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  15,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
                         [
-                          {
-                            "lineHeight": 22,
-                          },
                           [
+                            undefined,
                             {
-                              "marginRight": 4,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "marginRight": 8,
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    group mentions priority 2
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            {
-                              "color": "#1D74F5",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#F38C39",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="group-mention-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. public channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 60,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 36,
+                                  "width": 36,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={36}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              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,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={36}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "alignSelf": "center",
+                                      "borderRadius": 4,
+                                      "marginHorizontal": 4,
+                                    },
+                                    {
+                                      "backgroundColor": "#CBCED1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Auto-join"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "paddingHorizontal": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Auto-join
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: CondensedRoomItemWithoutAvatar should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  16,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 60,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        {
+                                          "color": "#1D74F5",
+                                        },
+                                      ],
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                                <View
+                                  style={
+                                    [
+                                      {
+                                        "alignItems": "center",
+                                        "justifyContent": "center",
+                                        "marginLeft": 10,
+                                        "paddingHorizontal": 5,
+                                        "paddingVertical": 3,
+                                      },
+                                      {
+                                        "backgroundColor": "#095AD2",
+                                        "borderRadius": 10.5,
+                                        "minWidth": 21,
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                  testID="unread-badge-1"
+                                >
+                                  <Text
+                                    accessibilityLabel="1"
+                                    accessibilityRole="text"
+                                    accessible={true}
+                                    numberOfLines={1}
+                                    style={
+                                      [
+                                        {
+                                          "backgroundColor": "transparent",
+                                          "fontFamily": "Inter",
+                                          "fontSize": 13,
+                                          "fontVariant": [
+                                            "tabular-nums",
+                                          ],
+                                          "fontWeight": "600",
+                                          "textAlign": "left",
+                                        },
+                                        undefined,
+                                        {
+                                          "color": "#FFFFFF",
+                                        },
+                                      ]
+                                    }
+                                  >
+                                    1
+                                  </Text>
+                                </View>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="thread unread priority 3. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  17,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    thread unread priority 3
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#095AD2",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 60,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: Basic should match snapshot 1`] = `
-<View
-  collapsable={false}
->
-  <View
-    accessibilityElementsHidden={true}
-    importantForAccessibility="no"
-    pointerEvents="box-none"
-    style={
-      [
-        {
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-        },
-        {
-          "flexDirection": "row",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "justifyContent": "center",
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#1D74F5",
-            "right": "100%",
-            "width": 1500,
-          },
-          {
-            "height": 75,
-          },
-          [Function],
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "height": 75,
-            },
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Mark read"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-  </View>
-  <View
-    accessibilityElementsHidden={true}
-    importantForAccessibility="no"
-    pointerEvents="box-none"
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-        },
-        {
-          "height": 75,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "justifyContent": "center",
-            "position": "absolute",
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#8E6300",
-            "left": "100%",
-            "width": 750,
-          },
-          {
-            "height": 75,
-          },
-          [Function],
-        ]
-      }
-    >
-      <RNGestureHandlerButton
-        accessibilityLabel="Favorite"
-        accessible={false}
-        activeOpacity={0.105}
-        collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "backgroundColor": "#8E6300",
-              "height": "100%",
-              "justifyContent": "center",
-              "width": 80,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
-        underlayColor="black"
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "black",
-              "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}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "color": "#FFFFFF",
-                "fontSize": 28,
-              },
-              [
-                {
-                  "lineHeight": 28,
-                },
-                undefined,
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
+                "$type": "disabled",
+                "disabled": false,
               },
-              {},
             ]
           }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          
-        </Text>
-      </RNGestureHandlerButton>
-    </View>
-    <View
-      style={
-        [
-          {
-            "justifyContent": "center",
-            "position": "absolute",
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#9EA2A8",
-            "left": "100%",
-            "width": 1500,
-          },
-          {
-            "height": 75,
-          },
-          [Function],
-        ]
-      }
-    >
-      <RNGestureHandlerButton
-        accessibilityLabel="Hide"
-        accessible={false}
-        activeOpacity={0.105}
-        collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "backgroundColor": "#9EA2A8",
-              "height": "100%",
-              "justifyContent": "center",
-              "width": 80,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
-        underlayColor="black"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "black",
-              "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}
-          style={
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "color": "#FFFFFF",
-                "fontSize": 28,
+                "$type": "disabled",
+                "disabled": false,
               },
-              [
-                {
-                  "lineHeight": 28,
-                },
-                undefined,
-              ],
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
+                "$type": "disabled",
+                "disabled": false,
               },
-              {},
             ]
           }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
         >
-          
-        </Text>
-      </RNGestureHandlerButton>
-    </View>
-  </View>
-  <View
-    style={[Function]}
-  >
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={true}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
       }
-    >
-      <RNGestureHandlerButton
-        activeOpacity={1}
-        collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onLongPress={[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"
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#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={{}}
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            accessibilityHint="Long press for more actions"
-            accessibilityLabel="rocket.cat. private channel. undefined. "
-            accessibilityRole="button"
-            accessible={true}
             style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "paddingLeft": 14,
-                },
-                {
-                  "height": 75,
-                },
-              ]
+              {
+                "width": 750,
+              }
             }
           >
             <View
-              accessibilityLabel="rocket.cat's avatar"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "borderRadius": 4,
-                    "height": 48,
-                    "width": 48,
-                  },
-                  {
-                    "marginRight": 10,
-                  },
+                  18,
                 ]
               }
-              testID="avatar"
-            >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="cover"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={48}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[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=96",
-                    },
-                  ]
-                }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 48,
-                    "width": 48,
-                  }
-                }
-                transition={null}
-                width={48}
-              />
-            </View>
-            <View
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
               style={
-                [
-                  {
-                    "borderBottomWidth": 0.5,
-                    "flex": 1,
-                    "paddingRight": 14,
-                    "paddingVertical": 10,
-                  },
-                  {
-                    "borderColor": "#CBCED1",
-                  },
-                ]
+                {
+                  "display": "contents",
+                }
               }
             >
-              <View
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    },
-                    {
-                      "flex": 1,
-                    },
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#1F2329",
-                        "fontSize": 22,
-                      },
-                      [
-                        {
-                          "lineHeight": 22,
-                        },
-                        [
-                          {
-                            "marginRight": 4,
-                          },
-                          {
-                            "marginRight": 8,
-                          },
-                        ],
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 17,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#1F2329",
-                      },
-                    ]
-                  }
-                >
-                  rocket.cat
-                </Text>
+              <View>
                 <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                    }
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
+                        undefined,
                         undefined,
                       ]
                     }
                   >
-                    10:00
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: CondensedRoomItem should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          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. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 60,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "alignSelf": "center",
+                                      "borderRadius": 4,
+                                      "marginHorizontal": 4,
+                                    },
+                                    {
+                                      "backgroundColor": "#CBCED1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Auto-join"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "paddingHorizontal": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Auto-join
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 60,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 60,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: ExpandedRoomItemWithoutAvatar should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 60,
-                  },
+                  19,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={36}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#095AD2",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "justifyContent": "center",
+                                },
+                                {
+                                  "height": 75,
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#1F2329",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    [
+                                      {
+                                        "marginRight": 4,
+                                      },
+                                      {
+                                        "marginRight": 12,
+                                      },
+                                    ],
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#1D74F5",
+                                      },
+                                    ],
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-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"
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "marginLeft": 10,
+                                      "paddingHorizontal": 5,
+                                      "paddingVertical": 3,
+                                    },
+                                    {
+                                      "backgroundColor": "#095AD2",
+                                      "borderRadius": 10.5,
+                                      "minWidth": 21,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="unread-badge-1"
+                              >
+                                <Text
+                                  accessibilityLabel="1"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      undefined,
+                                      {
+                                        "color": "#FFFFFF",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 60,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 60,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 24,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="unread. private channel. undefined. No message"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 60,
-                  },
+                  20,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={36}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    unread
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#9EA2A8",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-+999"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        +999
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "justifyContent": "center",
+                                },
+                                {
+                                  "height": 75,
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#1F2329",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    [
+                                      {
+                                        "marginRight": 4,
+                                      },
+                                      {
+                                        "marginRight": 12,
+                                      },
+                                    ],
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#1D74F5",
+                                      },
+                                    ],
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-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"
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "marginLeft": 10,
+                                      "paddingHorizontal": 5,
+                                      "paddingVertical": 3,
+                                    },
+                                    {
+                                      "backgroundColor": "#095AD2",
+                                      "borderRadius": 10.5,
+                                      "minWidth": 21,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="unread-badge-1"
+                              >
+                                <Text
+                                  accessibilityLabel="1"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      undefined,
+                                      {
+                                        "color": "#FFFFFF",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 60,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                  "$type": "font",
+                  "textStyle": "subheadline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 60,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
+        >
+          <View
+            style={
+              {
+                "width": 750,
+              }
             }
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+            <View
+              handlerTags={
+                [
+                  21,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "justifyContent": "center",
+                                },
+                                {
+                                  "height": 75,
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#1F2329",
+                                    "fontSize": 24,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 24,
+                                    },
+                                    [
+                                      {
+                                        "marginRight": 4,
+                                      },
+                                      {
+                                        "marginRight": 12,
+                                      },
+                                    ],
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#1D74F5",
+                                      },
+                                    ],
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-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"
+                              >
+                                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>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 24,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: InvitedRoom should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. public channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 60,
-                  },
+                  22,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={36}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
+                        undefined,
                       ]
                     }
                   >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "alignSelf": "center",
-                          "borderRadius": 4,
-                          "marginHorizontal": 4,
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "#CBCED1",
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "paddingHorizontal": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
                       }
-                    >
-                      Auto-join
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="Invited"
+                                allowFontScaling={false}
+                                role="status"
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1D74F5",
+                                      "fontSize": 24,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 24,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: CondensedRoomItemWithoutAvatar should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 60,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 60,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
+                  23,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 60,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 36,
+                                  "width": 36,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={36}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              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,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={36}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="Invited"
+                                allowFontScaling={false}
+                                role="status"
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1D74F5",
+                                      "fontSize": 24,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 24,
+                                      },
+                                      undefined,
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 24,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 60,
-                  },
+                  24,
                 ]
               }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           [
+                            undefined,
                             {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "color": "#1D74F5",
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "center",
-                            "justifyContent": "center",
-                            "marginLeft": 10,
-                            "paddingHorizontal": 5,
-                            "paddingVertical": 3,
-                          },
-                          {
-                            "backgroundColor": "#095AD2",
-                            "borderRadius": 10.5,
-                            "minWidth": 21,
-                          },
                           undefined,
                         ]
                       }
-                      testID="unread-badge-1"
+                      underlayColor="#E4E7EA"
                     >
-                      <Text
-                        numberOfLines={1}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 13,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            undefined,
-                            {
-                              "color": "#FFFFFF",
-                            },
-                          ]
-                        }
+                      <View
+                        style={{}}
                       >
-                        1
-                      </Text>
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. No message"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <Text
+                                accessibilityLabel="No message"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-No message"
+                              >
+                                No message
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
                     </View>
-                  </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 60,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                  "$type": "font",
+                  "textStyle": "subheadline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 60,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+            text="No message"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
+                  25,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 2"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <Text
+                                accessibilityLabel="2"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-2"
+                              >
+                                2
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 24,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="2"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 60,
-                  },
+                  26,
                 ]
               }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. You: 1"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <Text
+                                accessibilityLabel="You: 1"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-You: 1"
+                              >
+                                You: 1
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 60,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                  "$type": "font",
+                  "textStyle": "subheadline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 60,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+            text="You: 1"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
+                  27,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-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"
+                              >
+                                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>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 24,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              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. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 60,
-                  },
+                  28,
                 ]
               }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
+                        undefined,
                       ]
                     }
                   >
-                    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={
-                      [
-                        {
-                          "alignItems": "center",
-                          "alignSelf": "center",
-                          "borderRadius": 4,
-                          "marginHorizontal": 4,
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "#CBCED1",
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "paddingHorizontal": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
                       }
-                    >
-                      Auto-join
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#1D74F5",
+                                      },
+                                    ],
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-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"
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "marginLeft": 10,
+                                      "paddingHorizontal": 5,
+                                      "paddingVertical": 3,
+                                    },
+                                    {
+                                      "backgroundColor": "#9EA2A8",
+                                      "borderRadius": 10.5,
+                                      "minWidth": 21,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="unread-badge-1"
+                              >
+                                <Text
+                                  accessibilityLabel="1"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      undefined,
+                                      {
+                                        "color": "#FFFFFF",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: ExpandedRoomItemWithoutAvatar should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  29,
                 ]
               }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "justifyContent": "center",
-                    },
-                    {
-                      "height": 75,
-                    },
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#1F2329",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        [
-                          {
-                            "marginRight": 4,
-                          },
-                          {
-                            "marginRight": 12,
-                          },
-                        ],
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1D74F5",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
+              }
+            >
+              <View>
                 <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
+                  style={[Function]}
                 >
-                  <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"
-                    numberOfLines={2}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
-                    testID="markdown-preview-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"
                   >
-                    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={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                          "marginLeft": 10,
-                          "paddingHorizontal": 5,
-                          "paddingVertical": 3,
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "backgroundColor": "#095AD2",
-                          "borderRadius": 10.5,
-                          "minWidth": 21,
-                        },
-                        undefined,
-                      ]
-                    }
-                    testID="unread-badge-1"
-                  >
-                    <Text
-                      numberOfLines={1}
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
-                          {
-                            "color": "#FFFFFF",
-                          },
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      1
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#1D74F5",
+                                      },
+                                    ],
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-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"
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "marginLeft": 10,
+                                      "paddingHorizontal": 5,
+                                      "paddingVertical": 3,
+                                    },
+                                    {
+                                      "backgroundColor": "#9EA2A8",
+                                      "borderRadius": 10.5,
+                                      "minWidth": 21,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="unread-badge-+999"
+                              >
+                                <Text
+                                  accessibilityLabel="+999"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      undefined,
+                                      {
+                                        "color": "#FFFFFF",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  +999
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
+                  "$type": "font",
+                  "textStyle": "subheadline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  30,
                 ]
               }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "justifyContent": "center",
-                    },
-                    {
-                      "height": 75,
-                    },
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#1F2329",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        [
-                          {
-                            "marginRight": 4,
-                          },
-                          {
-                            "marginRight": 12,
-                          },
-                        ],
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1D74F5",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
+              }
+            >
+              <View>
                 <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
+                  style={[Function]}
                 >
-                  <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"
-                    numberOfLines={2}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
-                    testID="markdown-preview-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"
                   >
-                    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={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                          "marginLeft": 10,
-                          "paddingHorizontal": 5,
-                          "paddingVertical": 3,
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "backgroundColor": "#095AD2",
-                          "borderRadius": 10.5,
-                          "minWidth": 21,
-                        },
-                        undefined,
-                      ]
-                    }
-                    testID="unread-badge-1"
-                  >
-                    <Text
-                      numberOfLines={1}
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
-                          {
-                            "color": "#FFFFFF",
-                          },
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      1
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. 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"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "600",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#1D74F5",
+                                      },
+                                    ],
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-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"
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "justifyContent": "center",
+                                      "marginLeft": 10,
+                                      "paddingHorizontal": 5,
+                                      "paddingVertical": 3,
+                                    },
+                                    {
+                                      "backgroundColor": "#095AD2",
+                                      "borderRadius": 10.5,
+                                      "minWidth": 21,
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                                testID="unread-badge-1"
+                              >
+                                <Text
+                                  accessibilityLabel="1"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "textAlign": "left",
+                                      },
+                                      undefined,
+                                      {
+                                        "color": "#FFFFFF",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  1
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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"
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  31,
                 ]
               }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "justifyContent": "center",
-                    },
-                    {
-                      "height": 75,
-                    },
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#1F2329",
-                        "fontSize": 24,
-                      },
-                      [
-                        {
-                          "lineHeight": 24,
-                        },
-                        [
-                          {
-                            "marginRight": 4,
-                          },
-                          {
-                            "marginRight": 12,
-                          },
-                        ],
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#2F343D",
-                        },
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1D74F5",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <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"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
                           ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-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"
-                  >
-                    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>
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#158D65",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: InvitedRoom should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  32,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
                     }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
                         [
-                          {
-                            "lineHeight": 22,
-                          },
                           [
+                            undefined,
                             {
-                              "marginRight": 4,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
                             },
                             {
-                              "marginRight": 8,
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
                           ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    accessibilityLabel="Invited"
-                    allowFontScaling={false}
-                    role="status"
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1D74F5",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                          },
-                          undefined,
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#AC892F",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 60,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 24,
-                  },
-                  [
-                    {
-                      "lineHeight": 24,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 60,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
+                  33,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 60,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#2F343D",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 24,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 60,
-                  },
+                  34,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 36,
-                      "width": 36,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={36}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
+                        undefined,
                       ]
                     }
                   >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    accessibilityLabel="Invited"
-                    allowFontScaling={false}
-                    role="status"
-                    selectable={false}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "color": "#1D74F5",
-                          "fontSize": 24,
-                        },
-                        [
-                          {
-                            "lineHeight": 24,
-                          },
-                          undefined,
-                        ],
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: LastMessage should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  35,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#158D65",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
           />
-          <View
-            style={{}}
-          >
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
+        >
+          <View
+            style={
+              {
+                "width": 750,
+              }
+            }
+          >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. No message"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  36,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
                         undefined,
                       ]
                     }
                   >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <Text
-                    accessibilityLabel="No message"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
                           ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-No message"
-                  >
-                    No message
-                  </Text>
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 2"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  37,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
                         [
-                          {
-                            "lineHeight": 16,
-                          },
                           [
+                            undefined,
                             {
-                              "marginRight": 4,
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
                             },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <Text
-                    accessibilityLabel="2"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
                           ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-2"
-                  >
-                    2
-                  </Text>
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#158D65",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. You: 1"
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  38,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
                         undefined,
                       ]
                     }
                   >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <Text
-                    accessibilityLabel="You: 1"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
+                    <View
+                      accessibilityState={
                         {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
                           ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-You: 1"
-                  >
-                    You: 1
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <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"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-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"
-                  >
-                    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>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1D74F5",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <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"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-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"
-                  >
-                    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={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                          "marginLeft": 10,
-                          "paddingHorizontal": 5,
-                          "paddingVertical": 3,
-                        },
-                        {
-                          "backgroundColor": "#9EA2A8",
-                          "borderRadius": 10.5,
-                          "minWidth": 21,
-                        },
-                        undefined,
-                      ]
-                    }
-                    testID="unread-badge-1"
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#FFFFFF",
-                          },
-                        ]
-                      }
-                    >
-                      1
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1D74F5",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <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"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-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"
-                  >
-                    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={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                          "marginLeft": 10,
-                          "paddingHorizontal": 5,
-                          "paddingVertical": 3,
-                        },
-                        {
-                          "backgroundColor": "#9EA2A8",
-                          "borderRadius": 10.5,
-                          "minWidth": 21,
-                        },
-                        undefined,
-                      ]
-                    }
-                    testID="unread-badge-+999"
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#FFFFFF",
-                          },
-                        ]
-                      }
-                    >
-                      +999
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. 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"
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "600",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#1D74F5",
-                          },
-                        ],
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <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"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-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"
-                  >
-                    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={
-                      [
-                        {
-                          "alignItems": "center",
-                          "justifyContent": "center",
-                          "marginLeft": 10,
-                          "paddingHorizontal": 5,
-                          "paddingVertical": 3,
-                        },
-                        {
-                          "backgroundColor": "#095AD2",
-                          "borderRadius": 10.5,
-                          "minWidth": 21,
-                        },
-                        undefined,
-                      ]
-                    }
-                    testID="unread-badge-1"
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "textAlign": "left",
-                          },
-                          undefined,
-                          {
-                            "color": "#FFFFFF",
-                          },
-                        ]
-                      }
-                    >
-                      1
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: OmnichannelIcon should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#158D65",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#AC892F",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#2F343D",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#158D65",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#158D65",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#158D65",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: Tag should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "alignSelf": "center",
-                          "borderRadius": 4,
-                          "marginHorizontal": 4,
-                        },
-                        {
-                          "backgroundColor": "#CBCED1",
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "paddingHorizontal": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      Auto-join
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. No message"
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      [
-                        {
-                          "alignItems": "center",
-                          "alignSelf": "center",
-                          "borderRadius": 4,
-                          "marginHorizontal": 4,
-                        },
-                        {
-                          "backgroundColor": "#CBCED1",
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "paddingHorizontal": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                      testID="auto-join-tag"
-                    >
-                      Auto-join
-                    </Text>
-                  </View>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <Text
-                    accessibilityLabel="No message"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-No message"
-                  >
-                    No message
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              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. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    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={
-                      [
-                        {
-                          "alignItems": "center",
-                          "alignSelf": "center",
-                          "borderRadius": 4,
-                          "marginHorizontal": 4,
-                        },
-                        {
-                          "backgroundColor": "#CBCED1",
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "paddingHorizontal": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                    >
-                      Auto-join
-                    </Text>
-                  </View>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      10:00
-                    </Text>
-                  </View>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[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={
-              {
-                "backgroundColor": "#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
-              accessibilityHint="Long press for more actions"
-              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. private channel. undefined. No message"
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
-              >
-                <View
-                  style={
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    }
-                  }
-                >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 16,
-                        },
-                        [
-                          {
-                            "lineHeight": 16,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            undefined,
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
-                        {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    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={
-                      [
-                        {
-                          "alignItems": "center",
-                          "alignSelf": "center",
-                          "borderRadius": 4,
-                          "marginHorizontal": 4,
-                        },
-                        {
-                          "backgroundColor": "#CBCED1",
-                        },
-                      ]
-                    }
-                  >
-                    <Text
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "600",
-                            "paddingHorizontal": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#6C727A",
-                          },
-                        ]
-                      }
-                      testID="auto-join-tag"
-                    >
-                      Auto-join
-                    </Text>
-                  </View>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
-                </View>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-start",
-                      "flex": 1,
-                      "flexDirection": "row",
-                    }
-                  }
-                  testID="room-item-last-message-container"
-                >
-                  <Text
-                    accessibilityLabel="No message"
-                    numberOfLines={2}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                          "lineHeight": undefined,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 14,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#6C727A",
-                        },
-                        {},
-                      ]
-                    }
-                    testID="markdown-preview-No message"
-                  >
-                    No message
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: Touch should match snapshot 1`] = `
-<View
-  collapsable={false}
->
-  <View
-    accessibilityElementsHidden={true}
-    importantForAccessibility="no"
-    pointerEvents="box-none"
-    style={
-      [
-        {
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-        },
-        {
-          "flexDirection": "row",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "justifyContent": "center",
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#1D74F5",
-            "right": "100%",
-            "width": 1500,
-          },
-          {
-            "height": 75,
-          },
-          [Function],
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "height": 75,
-            },
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Mark read"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-  </View>
-  <View
-    accessibilityElementsHidden={true}
-    importantForAccessibility="no"
-    pointerEvents="box-none"
-    style={
-      [
-        {
-          "flexDirection": "row",
-          "left": 0,
-          "position": "absolute",
-          "right": 0,
-        },
-        {
-          "height": 75,
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        [
-          {
-            "justifyContent": "center",
-            "position": "absolute",
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#8E6300",
-            "left": "100%",
-            "width": 750,
-          },
-          {
-            "height": 75,
-          },
-          [Function],
-        ]
-      }
-    >
-      <RNGestureHandlerButton
-        accessibilityLabel="Favorite"
-        accessible={false}
-        activeOpacity={0.105}
-        collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "backgroundColor": "#8E6300",
-              "height": "100%",
-              "justifyContent": "center",
-              "width": 80,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
-        underlayColor="black"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "black",
-              "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}
-          style={
-            [
-              {
-                "color": "#FFFFFF",
-                "fontSize": 28,
-              },
-              [
-                {
-                  "lineHeight": 28,
-                },
-                undefined,
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-      </RNGestureHandlerButton>
-    </View>
-    <View
-      style={
-        [
-          {
-            "justifyContent": "center",
-            "position": "absolute",
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#9EA2A8",
-            "left": "100%",
-            "width": 1500,
-          },
-          {
-            "height": 75,
-          },
-          [Function],
-        ]
-      }
-    >
-      <RNGestureHandlerButton
-        accessibilityLabel="Hide"
-        accessible={false}
-        activeOpacity={0.105}
-        collapsable={false}
-        delayLongPress={600}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        style={
-          [
-            {
-              "alignItems": "center",
-              "backgroundColor": "#9EA2A8",
-              "height": "100%",
-              "justifyContent": "center",
-              "width": 80,
-            },
-            {
-              "cursor": undefined,
-            },
-          ]
-        }
-        underlayColor="black"
-      >
-        <View
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "black",
-              "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}
-          style={
-            [
-              {
-                "color": "#FFFFFF",
-                "fontSize": 28,
-              },
-              [
-                {
-                  "lineHeight": 28,
-                },
-                undefined,
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-      </RNGestureHandlerButton>
-    </View>
-  </View>
-  <View
-    style={[Function]}
-  >
-    <ExternalKeyboardView
-      canBeFocused={true}
-      enableA11yFocus={false}
-      enableContextMenu={true}
-      group={false}
-      haloEffect={true}
-      hasKeyDownPress={false}
-      hasKeyUpPress={true}
-      hasOnFocusChanged={true}
-      lockFocus={0}
-      onContextMenuPress={[Function]}
-      onFocusChange={[Function]}
-      onKeyUpPress={[Function]}
-      orderIndex={-1}
-      screenAutoA11yFocusDelay={300}
-      style={
-        [
-          undefined,
-          undefined,
-        ]
-      }
-    >
-      <RNGestureHandlerButton
-        activeOpacity={1}
-        collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onLongPress={[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={
-            {
-              "backgroundColor": "#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
-            accessibilityHint="Long press for more actions"
-            accessibilityLabel="rocket.cat. private channel. undefined. "
-            accessibilityRole="button"
-            accessible={true}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "flexDirection": "row",
-                  "paddingLeft": 14,
-                },
-                {
-                  "height": 75,
-                },
-              ]
-            }
-          >
-            <View
-              accessibilityLabel="rocket.cat's avatar"
-              accessible={true}
-              style={
-                [
-                  {
-                    "borderRadius": 4,
-                    "height": 48,
-                    "width": 48,
-                  },
-                  {
-                    "marginRight": 10,
-                  },
-                ]
-              }
-              testID="avatar"
-            >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="cover"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={48}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[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=96",
-                    },
-                  ]
-                }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 48,
-                    "width": 48,
-                  }
-                }
-                transition={null}
-                width={48}
-              />
-            </View>
-            <View
-              style={
-                [
-                  {
-                    "borderBottomWidth": 0.5,
-                    "flex": 1,
-                    "paddingRight": 14,
-                    "paddingVertical": 10,
-                  },
-                  {
-                    "borderColor": "#CBCED1",
-                  },
-                ]
-              }
-            >
-              <View
-                style={
-                  [
-                    {
-                      "alignItems": "center",
-                      "flexDirection": "row",
-                      "justifyContent": "center",
-                      "width": "100%",
-                    },
-                    {
-                      "flex": 1,
-                    },
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
-                  style={
-                    [
-                      {
-                        "color": "#1F2329",
-                        "fontSize": 22,
-                      },
-                      [
-                        {
-                          "lineHeight": 22,
-                        },
-                        [
-                          {
-                            "marginRight": 4,
-                          },
-                          {
-                            "marginRight": 8,
-                          },
-                        ],
-                      ],
-                      {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
-                      },
-                      {},
-                    ]
-                  }
-                >
-                  
-                </Text>
-                <Text
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "flex": 1,
-                        "fontFamily": "Inter",
-                        "fontSize": 17,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "500",
-                        "textAlign": "left",
-                      },
-                      undefined,
-                      {
-                        "color": "#1F2329",
-                      },
-                    ]
-                  }
-                >
-                  rocket.cat
-                </Text>
-                <View
-                  style={
-                    {
-                      "alignItems": "flex-end",
-                    }
-                  }
-                >
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 13,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "marginLeft": 4,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    10:00
-                  </Text>
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </View>
-      </RNGestureHandlerButton>
-    </ExternalKeyboardView>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Type should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <View
-          style={
-            [
-              {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              {
-                "height": 75,
-              },
-            ]
-          }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          onGlobalEvent={[Function]}
+          spacing={4}
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Offline. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  39,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "height": 22,
-                              "textAlign": "center",
-                              "textAlignVertical": "center",
-                              "width": 22,
-                            },
-                            [
-                              {
-                                "marginRight": 4,
-                              },
-                              {
-                                "marginRight": 8,
-                              },
-                            ],
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#158D65",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  40,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          onGlobalEvent={[Function]}
+          spacing={4}
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: Tag should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. public channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  41,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "alignSelf": "center",
+                                      "borderRadius": 4,
+                                      "marginHorizontal": 4,
+                                    },
+                                    {
+                                      "backgroundColor": "#CBCED1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Auto-join"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "paddingHorizontal": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Auto-join
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  42,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
-                <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. No message"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "alignSelf": "center",
+                                      "borderRadius": 4,
+                                      "marginHorizontal": 4,
+                                    },
+                                    {
+                                      "backgroundColor": "#CBCED1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Auto-join"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "paddingHorizontal": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                  testID="auto-join-tag"
+                                >
+                                  Auto-join
+                                </Text>
+                              </View>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <Text
+                                accessibilityLabel="No message"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-No message"
+                              >
+                                No message
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
                 {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
-        >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="No message"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Omnichannel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  43,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          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. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "alignSelf": "center",
+                                      "borderRadius": 4,
+                                      "marginHorizontal": 4,
+                                    },
+                                    {
+                                      "backgroundColor": "#CBCED1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Auto-join"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "paddingHorizontal": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  Auto-join
+                                </Text>
+                              </View>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  44,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          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. private channel. undefined. No message"
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                }
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 16,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 16,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        undefined,
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                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={
+                                  [
+                                    {
+                                      "alignItems": "center",
+                                      "alignSelf": "center",
+                                      "borderRadius": 4,
+                                      "marginHorizontal": 4,
+                                    },
+                                    {
+                                      "backgroundColor": "#CBCED1",
+                                    },
+                                  ]
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="Auto-join"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "600",
+                                        "paddingHorizontal": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                  testID="auto-join-tag"
+                                >
+                                  Auto-join
+                                </Text>
+                              </View>
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-start",
+                                  "flex": 1,
+                                  "flexDirection": "row",
+                                }
+                              }
+                              testID="room-item-last-message-container"
+                            >
+                              <Text
+                                accessibilityLabel="No message"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={2}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 14,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#6C727A",
+                                    },
+                                    {},
+                                  ]
+                                }
+                                testID="markdown-preview-No message"
+                              >
+                                No message
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
             }
+            onGlobalEvent={[Function]}
+            text="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
-            allowFontScaling={false}
-            selectable={false}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "subheadline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#6C727A",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 3,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="No message"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: Touch should match snapshot 1`] = `
+<ViewManagerAdapter_ExpoUI
+  colorScheme="light"
+  layoutDirection="leftToRight"
+  matchContentsVertical={true}
+  style={
+    {
+      "width": 750,
+    }
+  }
+>
+  <ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      name="trigger"
+    >
+      <ViewManagerAdapter_ExpoUI
+        expoInternalSizeFromChildren={true}
+        layoutRoot={false}
+        matchContents={true}
+      >
+        <View
+          style={
+            {
+              "width": 750,
+            }
+          }
         >
           <View
-            collapsable={false}
+            handlerTags={
+              [
+                45,
+              ]
+            }
+            onGestureHandlerEvent={[Function]}
+            onGestureHandlerStateChange={[Function]}
+            onGestureHandlerTouchEvent={[Function]}
+            onStartShouldSetResponder={[Function]}
+            pointerEvents="box-none"
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "display": "contents",
               }
             }
-          />
-          <View
-            style={{}}
           >
-            <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Discussion. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
-                ]
-              }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
+            <View>
               <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
-                }
+                style={[Function]}
               >
-                <View
+                <ExternalKeyboardView
+                  canBeFocused={true}
+                  enableA11yFocus={false}
+                  enableContextMenu={true}
+                  group={false}
+                  haloEffect={true}
+                  hasKeyDownPress={false}
+                  hasKeyUpPress={true}
+                  hasOnFocusChanged={true}
+                  lockFocus={0}
+                  onContextMenuPress={[Function]}
+                  onFocusChange={[Function]}
+                  onKeyUpPress={[Function]}
+                  orderIndex={-1}
+                  screenAutoA11yFocusDelay={300}
                   style={
                     [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
+                      undefined,
+                      undefined,
                     ]
                   }
                 >
-                  <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}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
+                    collapsable={false}
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
                         [
+                          undefined,
                           {
-                            "lineHeight": 22,
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "#FFFFFF",
+                            "borderRadius": undefined,
                           },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
                         ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
                       ]
                     }
+                    underlayColor="#E4E7EA"
                   >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
-                      }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          undefined,
-                        ]
-                      }
+                    <View
+                      style={{}}
                     >
-                      10:00
-                    </Text>
+                      <View
+                        accessibilityHint="Long press for more actions"
+                        accessibilityLabel="rocket.cat. private channel. undefined. "
+                        accessibilityRole="button"
+                        accessible={true}
+                        style={
+                          [
+                            {
+                              "alignItems": "center",
+                              "flexDirection": "row",
+                              "paddingLeft": 14,
+                            },
+                            {
+                              "height": 75,
+                            },
+                          ]
+                        }
+                      >
+                        <View
+                          accessibilityLabel="rocket.cat's avatar"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "borderRadius": 4,
+                                "height": 48,
+                                "width": 48,
+                              },
+                              {
+                                "marginRight": 10,
+                              },
+                            ]
+                          }
+                          testID="avatar"
+                        >
+                          <ViewManagerAdapter_ExpoImage
+                            borderRadius={4}
+                            containerViewRef={{"current":"Object"}}
+                            contentFit="cover"
+                            contentPosition={
+                              {
+                                "left": "50%",
+                                "top": "50%",
+                              }
+                            }
+                            height={48}
+                            nativeViewRef={{"current":"NativeComponent"}}
+                            onError={[Function]}
+                            onLoad={[Function]}
+                            onLoadStart={[Function]}
+                            onProgress={[Function]}
+                            placeholder={[]}
+                            priority="high"
+                            sfEffect={null}
+                            source={
+                              [
+                                {
+                                  "headers": {
+                                    "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                  },
+                                  "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                },
+                              ]
+                            }
+                            style={
+                              {
+                                "borderRadius": 4,
+                                "height": 48,
+                                "width": 48,
+                              }
+                            }
+                            symbolSize={null}
+                            symbolWeight={null}
+                            transition={null}
+                            width={48}
+                          />
+                        </View>
+                        <View
+                          style={
+                            [
+                              {
+                                "borderBottomWidth": 0.5,
+                                "flex": 1,
+                                "paddingRight": 14,
+                                "paddingVertical": 10,
+                              },
+                              {
+                                "borderColor": "#CBCED1",
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            style={
+                              [
+                                {
+                                  "alignItems": "center",
+                                  "flexDirection": "row",
+                                  "justifyContent": "center",
+                                  "width": "100%",
+                                },
+                                {
+                                  "flex": 1,
+                                },
+                              ]
+                            }
+                          >
+                            <Text
+                              allowFontScaling={false}
+                              selectable={false}
+                              style={
+                                [
+                                  {
+                                    "color": "#1F2329",
+                                    "fontSize": 22,
+                                  },
+                                  [
+                                    {
+                                      "lineHeight": 22,
+                                    },
+                                    [
+                                      {
+                                        "marginRight": 4,
+                                      },
+                                      {
+                                        "marginRight": 8,
+                                      },
+                                    ],
+                                  ],
+                                  {
+                                    "fontFamily": "custom",
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                  },
+                                  {},
+                                ]
+                              }
+                            >
+                              
+                            </Text>
+                            <Text
+                              accessibilityLabel="rocket.cat"
+                              accessibilityRole="text"
+                              accessible={true}
+                              ellipsizeMode="tail"
+                              numberOfLines={1}
+                              style={
+                                [
+                                  {
+                                    "backgroundColor": "transparent",
+                                    "flex": 1,
+                                    "fontFamily": "Inter",
+                                    "fontSize": 17,
+                                    "fontVariant": [
+                                      "tabular-nums",
+                                    ],
+                                    "fontWeight": "500",
+                                    "textAlign": "left",
+                                  },
+                                  undefined,
+                                  {
+                                    "color": "#1F2329",
+                                  },
+                                ]
+                              }
+                            >
+                              rocket.cat
+                            </Text>
+                            <View
+                              style={
+                                {
+                                  "alignItems": "flex-end",
+                                }
+                              }
+                            >
+                              <Text
+                                accessibilityLabel="10:00"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 13,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "marginLeft": 4,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                    },
+                                    undefined,
+                                  ]
+                                }
+                              >
+                                10:00
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
                   </View>
-                </View>
+                </ExternalKeyboardView>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
+        </View>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      name="preview"
     >
-      <View
-        style={
+      <ViewManagerAdapter_ExpoUI
+        alignment="leading"
+        modifiers={
           [
             {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
+              "$type": "frame",
+              "alignment": "leading",
+              "width": 300,
             },
             {
-              "height": 75,
+              "$type": "padding",
+              "all": 16,
             },
-            [Function],
           ]
         }
+        onGlobalEvent={[Function]}
+        spacing={4}
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "font",
+                "textStyle": "headline",
+              },
+              {
+                "$type": "foregroundStyle",
+                "style": {
+                  "color": "#1F2329",
+                  "type": "color",
+                },
               },
               {
-                "height": 75,
+                "$type": "lineLimit",
+                "limit": 1,
+                "reservesSpace": undefined,
               },
             ]
           }
-        >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
-                },
-                {
-                  "cursor": undefined,
-                },
-              ]
-            }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
+          onGlobalEvent={[Function]}
+          text="rocket.cat"
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+    <ViewManagerAdapter_ExpoUI
+      name="items"
     >
-      <View
-        style={
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
           [
             {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
+              "$type": "disabled",
+              "disabled": false,
             },
+          ]
+        }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+        role="default"
+        testID="action-sheet-mark-read"
+      >
+        <ViewManagerAdapter_ExpoUI
+          title="Mark read"
+        />
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
             {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
+              "$type": "disabled",
+              "disabled": false,
             },
+          ]
+        }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+        role="default"
+        testID="action-sheet-favorite"
+      >
+        <ViewManagerAdapter_ExpoUI
+          title="Favorite"
+        />
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        modifiers={
+          [
             {
-              "height": 75,
+              "$type": "disabled",
+              "disabled": false,
             },
-            [Function],
           ]
         }
+        onButtonPress={[Function]}
+        onGlobalEvent={[Function]}
+        role="default"
+        testID="action-sheet-hide"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
-              },
-            ]
-          }
-          underlayColor="black"
+        <ViewManagerAdapter_ExpoUI
+          title="Hide"
+        />
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>
+</ViewManagerAdapter_ExpoUI>
+`;
+
+exports[`Story Snapshots: Type should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  46,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Offline. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "height": 22,
+                                          "textAlign": "center",
+                                          "textAlignVertical": "center",
+                                          "width": 22,
+                                        },
+                                        [
+                                          {
+                                            "marginRight": 4,
+                                          },
+                                          {
+                                            "marginRight": 8,
+                                          },
+                                        ],
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. Message. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  47,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
+                        undefined,
                       ]
                     }
                   >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. public channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  48,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  49,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Omnichannel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  50,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Discussion. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private team. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  51,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
-                    style={
-                      [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
-                      ]
-                    }
-                  >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
                         undefined,
-                        {
-                          "color": "#1F2329",
-                        },
+                        undefined,
                       ]
                     }
                   >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
-                      style={
-                        [
-                          {
-                            "backgroundColor": "transparent",
-                            "fontFamily": "Inter",
-                            "fontSize": 13,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. Message. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  52,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="rocket.cat. private channel. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  53,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#1F2329",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "marginRight": 4,
-                            },
-                            {
-                              "marginRight": 8,
-                            },
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    rocket.cat
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private team. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-]
-`;
-
-exports[`Story Snapshots: User should match snapshot 1`] = `
-[
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
+          >
+            <View
+              handlerTags={
                 [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
+                  54,
+                ]
+              }
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+                  "display": "contents",
+                }
+              }
+            >
+              <View>
+                <View
+                  style={[Function]}
+                >
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
+                    style={
+                      [
+                        undefined,
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="rocket.cat. private channel. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/@rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#1F2329",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "marginRight": 4,
+                                        },
+                                        {
+                                          "marginRight": 8,
+                                        },
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="rocket.cat"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                rocket.cat
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </View>
+              </View>
+            </View>
+          </View>
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "cursor": undefined,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
-          underlayColor="black"
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "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}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
+                  "$type": "font",
+                  "textStyle": "headline",
                 },
-                [
-                  {
-                    "lineHeight": 28,
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
                   },
-                  undefined,
-                ],
+                },
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
-                {},
               ]
             }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="rocket.cat"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
               {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+]
+`;
+
+exports[`Story Snapshots: User should match snapshot 1`] = `
+[
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              accessibilityLabel="diego.mello. Offline. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  55,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="diego.mello's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[Function]}
-                  onLoadStart={[Function]}
-                  onProgress={[Function]}
-                  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
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "height": 22,
-                              "textAlign": "center",
-                              "textAlignVertical": "center",
-                              "width": 22,
-                            },
-                            [
-                              {
-                                "marginRight": 4,
-                              },
-                              {
-                                "marginRight": 8,
-                              },
-                            ],
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    diego.mello
-                  </Text>
-                  <View
-                    style={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          accessibilityLabel="diego.mello. Offline. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="diego.mello's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              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,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "height": 22,
+                                          "textAlign": "center",
+                                          "textAlignVertical": "center",
+                                          "width": 22,
+                                        },
+                                        [
+                                          {
+                                            "marginRight": 4,
+                                          },
+                                          {
+                                            "marginRight": 8,
+                                          },
+                                        ],
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <Text
+                                accessibilityLabel="diego.mello"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                diego.mello
+                              </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
-  <View
-    collapsable={false}
-  >
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#1D74F5",
-              "right": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
       >
-        <View
-          style={
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
             [
               {
-                "justifyContent": "center",
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
               },
               {
-                "height": 75,
+                "$type": "padding",
+                "all": 16,
               },
             ]
           }
+          onGlobalEvent={[Function]}
+          spacing={4}
         >
-          <RNGestureHandlerButton
-            accessibilityLabel="Mark read"
-            accessible={false}
-            activeOpacity={0.105}
-            collapsable={false}
-            delayLongPress={600}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            style={
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
               [
                 {
-                  "alignItems": "center",
-                  "height": "100%",
-                  "justifyContent": "center",
-                  "width": 80,
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
                 },
                 {
-                  "cursor": undefined,
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
                 },
               ]
             }
-            underlayColor="black"
-          >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "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}
-              style={
-                [
-                  {
-                    "color": "#FFFFFF",
-                    "fontSize": 28,
-                  },
-                  [
-                    {
-                      "lineHeight": 28,
-                    },
-                    undefined,
-                  ],
-                  {
-                    "fontFamily": "custom",
-                    "fontStyle": "normal",
-                    "fontWeight": "normal",
-                  },
-                  {},
-                ]
-              }
-            >
-              
-            </Text>
-          </RNGestureHandlerButton>
-        </View>
-      </View>
-    </View>
-    <View
-      accessibilityElementsHidden={true}
-      importantForAccessibility="no"
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-          },
-          {
-            "height": 75,
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#8E6300",
-              "left": "100%",
-              "width": 750,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
+            onGlobalEvent={[Function]}
+            text="diego.mello"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Favorite"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#8E6300",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-      <View
-        style={
-          [
-            {
-              "justifyContent": "center",
-              "position": "absolute",
-              "top": 0,
-            },
-            {
-              "backgroundColor": "#9EA2A8",
-              "left": "100%",
-              "width": 1500,
-            },
-            {
-              "height": 75,
-            },
-            [Function],
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          accessibilityLabel="Hide"
-          accessible={false}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#9EA2A8",
-                "height": "100%",
-                "justifyContent": "center",
-                "width": 80,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="black"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
         >
-          <View
-            collapsable={false}
-            style={
-              {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              }
-            }
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
           />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
-            style={
-              [
-                {
-                  "color": "#FFFFFF",
-                  "fontSize": 28,
-                },
-                [
-                  {
-                    "lineHeight": 28,
-                  },
-                  undefined,
-                ],
-                {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
-                },
-                {},
-              ]
-            }
-          >
-            
-          </Text>
-        </RNGestureHandlerButton>
-      </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={true}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
-      >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onLongPress={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
-          style={
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
             [
               {
-                "backgroundColor": "#FFFFFF",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
+                "$type": "disabled",
+                "disabled": false,
               },
             ]
           }
-          underlayColor="#E4E7EA"
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
+  <ViewManagerAdapter_ExpoUI
+    colorScheme="light"
+    layoutDirection="leftToRight"
+    matchContentsVertical={true}
+    style={
+      {
+        "width": 750,
+      }
+    }
+  >
+    <ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="trigger"
+      >
+        <ViewManagerAdapter_ExpoUI
+          expoInternalSizeFromChildren={true}
+          layoutRoot={false}
+          matchContents={true}
         >
           <View
-            collapsable={false}
             style={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "width": 750,
               }
             }
-          />
-          <View
-            style={{}}
           >
             <View
-              accessibilityHint="Long press for more actions"
-              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. Offline. undefined. "
-              accessibilityRole="button"
-              accessible={true}
-              style={
+              handlerTags={
                 [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "paddingLeft": 14,
-                  },
-                  {
-                    "height": 75,
-                  },
+                  56,
                 ]
               }
-            >
-              <View
-                accessibilityLabel="rocket.cat's avatar"
-                accessible={true}
-                style={
-                  [
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    },
-                    {
-                      "marginRight": 10,
-                    },
-                  ]
-                }
-                testID="avatar"
-              >
-                <ViewManagerAdapter_ExpoImage
-                  borderRadius={4}
-                  containerViewRef={{"current":"Object"}}
-                  contentFit="cover"
-                  contentPosition={
-                    {
-                      "left": "50%",
-                      "top": "50%",
-                    }
-                  }
-                  height={48}
-                  nativeViewRef={{"current":"NativeComponent"}}
-                  onError={[Function]}
-                  onLoad={[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=96",
-                      },
-                    ]
-                  }
-                  style={
-                    {
-                      "borderRadius": 4,
-                      "height": 48,
-                      "width": 48,
-                    }
-                  }
-                  transition={null}
-                  width={48}
-                />
-              </View>
-              <View
-                style={
-                  [
-                    {
-                      "borderBottomWidth": 0.5,
-                      "flex": 1,
-                      "paddingRight": 14,
-                      "paddingVertical": 10,
-                    },
-                    {
-                      "borderColor": "#CBCED1",
-                    },
-                  ]
+              onGestureHandlerEvent={[Function]}
+              onGestureHandlerStateChange={[Function]}
+              onGestureHandlerTouchEvent={[Function]}
+              onStartShouldSetResponder={[Function]}
+              pointerEvents="box-none"
+              style={
+                {
+                  "display": "contents",
                 }
-              >
+              }
+            >
+              <View>
                 <View
-                  style={
-                    [
-                      {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "center",
-                        "width": "100%",
-                      },
-                      {
-                        "flex": 1,
-                      },
-                    ]
-                  }
+                  style={[Function]}
                 >
-                  <Text
-                    allowFontScaling={false}
-                    selectable={false}
+                  <ExternalKeyboardView
+                    canBeFocused={true}
+                    enableA11yFocus={false}
+                    enableContextMenu={true}
+                    group={false}
+                    haloEffect={true}
+                    hasKeyDownPress={false}
+                    hasKeyUpPress={true}
+                    hasOnFocusChanged={true}
+                    lockFocus={0}
+                    onContextMenuPress={[Function]}
+                    onFocusChange={[Function]}
+                    onKeyUpPress={[Function]}
+                    orderIndex={-1}
+                    screenAutoA11yFocusDelay={300}
                     style={
                       [
-                        {
-                          "color": "#6C727A",
-                          "fontSize": 22,
-                        },
-                        [
-                          {
-                            "lineHeight": 22,
-                          },
-                          [
-                            {
-                              "height": 22,
-                              "textAlign": "center",
-                              "textAlignVertical": "center",
-                              "width": 22,
-                            },
-                            [
-                              {
-                                "marginRight": 4,
-                              },
-                              {
-                                "marginRight": 8,
-                              },
-                            ],
-                          ],
-                        ],
-                        {
-                          "fontFamily": "custom",
-                          "fontStyle": "normal",
-                          "fontWeight": "normal",
-                        },
-                        {},
+                        undefined,
+                        undefined,
                       ]
                     }
                   >
-                    
-                  </Text>
-                  <Text
-                    ellipsizeMode="tail"
-                    numberOfLines={1}
-                    style={
-                      [
+                    <View
+                      accessibilityState={
                         {
-                          "backgroundColor": "transparent",
-                          "flex": 1,
-                          "fontFamily": "Inter",
-                          "fontSize": 17,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "500",
-                          "textAlign": "left",
-                        },
-                        undefined,
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
                         {
-                          "color": "#1F2329",
-                        },
-                      ]
-                    }
-                  >
-                    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={
-                      {
-                        "alignItems": "flex-end",
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
                       }
-                    }
-                  >
-                    <Text
-                      ellipsizeMode="tail"
-                      numberOfLines={1}
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      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,
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "marginLeft": 4,
-                            "textAlign": "left",
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderRadius": undefined,
+                            },
+                          ],
                           undefined,
                         ]
                       }
+                      underlayColor="#E4E7EA"
                     >
-                      10:00
-                    </Text>
-                  </View>
+                      <View
+                        style={{}}
+                      >
+                        <View
+                          accessibilityHint="Long press for more actions"
+                          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. Offline. undefined. "
+                          accessibilityRole="button"
+                          accessible={true}
+                          style={
+                            [
+                              {
+                                "alignItems": "center",
+                                "flexDirection": "row",
+                                "paddingLeft": 14,
+                              },
+                              {
+                                "height": 75,
+                              },
+                            ]
+                          }
+                        >
+                          <View
+                            accessibilityLabel="rocket.cat's avatar"
+                            accessible={true}
+                            style={
+                              [
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                },
+                                {
+                                  "marginRight": 10,
+                                },
+                              ]
+                            }
+                            testID="avatar"
+                          >
+                            <ViewManagerAdapter_ExpoImage
+                              borderRadius={4}
+                              containerViewRef={{"current":"Object"}}
+                              contentFit="cover"
+                              contentPosition={
+                                {
+                                  "left": "50%",
+                                  "top": "50%",
+                                }
+                              }
+                              height={48}
+                              nativeViewRef={{"current":"NativeComponent"}}
+                              onError={[Function]}
+                              onLoad={[Function]}
+                              onLoadStart={[Function]}
+                              onProgress={[Function]}
+                              placeholder={[]}
+                              priority="high"
+                              sfEffect={null}
+                              source={
+                                [
+                                  {
+                                    "headers": {
+                                      "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                    },
+                                    "uri": "https://open.rocket.chat/avatar/rocket.cat?format=png&size=96",
+                                  },
+                                ]
+                              }
+                              style={
+                                {
+                                  "borderRadius": 4,
+                                  "height": 48,
+                                  "width": 48,
+                                }
+                              }
+                              symbolSize={null}
+                              symbolWeight={null}
+                              transition={null}
+                              width={48}
+                            />
+                          </View>
+                          <View
+                            style={
+                              [
+                                {
+                                  "borderBottomWidth": 0.5,
+                                  "flex": 1,
+                                  "paddingRight": 14,
+                                  "paddingVertical": 10,
+                                },
+                                {
+                                  "borderColor": "#CBCED1",
+                                },
+                              ]
+                            }
+                          >
+                            <View
+                              style={
+                                [
+                                  {
+                                    "alignItems": "center",
+                                    "flexDirection": "row",
+                                    "justifyContent": "center",
+                                    "width": "100%",
+                                  },
+                                  {
+                                    "flex": 1,
+                                  },
+                                ]
+                              }
+                            >
+                              <Text
+                                allowFontScaling={false}
+                                selectable={false}
+                                style={
+                                  [
+                                    {
+                                      "color": "#6C727A",
+                                      "fontSize": 22,
+                                    },
+                                    [
+                                      {
+                                        "lineHeight": 22,
+                                      },
+                                      [
+                                        {
+                                          "height": 22,
+                                          "textAlign": "center",
+                                          "textAlignVertical": "center",
+                                          "width": 22,
+                                        },
+                                        [
+                                          {
+                                            "marginRight": 4,
+                                          },
+                                          {
+                                            "marginRight": 8,
+                                          },
+                                        ],
+                                      ],
+                                    ],
+                                    {
+                                      "fontFamily": "custom",
+                                      "fontStyle": "normal",
+                                      "fontWeight": "normal",
+                                    },
+                                    {},
+                                  ]
+                                }
+                              >
+                                
+                              </Text>
+                              <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"
+                                accessibilityRole="text"
+                                accessible={true}
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "flex": 1,
+                                      "fontFamily": "Inter",
+                                      "fontSize": 17,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "500",
+                                      "textAlign": "left",
+                                    },
+                                    undefined,
+                                    {
+                                      "color": "#1F2329",
+                                    },
+                                  ]
+                                }
+                              >
+                                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={
+                                  {
+                                    "alignItems": "flex-end",
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="10:00"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  ellipsizeMode="tail"
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "fontFamily": "Inter",
+                                        "fontSize": 13,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "400",
+                                        "marginLeft": 4,
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                      undefined,
+                                    ]
+                                  }
+                                >
+                                  10:00
+                                </Text>
+                              </View>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
-    </View>
-  </View>,
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="preview"
+      >
+        <ViewManagerAdapter_ExpoUI
+          alignment="leading"
+          modifiers={
+            [
+              {
+                "$type": "frame",
+                "alignment": "leading",
+                "width": 300,
+              },
+              {
+                "$type": "padding",
+                "all": 16,
+              },
+            ]
+          }
+          onGlobalEvent={[Function]}
+          spacing={4}
+        >
+          <ViewManagerAdapter_ExpoUI
+            modifiers={
+              [
+                {
+                  "$type": "font",
+                  "textStyle": "headline",
+                },
+                {
+                  "$type": "foregroundStyle",
+                  "style": {
+                    "color": "#1F2329",
+                    "type": "color",
+                  },
+                },
+                {
+                  "$type": "lineLimit",
+                  "limit": 1,
+                  "reservesSpace": undefined,
+                },
+              ]
+            }
+            onGlobalEvent={[Function]}
+            text="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"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+      <ViewManagerAdapter_ExpoUI
+        name="items"
+      >
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-mark-read"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Mark read"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-favorite"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Favorite"
+          />
+        </ViewManagerAdapter_ExpoUI>
+        <ViewManagerAdapter_ExpoUI
+          modifiers={
+            [
+              {
+                "$type": "disabled",
+                "disabled": false,
+              },
+            ]
+          }
+          onButtonPress={[Function]}
+          onGlobalEvent={[Function]}
+          role="default"
+          testID="action-sheet-hide"
+        >
+          <ViewManagerAdapter_ExpoUI
+            title="Hide"
+          />
+        </ViewManagerAdapter_ExpoUI>
+      </ViewManagerAdapter_ExpoUI>
+    </ViewManagerAdapter_ExpoUI>
+  </ViewManagerAdapter_ExpoUI>,
 ]
 `;
diff --git a/app/containers/RoomItem/__tests__/RoomContextMenu.test.tsx b/app/containers/RoomItem/__tests__/RoomContextMenu.test.tsx
new file mode 100644
index 00000000000..04656812b12
--- /dev/null
+++ b/app/containers/RoomItem/__tests__/RoomContextMenu.test.tsx
@@ -0,0 +1,38 @@
+import { Text } from 'react-native';
+import { render, screen } from '@testing-library/react-native';
+
+import RoomContextMenu from '../RoomContextMenu.ios';
+import { toggleFav } from '~/lib/methods/toggleFav';
+import { SubscriptionType } from '~/definitions';
+
+jest.mock('~/lib/methods/toggleFav', () => ({ toggleFav: jest.fn() }));
+jest.mock('~/lib/hooks/useAppSelector', () => ({ useAppSelector: () => '7.0.0' }));
+
+const renderMenu = (enabled: boolean) =>
+	render(
+		<RoomContextMenu
+			enabled={enabled}
+			rid='room-id'
+			type={SubscriptionType.CHANNEL}
+			name='general'
+			lastMessage='hello'
+			isRead={false}
+			favorite={false}
+			width={320}>
+			<Text>row</Text>
+		</RoomContextMenu>
+	);
+
+describe('RoomContextMenu', () => {
+	it('toggles favorite from the menu', async () => {
+		await renderMenu(true);
+		screen.getByTestId('action-sheet-favorite').props.onButtonPress();
+		expect(toggleFav).toHaveBeenCalledWith('room-id', false);
+	});
+
+	it('renders only the row when disabled', async () => {
+		await renderMenu(false);
+		expect(screen.getByText('row')).toBeTruthy();
+		expect(screen.queryByTestId('action-sheet-favorite')).toBeNull();
+	});
+});
diff --git a/app/containers/RoomItem/__tests__/RoomItemContainer.test.tsx b/app/containers/RoomItem/__tests__/RoomItemContainer.test.tsx
new file mode 100644
index 00000000000..c5043f26f3a
--- /dev/null
+++ b/app/containers/RoomItem/__tests__/RoomItemContainer.test.tsx
@@ -0,0 +1,82 @@
+import { act, render } from '@testing-library/react-native';
+import { BehaviorSubject } from 'rxjs';
+
+import RoomItemContainer from '..';
+import { isRead } from '~/lib/methods/helpers';
+
+jest.mock('../RoomItem', () => {
+	const { Text: MockText } = jest.requireActual('react-native');
+	return ({ name, isRead: read, unread }: { name: string; isRead: boolean; unread: number }) => (
+		<MockText>{`${name}:${read ? 'read' : 'unread'}:${unread}`}</MockText>
+	);
+});
+jest.mock('../../ActionSheet', () => ({ useActionSheet: () => ({ showActionSheet: jest.fn() }) }));
+jest.mock('~/lib/hooks/useAppSelector', () => ({ useAppSelector: () => '7.0.0' }));
+
+const createRecord = () => {
+	const changes = new BehaviorSubject<void>(undefined);
+	const record = {
+		rid: 'rid',
+		t: 'c',
+		name: 'general',
+		fname: 'general',
+		open: true,
+		archived: false,
+		alert: true,
+		unread: 3,
+		tunread: [],
+		observe: () => changes,
+		asPlain: () => ({ ...record })
+	};
+	return { record, changes };
+};
+
+const renderRow = (record: ReturnType<typeof createRecord>['record']) =>
+	render(
+		<RoomItemContainer
+			item={record}
+			onPress={jest.fn()}
+			width={300}
+			username='user'
+			useRealName={false}
+			showLastMessage
+			showAvatar
+			displayMode='expanded'
+			getRoomTitle={room => room.fname}
+			getRoomAvatar={() => ''}
+			getIsRead={isRead}
+			swipeEnabled
+		/>
+	);
+
+describe('RoomItemContainer', () => {
+	it('reflects in-place record updates after the record emits', () => {
+		const { record, changes } = createRecord();
+		const { getByText } = renderRow(record);
+		expect(getByText('general:unread:3')).toBeTruthy();
+
+		record.alert = false;
+		record.unread = 0;
+		record.fname = 'renamed';
+		act(() => changes.next());
+
+		expect(getByText('renamed:read:0')).toBeTruthy();
+	});
+
+	it('reflects an unread count change while the row stays unread', () => {
+		const { record, changes } = createRecord();
+		const { getByText } = renderRow(record);
+
+		record.unread = 4;
+		act(() => changes.next());
+
+		expect(getByText('general:unread:4')).toBeTruthy();
+	});
+
+	it('unsubscribes from the record on unmount', () => {
+		const { record, changes } = createRecord();
+		const { unmount } = renderRow(record);
+		unmount();
+		expect(changes.observed).toBe(false);
+	});
+});
diff --git a/app/containers/RoomItem/__tests__/Touchable.test.tsx b/app/containers/RoomItem/__tests__/Touchable.test.tsx
new file mode 100644
index 00000000000..bb65214ea3b
--- /dev/null
+++ b/app/containers/RoomItem/__tests__/Touchable.test.tsx
@@ -0,0 +1,96 @@
+import { act, fireEvent, render } from '@testing-library/react-native';
+import { Text } from 'react-native';
+import { State, usePanGesture } from 'react-native-gesture-handler';
+import { fireGestureHandler } from 'react-native-gesture-handler/jest-utils';
+import { makeMutable } from 'react-native-reanimated';
+
+import Touchable from '../Touchable';
+import { settleSwipeRow, unregisterOpenSwipeItem } from '../openSwipeItem';
+import { SubscriptionType } from '~/definitions';
+
+jest.mock('~/lib/hooks/useAppSelector', () => ({ useAppSelector: () => '7.0.0' }));
+jest.mock('react-native-gesture-handler', () => {
+	const actual = jest.requireActual('react-native-gesture-handler');
+	return { ...actual, usePanGesture: jest.fn(actual.usePanGesture) };
+});
+
+const setup = ({ swipeEnabled = true } = {}) => {
+	const onPress = jest.fn();
+	const { getByText } = render(
+		<Touchable
+			type={SubscriptionType.CHANNEL}
+			onPress={onPress}
+			width={300}
+			favorite={false}
+			isRead
+			rid='roomB'
+			isFocused={false}
+			swipeEnabled={swipeEnabled}
+			displayMode='expanded'>
+			<Text>row</Text>
+		</Touchable>
+	);
+	const { results } = jest.mocked(usePanGesture).mock;
+	return { gesture: results[results.length - 1].value, onPress, pressRow: () => fireEvent.press(getByText('row')) };
+};
+
+const openOtherRow = () => settleSwipeRow({ rid: 'roomA', transX: makeMutable(0), rowOffSet: makeMutable(0) }, 80);
+
+const touchWithoutSwipe = [
+	{ state: State.BEGAN, translationX: 0, velocityX: 0 },
+	{ state: State.FAILED, translationX: 0, velocityX: 0 }
+];
+
+afterEach(() => {
+	unregisterOpenSwipeItem('roomA');
+	jest.restoreAllMocks();
+});
+
+test('a tap after a touch that closed another row without pressing still opens the room', async () => {
+	const { gesture, onPress, pressRow } = setup();
+	openOtherRow();
+	await act(() => fireGestureHandler(gesture, touchWithoutSwipe));
+
+	await act(() => fireGestureHandler(gesture, touchWithoutSwipe));
+	pressRow();
+
+	expect(onPress).toHaveBeenCalledTimes(1);
+});
+
+test('a tap that closed another row does not open the room', async () => {
+	const { gesture, onPress, pressRow } = setup();
+	openOtherRow();
+
+	await act(() => fireGestureHandler(gesture, touchWithoutSwipe));
+	pressRow();
+
+	expect(onPress).not.toHaveBeenCalled();
+});
+
+test('a tap on a swiped-open row closes it instead of opening the room', async () => {
+	const { gesture, onPress, pressRow } = setup();
+	await act(() =>
+		fireGestureHandler(gesture, [
+			{ state: State.BEGAN, translationX: 0, velocityX: 0 },
+			{ state: State.ACTIVE, translationX: 60, velocityX: 0 },
+			{ state: State.END, translationX: 60, velocityX: 0 }
+		])
+	);
+
+	pressRow();
+	expect(onPress).not.toHaveBeenCalled();
+
+	pressRow();
+	expect(onPress).toHaveBeenCalledTimes(1);
+});
+
+test('a tap on a row that cannot swipe closes the open row instead of opening the room', () => {
+	const { onPress, pressRow } = setup({ swipeEnabled: false });
+	openOtherRow();
+
+	pressRow();
+	expect(onPress).not.toHaveBeenCalled();
+
+	pressRow();
+	expect(onPress).toHaveBeenCalledTimes(1);
+});
diff --git a/app/containers/RoomItem/__tests__/openSwipeItem.test.ts b/app/containers/RoomItem/__tests__/openSwipeItem.test.ts
new file mode 100644
index 00000000000..6cd2b43fb65
--- /dev/null
+++ b/app/containers/RoomItem/__tests__/openSwipeItem.test.ts
@@ -0,0 +1,60 @@
+import { makeMutable } from 'react-native-reanimated';
+
+import { settleSwipeRow, unregisterOpenSwipeItem, closeOpenSwipeItem } from '../openSwipeItem';
+
+const createRow = (rid: string) => ({
+	rid,
+	transX: makeMutable(0),
+	rowOffSet: makeMutable(0)
+});
+
+describe('openSwipeItem', () => {
+	afterEach(() => {
+		unregisterOpenSwipeItem('roomA');
+		unregisterOpenSwipeItem('roomB');
+	});
+
+	it('closes the open row and reports it was consumed', () => {
+		const row = createRow('roomA');
+		settleSwipeRow(row, 80);
+
+		const consumed = closeOpenSwipeItem('roomB');
+
+		expect(row.rowOffSet.value).toBe(0);
+		expect(row.transX.value).toBe(0);
+		expect(consumed).toBe(true);
+	});
+
+	it('reports nothing was consumed when no row is open', () => {
+		expect(closeOpenSwipeItem('roomB')).toBe(false);
+	});
+
+	it('reports nothing was consumed when closing the same room that is open', () => {
+		const row = createRow('roomA');
+		settleSwipeRow(row, 80);
+
+		const consumed = closeOpenSwipeItem('roomA');
+
+		expect(row.rowOffSet.value).toBe(80);
+		expect(consumed).toBe(false);
+	});
+
+	it('closes the previously open row when another one opens', () => {
+		const previous = createRow('roomA');
+		settleSwipeRow(previous, 80);
+
+		settleSwipeRow(createRow('roomB'), -160);
+
+		expect(previous.rowOffSet.value).toBe(0);
+		expect(previous.transX.value).toBe(0);
+	});
+
+	it('forgets a row once it settles closed', () => {
+		const row = createRow('roomA');
+		settleSwipeRow(row, 80);
+
+		settleSwipeRow(row, 0);
+
+		expect(closeOpenSwipeItem('roomB')).toBe(false);
+	});
+});
diff --git a/app/containers/RoomItem/__tests__/swipeRelease.test.ts b/app/containers/RoomItem/__tests__/swipeRelease.test.ts
new file mode 100644
index 00000000000..3799e210739
--- /dev/null
+++ b/app/containers/RoomItem/__tests__/swipeRelease.test.ts
@@ -0,0 +1,37 @@
+import { getActionWidth, getFullSwipeThreshold, getOpenWidth, getSwipeRelease } from '../swipeRelease';
+
+const width = 400;
+const actionWidth = getActionWidth(width);
+const openWidth = getOpenWidth(width);
+const fullSwipeThreshold = getFullSwipeThreshold(width);
+
+const release = (restingOffset: number, offset: number) => getSwipeRelease({ restingOffset, offset, width });
+
+const closed = { restingOffset: 0, fullSwipe: null };
+const leftOpen = { restingOffset: actionWidth, fullSwipe: null };
+const rightOpen = { restingOffset: -openWidth, fullSwipe: null };
+
+describe('getSwipeRelease', () => {
+	it.each([
+		[0, 37, closed],
+		[0, 38, leftOpen],
+		[0, -37, closed],
+		[0, -38, rightOpen],
+		[0, 0, closed],
+		[actionWidth, 1, leftOpen],
+		[actionWidth, 200, leftOpen],
+		[actionWidth, 0, closed],
+		[actionWidth, -30, closed],
+		[-openWidth, -1, rightOpen],
+		[-openWidth, -200, rightOpen],
+		[-openWidth, 0, closed],
+		[-openWidth, 30, closed]
+	])('from resting offset %d releasing at %d', (restingOffset, offset, expected) => {
+		expect(release(restingOffset, offset)).toEqual(expected);
+	});
+
+	it.each([0, actionWidth, -openWidth])('commits a full swipe from resting offset %d and closes', restingOffset => {
+		expect(release(restingOffset, fullSwipeThreshold)).toEqual({ ...closed, fullSwipe: 'left' });
+		expect(release(restingOffset, -fullSwipeThreshold)).toEqual({ ...closed, fullSwipe: 'right' });
+	});
+});
diff --git a/app/containers/RoomItem/index.tsx b/app/containers/RoomItem/index.tsx
index 3e530fb9c01..d7cf597d08f 100644
--- a/app/containers/RoomItem/index.tsx
+++ b/app/containers/RoomItem/index.tsx
@@ -1,5 +1,4 @@
-import { useEffect, useReducer, useRef, memo } from 'react';
-import { type Subscription } from 'rxjs';
+import { memo } from 'react';
 import { AccessibilityInfo } from 'react-native';
 
 import { useActionSheet } from '../ActionSheet';
@@ -11,8 +10,7 @@ import RoomItem from './RoomItem';
 import { getRoomActionsOptions } from './getRoomActionsOptions';
 import { isInviteSubscription } from '~/lib/methods/isInviteSubscription';
 import { isExternalKeyboardConnected } from '~/lib/methods/helpers/externalInput';
-
-const attrs = ['width', 'isFocused', 'showLastMessage', 'autoJoin', 'showAvatar', 'displayMode'];
+import { useRoomSnapshot } from './useRoomSnapshot';
 
 const RoomItemContainer = memo(
 	({
@@ -33,32 +31,18 @@ const RoomItemContainer = memo(
 		getIsRead = () => false,
 		swipeEnabled = true
 	}: IRoomItemContainerProps) => {
+		const room = useRoomSnapshot(item);
 		const { showActionSheet } = useActionSheet();
 		const serverVersion = useAppSelector(state => state.server.version);
-		const name = getRoomTitle(item);
+		const name = getRoomTitle(room);
 		const testID = `rooms-list-view-item-${name}`;
-		const avatar = getRoomAvatar(item);
-		const isRead = getIsRead(item);
-		const date = item.roomUpdatedAt && formatDate(item.roomUpdatedAt);
-		const alert = item.alert || item.tunread?.length;
-		const [_, forceUpdate] = useReducer(x => x + 1, 1);
-		const roomSubscription = useRef<Subscription | null>(null);
-		const userId = item.t === 'd' && id && !isGroupChat(item) ? id : null;
-		const accessibilityDate = formatDateAccessibility(item.roomUpdatedAt);
-
-		useEffect(() => {
-			const init = () => {
-				if (item?.observe) {
-					const observable = item.observe();
-					roomSubscription.current = observable?.subscribe?.(() => {
-						if (_) forceUpdate();
-					});
-				}
-			};
-			init();
-
-			return () => roomSubscription.current?.unsubscribe();
-		}, []);
+		const avatar = getRoomAvatar(room);
+		const isRead = getIsRead(room);
+		const isInvited = isInviteSubscription(room);
+		const date = room.roomUpdatedAt && formatDate(room.roomUpdatedAt);
+		const alert = room.alert || room.tunread?.length;
+		const userId = room.t === 'd' && id && !isGroupChat(room) ? id : null;
+		const accessibilityDate = formatDateAccessibility(room.roomUpdatedAt);
 
 		const handleOnPress = () => onPress(item);
 
@@ -75,10 +59,10 @@ const RoomItemContainer = memo(
 			}
 			showActionSheet({
 				options: getRoomActionsOptions({
-					rid: item.rid,
-					type: item.t,
+					rid: room.rid,
+					type: room.t,
 					isRead,
-					favorite: !!item.f,
+					favorite: !!room.f,
 					serverVersion
 				})
 			});
@@ -88,46 +72,45 @@ const RoomItemContainer = memo(
 			<RoomItem
 				name={name}
 				avatar={avatar}
-				isGroupChat={isGroupChat(item)}
-				isInvited={isInviteSubscription(item)}
+				isGroupChat={isGroupChat(room)}
+				isInvited={isInvited}
 				isRead={isRead}
 				onPress={handleOnPress}
 				onLongPress={handleOnLongPress}
 				date={date}
 				accessibilityDate={accessibilityDate}
 				width={width}
-				favorite={item.f}
-				rid={item.rid}
+				favorite={room.f}
+				rid={room.rid}
 				userId={userId}
 				testID={testID}
-				type={item.t}
+				type={room.t}
 				isFocused={isFocused}
-				prid={item.prid}
-				hideUnreadStatus={item.hideUnreadStatus}
-				hideMentionStatus={item.hideMentionStatus}
+				prid={room.prid}
+				hideUnreadStatus={room.hideUnreadStatus}
+				hideMentionStatus={room.hideMentionStatus}
 				alert={alert}
-				lastMessage={item.lastMessage}
+				lastMessage={room.lastMessage}
 				showLastMessage={showLastMessage}
 				username={username}
 				useRealName={useRealName}
-				unread={item.unread}
-				userMentions={item.userMentions}
-				groupMentions={item.groupMentions}
-				tunread={item.tunread}
-				tunreadUser={item.tunreadUser}
-				tunreadGroup={item.tunreadGroup}
+				unread={room.unread}
+				userMentions={room.userMentions}
+				groupMentions={room.groupMentions}
+				tunread={room.tunread}
+				tunreadUser={room.tunreadUser}
+				tunreadGroup={room.tunreadGroup}
 				swipeEnabled={swipeEnabled}
-				teamMain={item.teamMain}
+				teamMain={room.teamMain}
 				autoJoin={autoJoin}
 				showAvatar={showAvatar}
 				displayMode={displayMode}
-				status={item.t === 'l' ? item?.visitor?.status : null}
-				sourceType={item.t === 'l' ? item.source : null}
-				abacAttributes={item.abacAttributes}
+				status={room.t === 'l' ? room?.visitor?.status : null}
+				sourceType={room.t === 'l' ? room.source : null}
+				abacAttributes={room.abacAttributes}
 			/>
 		);
-	},
-	(props, nextProps) => attrs.every(key => props[key] === nextProps[key])
+	}
 );
 
 export default RoomItemContainer;
diff --git a/app/containers/RoomItem/interfaces.ts b/app/containers/RoomItem/interfaces.ts
index 23016f9df87..b748aee603a 100644
--- a/app/containers/RoomItem/interfaces.ts
+++ b/app/containers/RoomItem/interfaces.ts
@@ -41,6 +41,7 @@ export interface IUpdatedAtProps {
 
 export interface IWrapperProps {
 	accessibilityLabel: string;
+	testID?: string;
 	accessibilityHint?: string;
 	avatar: string;
 	type: string;
@@ -142,7 +143,6 @@ export interface ILastMessageProps {
 export interface ITouchableProps extends IRoomItemTouchables {
 	children: ReactElement;
 	type: SubscriptionType;
-	testID: string;
 	width: number;
 	favorite: boolean;
 	isRead: boolean;
diff --git a/app/containers/RoomItem/openSwipeItem.ts b/app/containers/RoomItem/openSwipeItem.ts
new file mode 100644
index 00000000000..7097e95377b
--- /dev/null
+++ b/app/containers/RoomItem/openSwipeItem.ts
@@ -0,0 +1,46 @@
+import { makeMutable, withSpring, type SharedValue } from 'react-native-reanimated';
+
+import { SWIPE_SPRING_CONFIG } from './swipeRelease';
+
+export type SwipeRow = {
+	rid: string;
+	transX: SharedValue<number>;
+	rowOffSet: SharedValue<number>;
+};
+
+export const openSwipeItem = makeMutable<SwipeRow | null>(null);
+
+const springRow = ({ transX, rowOffSet }: SwipeRow, restingOffset: number, velocity: number) => {
+	'worklet';
+	transX.value = withSpring(restingOffset, { ...SWIPE_SPRING_CONFIG, velocity });
+	rowOffSet.value = restingOffset;
+};
+
+export const unregisterOpenSwipeItem = (rid: string) => {
+	'worklet';
+	if (openSwipeItem.value?.rid === rid) {
+		openSwipeItem.value = null;
+	}
+};
+
+export const closeOpenSwipeItem = (exceptRid?: string) => {
+	'worklet';
+	const row = openSwipeItem.value;
+	if (!row || row.rid === exceptRid) {
+		return false;
+	}
+	springRow(row, 0, 0);
+	openSwipeItem.value = null;
+	return true;
+};
+
+export const settleSwipeRow = (row: SwipeRow, restingOffset: number, velocity = 0) => {
+	'worklet';
+	springRow(row, restingOffset, velocity);
+	if (restingOffset === 0) {
+		unregisterOpenSwipeItem(row.rid);
+		return;
+	}
+	closeOpenSwipeItem(row.rid);
+	openSwipeItem.value = row;
+};
diff --git a/app/containers/RoomItem/styles.ts b/app/containers/RoomItem/styles.ts
index 26f760c186d..cf48a92f842 100644
--- a/app/containers/RoomItem/styles.ts
+++ b/app/containers/RoomItem/styles.ts
@@ -2,10 +2,6 @@ import { StyleSheet } from 'react-native';
 
 import sharedStyles from '~/views/Styles';
 
-export const ACTION_WIDTH = 80;
-export const SMALL_SWIPE = ACTION_WIDTH / 2;
-export const LONG_SWIPE = ACTION_WIDTH * 2.5;
-
 export default StyleSheet.create({
 	flex: {
 		flex: 1
@@ -80,7 +76,7 @@ export default StyleSheet.create({
 		position: 'absolute',
 		justifyContent: 'center',
 		top: 0,
-		right: 0
+		left: 0
 	},
 	actionRightButtonContainer: {
 		position: 'absolute',
@@ -88,7 +84,15 @@ export default StyleSheet.create({
 		top: 0
 	},
 	actionButton: {
-		width: ACTION_WIDTH,
+		width: '100%',
+		height: '100%',
+		flexDirection: 'row',
+		overflow: 'hidden'
+	},
+	actionButtonContentEnd: {
+		justifyContent: 'flex-end'
+	},
+	actionIconSlot: {
 		height: '100%',
 		alignItems: 'center',
 		justifyContent: 'center'
diff --git a/app/containers/RoomItem/swipeRelease.ts b/app/containers/RoomItem/swipeRelease.ts
new file mode 100644
index 00000000000..4a942f78630
--- /dev/null
+++ b/app/containers/RoomItem/swipeRelease.ts
@@ -0,0 +1,56 @@
+import { ReduceMotion } from 'react-native-reanimated';
+
+const OPEN_RATIO = 0.375;
+const FULL_SWIPE_RATIO = 0.53;
+
+export const SWIPE_SPRING_CONFIG = {
+	mass: 1,
+	stiffness: 150,
+	damping: 24.5,
+	reduceMotion: ReduceMotion.System
+};
+
+export const getOpenWidth = (width: number) => {
+	'worklet';
+	return width * OPEN_RATIO;
+};
+
+export const getActionWidth = (width: number) => {
+	'worklet';
+	return getOpenWidth(width) / 2;
+};
+
+export const getFullSwipeThreshold = (width: number) => {
+	'worklet';
+	return width * FULL_SWIPE_RATIO;
+};
+
+export interface ISwipeRelease {
+	restingOffset: number;
+	fullSwipe: 'left' | 'right' | null;
+}
+
+interface ISwipeReleaseInput {
+	restingOffset: number;
+	offset: number;
+	width: number;
+}
+
+const CLOSED: ISwipeRelease = { restingOffset: 0, fullSwipe: null };
+
+export const getSwipeRelease = ({ restingOffset, offset, width }: ISwipeReleaseInput): ISwipeRelease => {
+	'worklet';
+	const fullSwipeThreshold = getFullSwipeThreshold(width);
+	if (offset >= fullSwipeThreshold) {
+		return { ...CLOSED, fullSwipe: 'left' };
+	}
+	if (offset <= -fullSwipeThreshold) {
+		return { ...CLOSED, fullSwipe: 'right' };
+	}
+	const wasOpen = restingOffset !== 0;
+	const keepsSide = Math.sign(offset) === Math.sign(restingOffset);
+	if (wasOpen ? !keepsSide : Math.abs(offset) < getActionWidth(width) / 2) {
+		return CLOSED;
+	}
+	return { restingOffset: offset > 0 ? getActionWidth(width) : -getOpenWidth(width), fullSwipe: null };
+};
diff --git a/app/containers/RoomItem/useRoomContextMenuActions.ts b/app/containers/RoomItem/useRoomContextMenuActions.ts
new file mode 100644
index 00000000000..0ea313e4173
--- /dev/null
+++ b/app/containers/RoomItem/useRoomContextMenuActions.ts
@@ -0,0 +1,13 @@
+import { useAppSelector } from '~/lib/hooks/useAppSelector';
+import { getRoomActionsOptions, type IRoomActionsParams } from './getRoomActionsOptions';
+
+export const useRoomContextMenuActions = (params: Omit<IRoomActionsParams, 'serverVersion'>) => {
+	const serverVersion = useAppSelector(state => state.server.version);
+	return getRoomActionsOptions({
+		rid: params.rid,
+		type: params.type,
+		isRead: params.isRead,
+		favorite: params.favorite,
+		serverVersion
+	});
+};
diff --git a/app/containers/RoomItem/useRoomSnapshot.ts b/app/containers/RoomItem/useRoomSnapshot.ts
new file mode 100644
index 00000000000..fb82f445e2b
--- /dev/null
+++ b/app/containers/RoomItem/useRoomSnapshot.ts
@@ -0,0 +1,35 @@
+import { useCallback, useRef, useSyncExternalStore } from 'react';
+import { skip } from 'rxjs';
+
+import { type IRoomItemContainerProps } from './interfaces';
+
+type TRoomItem = IRoomItemContainerProps['item'];
+
+const takeSnapshot = (item: TRoomItem): TRoomItem => item.asPlain?.() ?? item;
+
+export const useRoomSnapshot = (item: TRoomItem): TRoomItem => {
+	const cache = useRef<{ source: TRoomItem; room: TRoomItem } | null>(null);
+
+	const getSnapshot = () => {
+		if (!cache.current || cache.current.source !== item) {
+			cache.current = { source: item, room: takeSnapshot(item) };
+		}
+		return cache.current.room;
+	};
+
+	const subscribe = useCallback(
+		(onStoreChange: () => void) => {
+			const subscription = item
+				.observe?.()
+				.pipe(skip(1))
+				.subscribe(() => {
+					cache.current = { source: item, room: takeSnapshot(item) };
+					onStoreChange();
+				});
+			return () => subscription?.unsubscribe();
+		},
+		[item]
+	);
+
+	return useSyncExternalStore(subscribe, getSnapshot);
+};
diff --git a/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx b/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
index d9b5c8288b1..88d3707d9ac 100644
--- a/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
+++ b/app/containers/RoomTypeIcon/OmnichannelRoomIcon.tsx
@@ -1,24 +1,12 @@
 import { useState } from 'react';
 import { Image, type ImageStyle } from 'expo-image';
 
-import { OmnichannelSourceType, type IOmnichannelSource, type TUserStatus } from '~/definitions';
+import { type IOmnichannelSource, type TUserStatus } from '~/definitions';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
-import { CustomIcon, type TIconsName } from '../CustomIcon';
+import { CustomIcon } from '../CustomIcon';
+import { getOmnichannelIconName, getOmnichannelSidebarIconUri } from './roomTypeIconName';
 import { useUserStatusColor } from '~/lib/hooks/useUserStatusColor';
 
-interface IIconMap {
-	[key: string]: TIconsName;
-}
-
-const iconMap: IIconMap = {
-	widget: 'livechat-monochromatic',
-	email: 'mail',
-	sms: 'sms',
-	app: 'omnichannel',
-	api: 'omnichannel',
-	other: 'omnichannel'
-};
-
 interface IOmnichannelRoomIconProps {
 	size: number;
 	type: string;
@@ -34,15 +22,15 @@ export const OmnichannelRoomIcon = ({ size, style, sourceType, status }: IOmnich
 	const connected = useAppSelector(state => state.meteor?.connected);
 	const userStatusColor = useUserStatusColor(status || 'offline');
 
-	// @ts-ignore
-	const customIcon = <CustomIcon name={iconMap[sourceType?.type || 'other']} size={size} style={style} color={userStatusColor} />;
+	const customIcon = <CustomIcon name={getOmnichannelIconName(sourceType)} size={size} style={style} color={userStatusColor} />;
+	const sidebarIconUri = connected ? getOmnichannelSidebarIconUri(baseUrl, sourceType) : undefined;
 
-	if (!svgError && sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon && connected) {
+	if (!svgError && sidebarIconUri) {
 		return (
 			<>
 				<Image
 					tintColor={userStatusColor}
-					source={{ uri: `${baseUrl}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}` }}
+					source={{ uri: sidebarIconUri }}
 					style={[{ width: size, height: size }, style]}
 					onError={() => setSvgError(true)}
 					onLoad={() => setLoading(false)}
diff --git a/app/containers/RoomTypeIcon/index.tsx b/app/containers/RoomTypeIcon/index.tsx
index be9873fe321..e100eb6ebc6 100644
--- a/app/containers/RoomTypeIcon/index.tsx
+++ b/app/containers/RoomTypeIcon/index.tsx
@@ -3,7 +3,8 @@ import { StyleSheet, type ViewStyle } from 'react-native';
 import { type ImageStyle } from 'expo-image';
 
 import { OmnichannelRoomIcon } from './OmnichannelRoomIcon';
-import { CustomIcon, type TIconsName } from '../CustomIcon';
+import { CustomIcon } from '../CustomIcon';
+import { getRoomTypeIconName } from './roomTypeIconName';
 import { themes } from '~/lib/constants/colors';
 import Status from '../Status';
 import { useTheme } from '~/theme';
@@ -48,21 +49,8 @@ const RoomTypeIcon = memo(
 			);
 		}
 
-		// TODO: move this to a separate function
-		let icon: TIconsName = 'channel-private';
-		if (abacAttributes?.length) {
-			icon = teamMain ? 'team-shield' : 'hash-shield';
-		} else if (teamMain) {
-			icon = `teams${type === 'p' ? '-private' : ''}`;
-		} else if (type === 'discussion') {
-			icon = 'discussions';
-		} else if (type === 'c') {
-			icon = 'channel-public';
-		} else if (type === 'd' && isGroupChat) {
-			icon = 'message';
-		}
+		const icon = getRoomTypeIconName({ type, teamMain, isDiscussion: type === 'discussion', isGroupChat, abacAttributes });
 
-		// @ts-ignore
 		return <CustomIcon name={icon} size={size} color={themes[theme].fontTitlesLabels} style={iconStyle} />;
 	}
 );
diff --git a/app/containers/RoomTypeIcon/roomTypeIconName.ts b/app/containers/RoomTypeIcon/roomTypeIconName.ts
new file mode 100644
index 00000000000..85e572c0460
--- /dev/null
+++ b/app/containers/RoomTypeIcon/roomTypeIconName.ts
@@ -0,0 +1,52 @@
+import { OmnichannelSourceType, type IOmnichannelSource, type ISubscription } from '~/definitions';
+import { type TIconsName } from '../CustomIcon';
+
+const omnichannelSourceIcons: Record<string, TIconsName> = {
+	widget: 'livechat-monochromatic',
+	email: 'mail',
+	sms: 'sms',
+	app: 'omnichannel',
+	api: 'omnichannel',
+	other: 'omnichannel'
+};
+
+export const getOmnichannelIconName = (sourceType?: IOmnichannelSource): TIconsName =>
+	omnichannelSourceIcons[sourceType?.type || 'other'] ?? 'omnichannel';
+
+export const getOmnichannelSidebarIconUri = (server: string, sourceType?: IOmnichannelSource) =>
+	sourceType?.type === OmnichannelSourceType.APP && sourceType.id && sourceType.sidebarIcon
+		? `${server}/api/apps/public/${sourceType.id}/get-sidebar-icon?icon=${sourceType.sidebarIcon}`
+		: undefined;
+
+interface IRoomTypeIconName {
+	type?: string;
+	teamMain?: boolean;
+	isDiscussion?: boolean;
+	isGroupChat?: boolean;
+	abacAttributes?: ISubscription['abacAttributes'];
+}
+
+export const getRoomTypeIconName = ({
+	type,
+	teamMain,
+	isDiscussion,
+	isGroupChat,
+	abacAttributes
+}: IRoomTypeIconName): TIconsName => {
+	if (abacAttributes?.length) {
+		return teamMain ? 'team-shield' : 'hash-shield';
+	}
+	if (teamMain) {
+		return type === 'p' ? 'teams-private' : 'teams';
+	}
+	if (isDiscussion) {
+		return 'discussions';
+	}
+	if (type === 'c') {
+		return 'channel-public';
+	}
+	if (type === 'd' && isGroupChat) {
+		return 'message';
+	}
+	return 'channel-private';
+};
diff --git a/app/containers/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/app/containers/SearchBox/__snapshots__/SearchBox.test.tsx.snap
index fbc1de51897..6cd9c5634b6 100644
--- a/app/containers/SearchBox/__snapshots__/SearchBox.test.tsx.snap
+++ b/app/containers/SearchBox/__snapshots__/SearchBox.test.tsx.snap
@@ -4,19 +4,19 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
 <View
   style={
     {
-      "backgroundColor": "#FFFFFF",
+      "backgroundColor": "#F2F3F5",
     }
   }
   testID="searchbox"
 >
   <A11yOrderView
-    orderKey="«r4»"
+    orderKey="_r_4_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r4»"
+      orderKey="_r_4_"
     >
       <View
         style={
@@ -26,9 +26,8 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
               "marginBottom": 10,
             },
             {
-              "marginBottom": 16,
-              "marginHorizontal": 12,
-              "marginTop": 16,
+              "marginHorizontal": 16,
+              "marginVertical": 12,
             },
           ]
         }
diff --git a/app/containers/SearchBox/index.tsx b/app/containers/SearchBox/index.tsx
index b3b624c5453..6baece8e494 100644
--- a/app/containers/SearchBox/index.tsx
+++ b/app/containers/SearchBox/index.tsx
@@ -4,13 +4,12 @@ import { StyleSheet, type TextInputProps, View } from 'react-native';
 import { useTheme } from '~/theme';
 import I18n from '~/i18n';
 import { FormTextInput } from '../TextInput';
+import { useListBackgroundColor } from '../NativeListRow/useListBackgroundColor';
 
 const styles = StyleSheet.create({
 	inputContainer: {
-		marginHorizontal: 12,
-		marginTop: 16,
-		// override the default margin bottom of the FormTextInput
-		marginBottom: 16
+		marginHorizontal: 16,
+		marginVertical: 12
 	}
 });
 
@@ -18,6 +17,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps) =>
 	const [text, setText] = useState('');
 
 	const { colors } = useTheme();
+	const backgroundColor = useListBackgroundColor(colors.surfaceRoom);
 
 	const internalOnChangeText = (value: string) => {
 		setText(value);
@@ -25,7 +25,7 @@ const SearchBox = ({ onChangeText, onSubmitEditing, testID }: TextInputProps) =>
 	};
 
 	return (
-		<View testID='searchbox' style={{ backgroundColor: colors.surfaceRoom }}>
+		<View testID='searchbox' style={{ backgroundColor }}>
 			<FormTextInput
 				autoCapitalize='none'
 				autoCorrect={false}
diff --git a/app/containers/SelectedUsers/index.tsx b/app/containers/SelectedUsers/index.tsx
index 58ecc560616..60a03f2109b 100644
--- a/app/containers/SelectedUsers/index.tsx
+++ b/app/containers/SelectedUsers/index.tsx
@@ -1,4 +1,5 @@
-import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import { type ISelectedUser } from '~/reducers/selectedUsers';
@@ -40,9 +41,9 @@ const SelectedUsers = ({ users, useRealName, onPress }: ISelectedUsers) => {
 	return (
 		<>
 			<View style={styles.invitedHeader}>
-				<Text style={[styles.invitedCount, { color: colors.fontSecondaryInfo }]}>
+				<PlainText style={[styles.invitedCount, { color: colors.fontSecondaryInfo }]}>
 					{I18n.t('N_Selected_members', { n: users.length })}
-				</Text>
+				</PlainText>
 			</View>
 			<FlatList
 				data={users}
diff --git a/app/containers/Separator/DateSeparator.tsx b/app/containers/Separator/DateSeparator.tsx
index ce30a22f2bb..dd660cd82a2 100644
--- a/app/containers/Separator/DateSeparator.tsx
+++ b/app/containers/Separator/DateSeparator.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { formatLongDate } from '~/lib/dayjs';
 import sharedStyles from '~/views/Styles';
@@ -26,7 +27,7 @@ export const DateSeparatorLabel = ({ ts }: { ts: Date | string }): ReactElement
 
 	return (
 		<View style={[styles.label, { backgroundColor: colors.buttonBackgroundSecondaryDefault }]}>
-			<Text style={[styles.text, { color: colors.buttonFontSecondary }]}>{formatLongDate(ts)}</Text>
+			<PlainText style={[styles.text, { color: colors.buttonFontSecondary }]}>{formatLongDate(ts)}</PlainText>
 		</View>
 	);
 };
diff --git a/app/containers/Separator/MessageSeparator.tsx b/app/containers/Separator/MessageSeparator.tsx
index 5a4e1bf5194..fcad17a1b78 100644
--- a/app/containers/Separator/MessageSeparator.tsx
+++ b/app/containers/Separator/MessageSeparator.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '~/i18n';
 import { formatLongDate } from '~/lib/dayjs';
@@ -33,9 +34,9 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
 	if (ts && unread) {
 		return (
 			<View style={separatorStyles.container}>
-				<Text style={[styles.text, unreadText]}>{I18n.t('unread_messages')}</Text>
+				<PlainText style={[styles.text, unreadText]}>{I18n.t('unread_messages')}</PlainText>
 				<View style={[separatorStyles.line, unreadLine, styles.marginHorizontal]} />
-				<Text style={[styles.text, unreadText]}>{formatLongDate(ts)}</Text>
+				<PlainText style={[styles.text, unreadText]}>{formatLongDate(ts)}</PlainText>
 			</View>
 		);
 	}
@@ -44,7 +45,7 @@ const MessageSeparator = ({ ts, unread }: { ts?: Date | string | null; unread?:
 	}
 	return (
 		<View style={separatorStyles.container}>
-			<Text style={[styles.text, unreadText, styles.marginRight]}>{I18n.t('unread_messages')}</Text>
+			<PlainText style={[styles.text, unreadText, styles.marginRight]}>{I18n.t('unread_messages')}</PlainText>
 			<View style={[separatorStyles.line, unreadLine]} />
 		</View>
 	);
diff --git a/app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx b/app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx
index 5e8cffaac88..d7c245982a9 100644
--- a/app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx
+++ b/app/containers/ServerItem/SwipeableDeleteItem/Actions.tsx
@@ -8,10 +8,10 @@ import Animated, {
 	useSharedValue,
 	type SharedValue
 } from 'react-native-reanimated';
-import { RectButton } from 'react-native-gesture-handler';
 import * as Haptics from 'expo-haptics';
 import { scheduleOnRN } from 'react-native-worklets';
 
+import { RectButton } from '~/containers/GestureButtons';
 import { CustomIcon } from '~/containers/CustomIcon';
 import { useTheme } from '~/theme';
 import I18n from '~/i18n';
diff --git a/app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx b/app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx
index 1b3b90af205..3b003d77230 100644
--- a/app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx
+++ b/app/containers/ServerItem/SwipeableDeleteItem/Touchable.tsx
@@ -1,11 +1,6 @@
 import { useRef, memo, type ReactElement } from 'react';
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
-import {
-	Gesture,
-	GestureDetector,
-	type GestureUpdateEvent,
-	type PanGestureHandlerEventPayload
-} from 'react-native-gesture-handler';
+import { GestureDetector, type PanGestureActiveEvent, usePanGesture } from 'react-native-gesture-handler';
 import { View, type AccessibilityActionEvent } from 'react-native';
 import { scheduleOnRN } from 'react-native-worklets';
 
@@ -81,7 +76,7 @@ const SwipeableDeleteTouchable = ({
 		}
 	};
 
-	const handleRelease = (event: GestureUpdateEvent<PanGestureHandlerEventPayload>) => {
+	const handleRelease = (event: PanGestureActiveEvent) => {
 		const { translationX } = event;
 		valueRef.current += translationX;
 		let toValue = 0;
@@ -147,10 +142,10 @@ const SwipeableDeleteTouchable = ({
 		valueRef.current = toValue;
 	};
 
-	const panGesture = Gesture.Pan()
-		.activeOffsetX([-10, 10]) // More sensitive horizontal detection
-		.failOffsetY([-20, 20]) // Fail on vertical movement to distinguish scrolling
-		.onUpdate(event => {
+	const panGesture = usePanGesture({
+		activeOffsetX: [-10, 10], // More sensitive horizontal detection
+		failOffsetY: [-20, 20], // Fail on vertical movement to distinguish scrolling
+		onUpdate: event => {
 			const newValue = event.translationX + rowOffSet.value;
 
 			if (I18n.isRTL) {
@@ -171,10 +166,11 @@ const SwipeableDeleteTouchable = ({
 				// Limit how far left it can stretch
 				if (transX.value < -width) transX.value = -width;
 			}
-		})
-		.onEnd(event => {
+		},
+		onDeactivate: event => {
 			scheduleOnRN(handleRelease, event);
-		});
+		}
+	});
 
 	const animatedStyles = useAnimatedStyle(() => ({
 		transform: [{ translateX: transX.value }]
diff --git a/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap b/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
index 1779bcd35c3..2e3bc78a0cc 100644
--- a/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
+++ b/app/containers/ServerItem/__snapshots__/ServerItem.test.tsx.snap
@@ -24,68 +24,71 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityRole="radio"
-      activeOpacity={1}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       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,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": undefined,
+            },
+          ],
+          undefined,
         ]
       }
-      testID="server-item-https://open.rocket.chat/"
       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
         accessibilityHint="Activate to select server"
         accessibilityLabel="Rocket.Chat. https://open.rocket.chat/. Selected"
         accessibilityRole="radio"
         accessible={true}
         style={{}}
+        testID="server-item-https://open.rocket.chat/"
       >
         <View
           style={
@@ -124,6 +127,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 },
               ]
             }
+            sfEffect={null}
             source={
               [
                 {
@@ -138,6 +142,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 "width": 44,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={44}
           />
@@ -153,6 +159,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Rocket.Chat"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -175,6 +184,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               Rocket.Chat
             </Text>
             <Text
+              accessibilityLabel="https://open.rocket.chat/"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -237,7 +249,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
           </View>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -261,68 +273,71 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityRole="radio"
-      activeOpacity={1}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       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,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": undefined,
+            },
+          ],
+          undefined,
         ]
       }
-      testID="server-item-https://superlongservername.tologintoasuperlongservername/"
       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
         accessibilityHint="Activate to select server"
         accessibilityLabel="Super Long Server Name in Rocket.Chat. https://superlongservername.tologintoasuperlongservername/. Unselected"
         accessibilityRole="radio"
         accessible={true}
         style={{}}
+        testID="server-item-https://superlongservername.tologintoasuperlongservername/"
       >
         <View
           style={
@@ -361,6 +376,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 },
               ]
             }
+            sfEffect={null}
             source={
               [
                 {
@@ -375,6 +391,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 "width": 44,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={44}
           />
@@ -390,6 +408,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Super Long Server Name in Rocket.Chat"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -412,6 +433,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               Super Long Server Name in Rocket.Chat
             </Text>
             <Text
+              accessibilityLabel="https://superlongservername.tologintoasuperlongservername/"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -474,7 +498,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
           </View>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -498,68 +522,71 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityRole="radio"
-      activeOpacity={1}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       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,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": undefined,
+            },
+          ],
+          undefined,
         ]
       }
-      testID="server-item-https://stable.rocket.chat/"
       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
         accessibilityHint="Activate to select server"
         accessibilityLabel="Rocket.Chat. https://stable.rocket.chat/. Unselected"
         accessibilityRole="radio"
         accessible={true}
         style={{}}
+        testID="server-item-https://stable.rocket.chat/"
       >
         <View
           style={
@@ -598,6 +625,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 },
               ]
             }
+            sfEffect={null}
             source={
               [
                 {
@@ -612,6 +640,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 "width": 44,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={44}
           />
@@ -627,6 +657,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Rocket.Chat"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -649,6 +682,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               Rocket.Chat
             </Text>
             <Text
+              accessibilityLabel="https://stable.rocket.chat/"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -711,7 +747,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
           </View>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
 ]
 `;
@@ -719,733 +755,789 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
 exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
 [
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        1,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 390,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 390,
               },
+              [Function],
             ]
           }
-          testID="server-item-https://open.rocket.chat/-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="server-item-https://open.rocket.chat/-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="server-item-https://open.rocket.chat/"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="Rocket.Chat. https://open.rocket.chat/. Unselected"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#E4E7EA"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="Rocket.Chat. https://open.rocket.chat/. Unselected"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="server-item-https://open.rocket.chat/"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={
+              <View
+                style={
                   [
                     {
-                      "uri": "test-file-stub",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
                     },
-                  ]
-                }
-                source={
-                  [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "test-file-stub",
                       },
                     ]
                   }
-                >
-                  Rocket.Chat
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://open.rocket.chat/
-                </Text>
-              </View>
-              <View
-                style={
-                  [
+                  style={
                     {
-                      "alignItems": "center",
-                      "justifyContent": "center",
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
                   style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityLabel="Rocket.Chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
                         },
-                        undefined,
-                      ],
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    Rocket.Chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="https://open.rocket.chat/"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    https://open.rocket.chat/
+                  </Text>
+                </View>
+                <View
+                  style={
+                    [
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "alignItems": "center",
+                        "justifyContent": "center",
                       },
-                      {},
+                      undefined,
                     ]
                   }
                 >
-                  
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#9EA2A8",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        2,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 390,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 390,
               },
+              [Function],
             ]
           }
-          testID="server-item-https://example.com/-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="server-item-https://example.com/-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="server-item-https://example.com/"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="Another Server. https://example.com/. Unselected"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#E4E7EA"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="Another Server. https://example.com/. Unselected"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="server-item-https://example.com/"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={
+              <View
+                style={
                   [
                     {
-                      "uri": "test-file-stub",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
                     },
-                  ]
-                }
-                source={
-                  [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "test-file-stub",
                       },
                     ]
                   }
-                >
-                  Another Server
-                </Text>
-                <Text
-                  numberOfLines={1}
-                  style={
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://example.com/
-                </Text>
-              </View>
-              <View
-                style={
-                  [
+                  style={
                     {
-                      "alignItems": "center",
-                      "justifyContent": "center",
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  selectable={false}
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
                   style={
-                    [
-                      {
-                        "color": "#9EA2A8",
-                        "fontSize": 24,
-                      },
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
+                  }
+                >
+                  <Text
+                    accessibilityLabel="Another Server"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
                       [
                         {
-                          "lineHeight": 24,
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
                         },
-                        undefined,
-                      ],
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    Another Server
+                  </Text>
+                  <Text
+                    accessibilityLabel="https://example.com/"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    https://example.com/
+                  </Text>
+                </View>
+                <View
+                  style={
+                    [
                       {
-                        "fontFamily": "custom",
-                        "fontStyle": "normal",
-                        "fontWeight": "normal",
+                        "alignItems": "center",
+                        "justifyContent": "center",
                       },
-                      {},
+                      undefined,
                     ]
                   }
                 >
-                  
-                </Text>
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#9EA2A8",
+                          "fontSize": 24,
+                        },
+                        [
+                          {
+                            "lineHeight": 24,
+                          },
+                          undefined,
+                        ],
+                        {
+                          "fontFamily": "custom",
+                          "fontStyle": "normal",
+                          "fontWeight": "normal",
+                        },
+                        {},
+                      ]
+                    }
+                  >
+                    
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
 ]
@@ -1475,68 +1567,71 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityRole="radio"
-      activeOpacity={1}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       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,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": undefined,
+            },
+          ],
+          undefined,
         ]
       }
-      testID="server-item-https://open.rocket.chat/"
       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
         accessibilityHint="Activate to select server"
         accessibilityLabel="Rocket.Chat. https://open.rocket.chat/. Unselected"
         accessibilityRole="radio"
         accessible={true}
         style={{}}
+        testID="server-item-https://open.rocket.chat/"
       >
         <View
           style={
@@ -1575,6 +1670,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 },
               ]
             }
+            sfEffect={null}
             source={
               [
                 {
@@ -1589,6 +1685,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 "width": 44,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={44}
           />
@@ -1604,6 +1702,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Rocket.Chat"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -1626,6 +1727,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               Rocket.Chat
             </Text>
             <Text
+              accessibilityLabel="https://open.rocket.chat/"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -1688,7 +1792,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
           </View>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1712,68 +1816,71 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityRole="radio"
-      activeOpacity={1}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#2D3039"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#262931",
-            "borderRadius": undefined,
-            "margin": undefined,
-            "marginBottom": undefined,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#262931",
+              "borderRadius": undefined,
+            },
+          ],
+          undefined,
         ]
       }
-      testID="server-item-https://open.rocket.chat/"
       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
         accessibilityHint="Activate to select server"
         accessibilityLabel="Rocket.Chat. https://open.rocket.chat/. Unselected"
         accessibilityRole="radio"
         accessible={true}
         style={{}}
+        testID="server-item-https://open.rocket.chat/"
       >
         <View
           style={
@@ -1812,6 +1919,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 },
               ]
             }
+            sfEffect={null}
             source={
               [
                 {
@@ -1826,6 +1934,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 "width": 44,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={44}
           />
@@ -1841,6 +1951,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Rocket.Chat"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -1863,6 +1976,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               Rocket.Chat
             </Text>
             <Text
+              accessibilityLabel="https://open.rocket.chat/"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -1925,7 +2041,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
           </View>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -1949,68 +2065,71 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
+    <View
       accessibilityRole="radio"
-      activeOpacity={1}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#16181a"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
-          {
-            "backgroundColor": "#0d0d0d",
-            "borderRadius": undefined,
-            "margin": undefined,
-            "marginBottom": undefined,
-            "marginEnd": undefined,
-            "marginHorizontal": undefined,
-            "marginLeft": undefined,
-            "marginRight": undefined,
-            "marginStart": undefined,
-            "marginTop": undefined,
-            "marginVertical": undefined,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#0d0d0d",
+              "borderRadius": undefined,
+            },
+          ],
+          undefined,
         ]
       }
-      testID="server-item-https://open.rocket.chat/"
       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
         accessibilityHint="Activate to select server"
         accessibilityLabel="Rocket.Chat. https://open.rocket.chat/. Unselected"
         accessibilityRole="radio"
         accessible={true}
         style={{}}
+        testID="server-item-https://open.rocket.chat/"
       >
         <View
           style={
@@ -2049,6 +2168,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 },
               ]
             }
+            sfEffect={null}
             source={
               [
                 {
@@ -2063,6 +2183,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 "width": 44,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={44}
           />
@@ -2078,6 +2200,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Rocket.Chat"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -2100,6 +2225,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               Rocket.Chat
             </Text>
             <Text
+              accessibilityLabel="https://open.rocket.chat/"
+              accessibilityRole="text"
+              accessible={true}
               numberOfLines={1}
               style={
                 [
@@ -2162,7 +2290,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
           </View>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
 ]
 `;
diff --git a/app/containers/ServerItem/index.tsx b/app/containers/ServerItem/index.tsx
index f7db1d9c317..ddc3dfa204e 100644
--- a/app/containers/ServerItem/index.tsx
+++ b/app/containers/ServerItem/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { PixelRatio, Text, View } from 'react-native';
+import { PixelRatio, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Image } from 'expo-image';
 
 import * as List from '../List';
@@ -64,12 +65,12 @@ const ServerItem = memo(({ item, onPress, onDeletePress, hasCheck }: IServerItem
 					<Image source={defaultLogo} style={styles.serverIcon} contentFit='contain' />
 				)}
 				<View style={styles.serverTextContainer}>
-					<Text numberOfLines={1} style={[styles.serverName, { color: colors.fontTitlesLabels }]}>
+					<PlainText numberOfLines={1} style={[styles.serverName, { color: colors.fontTitlesLabels }]}>
 						{item.name || item.id}
-					</Text>
-					<Text numberOfLines={1} style={[styles.serverUrl, { color: colors.fontSecondaryInfo }]}>
+					</PlainText>
+					<PlainText numberOfLines={1} style={[styles.serverUrl, { color: colors.fontSecondaryInfo }]}>
 						{item.id}
-					</Text>
+					</PlainText>
 				</View>
 
 				<List.Icon name={iconName} color={iconColor} />
diff --git a/app/containers/Status/StatusRows.tsx b/app/containers/Status/StatusRows.tsx
index c088a594f33..8ac62a75141 100644
--- a/app/containers/Status/StatusRows.tsx
+++ b/app/containers/Status/StatusRows.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { StyleSheet, type StyleProp, Text, type TextStyle, View, type ViewStyle } from 'react-native';
+import { StyleSheet, type StyleProp, type TextStyle, View, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import Status from '.';
 import { CustomIcon } from '../CustomIcon';
@@ -54,14 +55,14 @@ const StatusRows = ({
 					{renderStatusText ? (
 						renderStatusText(statusText)
 					) : (
-						<Text style={[textStyle, { color: statusTextColor }]}>{statusText}</Text>
+						<PlainText style={[textStyle, { color: statusTextColor }]}>{statusText}</PlainText>
 					)}
 				</View>
 			) : null}
 			{presenceLabel ? (
 				<View style={[styles.row, rowStyle]}>
 					{userId ? <Status size={12} id={userId} /> : null}
-					<Text style={[textStyle, { color: statusTextColor }]}>{I18n.t(presenceLabel)}</Text>
+					<PlainText style={[textStyle, { color: statusTextColor }]}>{I18n.t(presenceLabel)}</PlainText>
 				</View>
 			) : null}
 			{formattedExpiry ? (
@@ -73,7 +74,7 @@ const StatusRows = ({
 						accessibilityElementsHidden
 						importantForAccessibility='no'
 					/>
-					<Text style={[secondaryTextStyle, { color: fontSecondaryInfo }]}>{formattedExpiry}</Text>
+					<PlainText style={[secondaryTextStyle, { color: fontSecondaryInfo }]}>{formattedExpiry}</PlainText>
 				</View>
 			) : null}
 		</>
diff --git a/app/containers/Status/__snapshots__/StatusRows.test.tsx.snap b/app/containers/Status/__snapshots__/StatusRows.test.tsx.snap
index bbc10483114..ec7ba68d81f 100644
--- a/app/containers/Status/__snapshots__/StatusRows.test.tsx.snap
+++ b/app/containers/Status/__snapshots__/StatusRows.test.tsx.snap
@@ -50,6 +50,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       
     </Text>
     <Text
+      accessibilityLabel="Working from home"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
@@ -110,6 +113,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       
     </Text>
     <Text
+      accessibilityLabel="Busy"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
@@ -136,6 +142,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Away for lunch"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
@@ -196,6 +205,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       
     </Text>
     <Text
+      accessibilityLabel="Old status"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
@@ -256,6 +268,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       
     </Text>
     <Text
+      accessibilityLabel="In a meeting"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
@@ -310,6 +325,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       
     </Text>
     <Text
+      accessibilityLabel="Until Jun 15, 7:00 PM"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
@@ -370,6 +388,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       
     </Text>
     <Text
+      accessibilityLabel="Working remotely"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
@@ -426,6 +447,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
       
     </Text>
     <Text
+      accessibilityLabel="Until Jun 15, 7:00 PM"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           undefined,
diff --git a/app/containers/StatusBar.tsx b/app/containers/StatusBar.tsx
index d096c2b9248..451bbc9f5c3 100644
--- a/app/containers/StatusBar.tsx
+++ b/app/containers/StatusBar.tsx
@@ -4,18 +4,17 @@ import { useTheme } from '../theme';
 
 interface IStatusBar {
 	barStyle?: 'light' | 'dark';
-	backgroundColor?: string;
 }
 
-const StatusBar = ({ barStyle, backgroundColor }: IStatusBar) => {
-	const { theme, colors } = useTheme();
+const StatusBar = ({ barStyle }: IStatusBar) => {
+	const { theme } = useTheme();
 	if (!barStyle) {
 		barStyle = 'light';
 		if (theme === 'light') {
 			barStyle = 'dark';
 		}
 	}
-	return <StatusBarRN backgroundColor={backgroundColor ?? colors.surfaceNeutral} animated style={barStyle} />;
+	return <StatusBarRN animated style={barStyle} />;
 };
 
 export default StatusBar;
diff --git a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
index ed7b03fd3b6..a597d4b3e85 100644
--- a/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsExpired.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { View, Text, Linking } from 'react-native';
+import { View, Linking } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 
 import I18n from '~/i18n';
@@ -50,10 +51,12 @@ export const SupportedVersionsExpired = () => {
 			<View accessible accessibilityLabel={I18n.t('Attention')} style={styles.iconContainer}>
 				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>
+			<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>
 				{I18n.t('Supported_versions_expired_title', { workspace_name: name })}
-			</Text>
-			<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Supported_versions_expired_description')}</Text>
+			</PlainText>
+			<PlainText style={[styles.description, { color: colors.fontDefault }]}>
+				{I18n.t('Supported_versions_expired_description')}
+			</PlainText>
 			<Button title={I18n.t('Check_again')} type='primary' onPress={checkAgain} loading={checking} />
 			<Button
 				title={I18n.t('Learn_more')}
diff --git a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
index de2183ed5ba..32c25586095 100644
--- a/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
+++ b/app/containers/SupportedVersions/SupportedVersionsWarning.tsx
@@ -1,5 +1,6 @@
 import { useLayoutEffect, type ReactElement } from 'react';
-import { View, Text, Linking } from 'react-native';
+import { View, Linking } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import { CustomIcon } from '../CustomIcon';
@@ -36,19 +37,19 @@ export const SupportedVersionsWarning = ({ navigation, route }: { navigation?: a
 				<CustomIcon name='warning' size={36} color={colors.buttonBackgroundDangerDefault} />
 			</View>
 			{message.title ? (
-				<Text testID='sv-warn-title' style={[styles.title, { color: colors.fontTitlesLabels }]}>
+				<PlainText testID='sv-warn-title' style={[styles.title, { color: colors.fontTitlesLabels }]}>
 					{message.title}
-				</Text>
+				</PlainText>
 			) : null}
 			{message.subtitle ? (
-				<Text testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.fontDefault }]}>
+				<PlainText testID='sv-warn-subtitle' style={[styles.subtitle, { color: colors.fontDefault }]}>
 					{message.subtitle}
-				</Text>
+				</PlainText>
 			) : null}
 			{message.description ? (
-				<Text testID='sv-warn-description' style={[styles.description, { color: colors.fontDefault }]}>
+				<PlainText testID='sv-warn-description' style={[styles.description, { color: colors.fontDefault }]}>
 					{message.description}
-				</Text>
+				</PlainText>
 			) : null}
 			<Button
 				testID='sv-warn-button'
diff --git a/app/containers/TabView/index.tsx b/app/containers/TabView/index.tsx
index cf724e0fc46..c82de5dc7c5 100644
--- a/app/containers/TabView/index.tsx
+++ b/app/containers/TabView/index.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState, type ReactNode } from 'react';
 import { View } from 'react-native';
 import { TabView as ReanimatedTabView, type Route, type NavigationState } from 'reanimated-tab-view';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Touchable } from 'react-native-gesture-handler';
 
 import styles from './styles';
 import { useTheme } from '~/theme';
@@ -28,9 +28,9 @@ export const TabView = ({ routes, renderTabItem, renderScene }: TabViewProps) =>
 			<View style={styles.tabsContainer}>
 				{routes.map((tab: Route, index: number) => (
 					<View key={tab.key} style={styles.tab}>
-						<TouchableOpacity onPress={() => jumpTo(tab.key)} hitSlop={10}>
+						<Touchable onPress={() => jumpTo(tab.key)} hitSlop={10} activeOpacity={0.2} animationDuration={{ in: 0, out: 150 }}>
 							{renderTabItem(tab, routeIndex === index ? colors.strokeHighlight : colors.fontSecondaryInfo)}
-						</TouchableOpacity>
+						</Touchable>
 						<View
 							style={[
 								styles.tabLine,
diff --git a/app/containers/TextInput/FormTextInput.tsx b/app/containers/TextInput/FormTextInput.tsx
index b76f2388db0..c6b2b67a6c2 100644
--- a/app/containers/TextInput/FormTextInput.tsx
+++ b/app/containers/TextInput/FormTextInput.tsx
@@ -9,6 +9,7 @@ import {
 	View,
 	type ViewStyle
 } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { A11y } from 'react-native-a11y-order';
 
 import i18n from '~/i18n';
@@ -256,9 +257,9 @@ export const FormTextInput = ({
 					{showErrorMessage && inputError ? (
 						<View accessible={false} style={styles.errorContainer}>
 							<CustomIcon accessible={false} name='warning' size={16} color={colors.fontDanger} />
-							<Text accessible={false} style={{ ...styles.error, color: colors.fontDanger }}>
+							<PlainText accessible={false} style={{ ...styles.error, color: colors.fontDanger }}>
 								{inputError}
-							</Text>
+							</PlainText>
 						</View>
 					) : null}
 				</View>
diff --git a/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap b/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap
index f556661b7db..c6e57bb2380 100644
--- a/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/app/containers/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -9,13 +9,13 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
   }
 >
   <A11yOrderView
-    orderKey="«r0»"
+    orderKey="_r_0_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r0»"
+      orderKey="_r_0_"
     >
       <View
         style={
@@ -148,13 +148,13 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <A11yOrderView
-    orderKey="«r1»"
+    orderKey="_r_1_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r1»"
+      orderKey="_r_1_"
     >
       <View
         style={
@@ -286,13 +286,13 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <A11yOrderView
-    orderKey="«r2»"
+    orderKey="_r_2_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r2»"
+      orderKey="_r_2_"
     >
       <View
         style={
@@ -460,13 +460,13 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <A11yOrderView
-    orderKey="«r3»"
+    orderKey="_r_3_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r3»"
+      orderKey="_r_3_"
     >
       <View
         style={
@@ -594,61 +594,63 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    undefined,
                   ]
                 }
-                testID="clear-text-input"
                 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="Clear input"
                   accessible={true}
@@ -658,6 +660,7 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                       "width": 20,
                     }
                   }
+                  testID="clear-text-input"
                 >
                   <Text
                     allowFontScaling={false}
@@ -686,7 +689,7 @@ exports[`Story Snapshots: Icons should match snapshot 1`] = `
                     
                   </Text>
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -705,13 +708,13 @@ exports[`Story Snapshots: Loading should match snapshot 1`] = `
   }
 >
   <A11yOrderView
-    orderKey="«r4»"
+    orderKey="_r_4_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r4»"
+      orderKey="_r_4_"
     >
       <View
         style={
@@ -808,13 +811,13 @@ exports[`Story Snapshots: Loading should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <A11yOrderView
-    orderKey="«r5»"
+    orderKey="_r_5_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r5»"
+      orderKey="_r_5_"
     >
       <View
         style={
@@ -935,13 +938,13 @@ exports[`Story Snapshots: Multiline should match snapshot 1`] = `
   }
 >
   <A11yOrderView
-    orderKey="«r6»"
+    orderKey="_r_6_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r6»"
+      orderKey="_r_6_"
     >
       <View
         style={
@@ -1056,13 +1059,13 @@ exports[`Story Snapshots: SecureTextEntry should match snapshot 1`] = `
   }
 >
   <A11yOrderView
-    orderKey="«r7»"
+    orderKey="_r_7_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r7»"
+      orderKey="_r_7_"
     >
       <View
         style={
@@ -1159,13 +1162,13 @@ exports[`Story Snapshots: SecureTextEntry should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <A11yOrderView
-    orderKey="«r8»"
+    orderKey="_r_8_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r8»"
+      orderKey="_r_8_"
     >
       <View
         style={
@@ -1264,7 +1267,7 @@ exports[`Story Snapshots: SecureTextEntry should match snapshot 1`] = `
             importantForAccessibility="yes"
             orderFocusType={0}
             orderIndex={2}
-            orderKey="«r8»"
+            orderKey="_r_8_"
             style={
               [
                 {
@@ -1298,60 +1301,63 @@ exports[`Story Snapshots: SecureTextEntry should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="Show Password"
                   accessible={true}
@@ -1384,7 +1390,7 @@ exports[`Story Snapshots: SecureTextEntry should match snapshot 1`] = `
                     
                   </Text>
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </A11yIndexView>
         </View>
@@ -1403,13 +1409,13 @@ exports[`Story Snapshots: ShortAndLong should match snapshot 1`] = `
   }
 >
   <A11yOrderView
-    orderKey="«r9»"
+    orderKey="_r_9_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r9»"
+      orderKey="_r_9_"
     >
       <View
         style={
@@ -1506,13 +1512,13 @@ exports[`Story Snapshots: ShortAndLong should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <A11yOrderView
-    orderKey="«ra»"
+    orderKey="_r_a_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«ra»"
+      orderKey="_r_a_"
     >
       <View
         style={
diff --git a/app/containers/Thumbs.tsx b/app/containers/Thumbs.tsx
index 7b2a3ad7099..8c7968d081d 100644
--- a/app/containers/Thumbs.tsx
+++ b/app/containers/Thumbs.tsx
@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import { FlatList, Image, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
-import { RectButton } from 'react-native-gesture-handler';
 
+import { RectButton } from '~/containers/GestureButtons';
 import { BUTTON_HIT_SLOP } from './message/utils';
 import { CustomIcon } from './CustomIcon';
 import { useTheme } from '../theme';
diff --git a/app/containers/Touch.tsx b/app/containers/Touch.tsx
index ce3e0e16a29..1f414232df9 100644
--- a/app/containers/Touch.tsx
+++ b/app/containers/Touch.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, type ReactNode } from 'react';
-import { RectButton, type RectButtonProps } from 'react-native-gesture-handler';
+import { Touchable, type TouchableProps } from 'react-native-gesture-handler';
 import {
 	View,
 	StyleSheet,
@@ -11,8 +11,10 @@ import {
 import { withKeyboardFocus } from 'react-native-external-keyboard';
 
 import { useTheme } from '../theme';
+import { isAndroid } from '../lib/methods/helpers/deviceInfo';
 
-export interface ITouchProps extends RectButtonProps {
+export interface ITouchProps extends TouchableProps {
+	rippleColor?: string;
 	children: ReactNode;
 	accessible?: boolean;
 	accessibilityLabel?: string;
@@ -24,7 +26,7 @@ export interface ITouchProps extends RectButtonProps {
 	disabled?: boolean;
 }
 
-const KeyboardRectButton = withKeyboardFocus(RectButton);
+const KeyboardTouchable = withKeyboardFocus(Touchable);
 
 const Touch = forwardRef<any, ITouchProps>(
 	(
@@ -32,11 +34,13 @@ const Touch = forwardRef<any, ITouchProps>(
 			children,
 			onPress,
 			underlayColor,
+			rippleColor,
 			accessible,
 			accessibilityLabel,
 			accessibilityHint,
 			accessibilityActions,
 			onAccessibilityAction,
+			testID,
 			style,
 			rectButtonStyle,
 			disabled,
@@ -76,18 +80,20 @@ const Touch = forwardRef<any, ITouchProps>(
 			marginTop
 		};
 		return (
-			<KeyboardRectButton
+			<KeyboardTouchable
 				ref={ref}
 				onPress={onPress}
-				activeOpacity={1}
-				underlayColor={underlayColor || colors.surfaceNeutral}
-				rippleColor={colors.surfaceNeutral}
+				androidRipple={isAndroid ? { color: rippleColor ?? colors.surfaceNeutral } : undefined}
+				underlayColor={isAndroid ? undefined : underlayColor || colors.surfaceNeutral}
+				activeUnderlayOpacity={isAndroid ? undefined : 1}
+				animationDuration={isAndroid ? undefined : 0}
 				focusable={!disabled}
 				canBeFocused={!disabled}
 				style={[rectButtonStyle, marginStyles, { backgroundColor, borderRadius }]}
 				{...props}
-				enabled={!disabled}>
+				disabled={disabled}>
 				<View
+					testID={testID}
 					accessible={accessible}
 					accessibilityRole={props.accessibilityRole}
 					accessibilityLabel={accessibilityLabel}
@@ -97,7 +103,7 @@ const Touch = forwardRef<any, ITouchProps>(
 					style={viewStyle}>
 					{children}
 				</View>
-			</KeyboardRectButton>
+			</KeyboardTouchable>
 		);
 	}
 );
diff --git a/app/containers/TwoFactor/index.tsx b/app/containers/TwoFactor/index.tsx
index e8b613b4118..7d00cf8a74e 100644
--- a/app/containers/TwoFactor/index.tsx
+++ b/app/containers/TwoFactor/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, memo } from 'react';
-import { AccessibilityInfo, Text, View } from 'react-native';
+import { AccessibilityInfo, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import isEmpty from 'lodash/isEmpty';
 import { sha256 } from 'js-sha256';
 import Modal from 'react-native-modal';
@@ -158,9 +159,7 @@ const TwoFactor = memo(() => {
 		<Modal
 			customBackdrop={<View aria-hidden style={[styles.overlay, { backgroundColor: colors.overlayBackground }]} />}
 			avoidKeyboard
-			useNativeDriver
-			isVisible={visible}
-			hideModalContentWhileAnimating>
+			isVisible={visible}>
 			<GestureHandlerRootView style={styles.container} testID='two-factor'>
 				<View
 					style={[
@@ -168,8 +167,8 @@ const TwoFactor = memo(() => {
 						isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
 						{ backgroundColor: colors.surfaceTint }
 					]}>
-					<Text style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</Text>
-					{method?.text ? <Text style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</Text> : null}
+					<PlainText style={[styles.title, { color }]}>{I18n.t(method?.title || 'Two_Factor_Authentication')}</PlainText>
+					{method?.text ? <PlainText style={[styles.subtitle, { color }]}>{I18n.t(method.text)}</PlainText> : null}
 					<ControlledFormTextInput
 						name='code'
 						control={control}
diff --git a/app/containers/UIKit/Button.test.tsx b/app/containers/UIKit/Button.test.tsx
index 2c9b81c9105..94a7b538133 100644
--- a/app/containers/UIKit/Button.test.tsx
+++ b/app/containers/UIKit/Button.test.tsx
@@ -24,8 +24,8 @@ describe('UIKitButtonTests', () => {
 	});
 
 	test('find button using accessibilityLabel', () => {
-		const { getByLabelText } = render(<UIKitButton {...testProps} />);
-		const button = getByLabelText(testProps.title);
+		const { getByRole } = render(<UIKitButton {...testProps} />);
+		const button = getByRole('button', { name: testProps.title });
 		expect(button).toBeTruthy();
 	});
 
@@ -42,15 +42,15 @@ describe('UIKitButtonTests', () => {
 	});
 
 	test('onPress is not triggered while loading', () => {
-		const { getByLabelText } = render(<UIKitButton {...testProps} loading />);
-		const button = getByLabelText(testProps.title);
+		const { getByRole } = render(<UIKitButton {...testProps} loading />);
+		const button = getByRole('button', { name: testProps.title });
 		fireEvent.press(button);
 		expect(onPressMock).not.toHaveBeenCalled();
 	});
 
 	test('should trigger onPress function on button press', () => {
-		const { getByLabelText } = render(<UIKitButton {...testProps} />);
-		const button = getByLabelText(testProps.title);
+		const { getByRole } = render(<UIKitButton {...testProps} />);
+		const button = getByRole('button', { name: testProps.title });
 		fireEvent.press(button);
 		expect(onPressMock).toHaveBeenCalled();
 	});
diff --git a/app/containers/UIKit/Button.tsx b/app/containers/UIKit/Button.tsx
index 62404395e11..4c6ab03d2b6 100644
--- a/app/containers/UIKit/Button.tsx
+++ b/app/containers/UIKit/Button.tsx
@@ -1,5 +1,6 @@
 import { type FC } from 'react';
-import { Pressable, StyleSheet, Text, type StyleProp, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import sharedStyles from '~/views/Styles';
@@ -45,7 +46,7 @@ const UIKitButton: FC<IUIKitButtonProps> = ({ title, onPress, type = 'primary',
 			{loading ? (
 				<ActivityIndicator color={color} style={{ padding: 0 }} />
 			) : (
-				<Text style={[styles.text, { color }]}>{title}</Text>
+				<PlainText style={[styles.text, { color }]}>{title}</PlainText>
 			)}
 		</Pressable>
 	);
diff --git a/app/containers/UIKit/DatePicker.tsx b/app/containers/UIKit/DatePicker.tsx
index b9b3351673f..b328808dc37 100644
--- a/app/containers/UIKit/DatePicker.tsx
+++ b/app/containers/UIKit/DatePicker.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
-import { StyleSheet, Text, unstable_batchedUpdates, View } from 'react-native';
+import { StyleSheet, unstable_batchedUpdates, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import DateTimePicker, { type BaseProps } from '@react-native-community/datetimepicker';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
@@ -68,9 +69,9 @@ export const DatePicker = ({ element, language, action, context, loading, value,
 						styles.input,
 						{ borderColor: error ? themes[theme].buttonBackgroundDangerDefault : themes[theme].strokeLight }
 					]}>
-					<Text style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
+					<PlainText style={[styles.inputText, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
 						{currentDate.toLocaleDateString(language)}
-					</Text>
+					</PlainText>
 					{loading ? (
 						<ActivityIndicator style={[styles.loading, styles.icon]} />
 					) : (
diff --git a/app/containers/UIKit/Input.tsx b/app/containers/UIKit/Input.tsx
index aebe30471bd..9eba38e33b9 100644
--- a/app/containers/UIKit/Input.tsx
+++ b/app/containers/UIKit/Input.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
 import sharedStyles from '~/views/Styles';
@@ -34,11 +35,15 @@ const styles = StyleSheet.create({
 export const Input = ({ element, parser, label, description, error, hint, theme }: IInput) => (
 	<View style={styles.container}>
 		{label ? (
-			<Text style={[styles.label, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>{label}</Text>
+			<PlainText style={[styles.label, { color: error ? themes[theme].fontDanger : themes[theme].fontTitlesLabels }]}>
+				{label}
+			</PlainText>
+		) : null}
+		{description ? (
+			<PlainText style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</PlainText>
 		) : null}
-		{description ? <Text style={[styles.description, { color: themes[theme].fontSecondaryInfo }]}>{description}</Text> : null}
 		{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}
+		{error ? <PlainText style={[styles.error, { color: themes[theme].fontDanger }]}>{error}</PlainText> : null}
+		{hint ? <PlainText style={[styles.hint, { color: themes[theme].fontSecondaryInfo }]}>{hint}</PlainText> : null}
 	</View>
 );
diff --git a/app/containers/UIKit/MultiSelect/Chips.tsx b/app/containers/UIKit/MultiSelect/Chips.tsx
index 3c762dfb1e6..db18fb6a5ec 100644
--- a/app/containers/UIKit/MultiSelect/Chips.tsx
+++ b/app/containers/UIKit/MultiSelect/Chips.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Image } from 'expo-image';
 
 import { textParser } from '../utils';
@@ -32,9 +33,9 @@ const Chip = ({ item, onSelect, style }: IChip) => {
 			testID={`multi-select-chip-${item.value}`}>
 			<>
 				{item.imageUrl ? <Image style={styles.chipImage} source={{ uri: item.imageUrl }} /> : null}
-				<Text numberOfLines={1} style={[styles.chipText, { color: colors.fontTitlesLabels }]}>
+				<PlainText numberOfLines={1} style={[styles.chipText, { color: colors.fontTitlesLabels }]}>
 					{textParser([item.text])}
-				</Text>
+				</PlainText>
 				<CustomIcon name='close' size={16} color={colors.fontSecondaryInfo} />
 			</>
 		</Touch>
diff --git a/app/containers/UIKit/MultiSelect/Input.tsx b/app/containers/UIKit/MultiSelect/Input.tsx
index 893b4520745..1acada40dae 100644
--- a/app/containers/UIKit/MultiSelect/Input.tsx
+++ b/app/containers/UIKit/MultiSelect/Input.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { CustomIcon } from '~/containers/CustomIcon';
 import ActivityIndicator from '~/containers/ActivityIndicator';
@@ -25,9 +26,13 @@ const Input = ({ children, onPress, loading, inputStyle, placeholder, disabled,
 			onPress={onPress}
 			testID={testID}
 			style={[{ backgroundColor: colors.surfaceRoom }, styles.inputBorder, inputStyle]}
-			enabled={!disabled}>
+			disabled={disabled}>
 			<View style={[styles.input, styles.inputBorder, { borderColor: colors.strokeMedium }, innerInputStyle]}>
-				{placeholder ? <Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</Text> : children}
+				{placeholder ? (
+					<PlainText style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder}</PlainText>
+				) : (
+					children
+				)}
 				{loading ? (
 					<ActivityIndicator style={styles.icon} />
 				) : (
diff --git a/app/containers/UIKit/MultiSelect/Items.tsx b/app/containers/UIKit/MultiSelect/Items.tsx
index 0edaa3aa23e..f33e915f631 100644
--- a/app/containers/UIKit/MultiSelect/Items.tsx
+++ b/app/containers/UIKit/MultiSelect/Items.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Image } from 'expo-image';
 import { FlatList } from 'react-native-gesture-handler';
 
@@ -44,9 +45,9 @@ const Item = ({ item, selected, onSelect }: IItem) => {
 					{item.imageUrl ? <Image style={styles.itemImage} source={{ uri: item.imageUrl }} /> : null}
 				</View>
 				<View style={styles.flex}>
-					<Text numberOfLines={1} style={{ color: colors.fontTitlesLabels }}>
+					<PlainText numberOfLines={1} style={{ color: colors.fontTitlesLabels }}>
 						{textParser([item.text])}
-					</Text>
+					</PlainText>
 				</View>
 				<View style={styles.flexZ}>
 					<CustomIcon color={iconColor} size={22} name={iconName} />
diff --git a/app/containers/UIKit/MultiSelect/index.tsx b/app/containers/UIKit/MultiSelect/index.tsx
index 51018faae48..c5a782b2b40 100644
--- a/app/containers/UIKit/MultiSelect/index.tsx
+++ b/app/containers/UIKit/MultiSelect/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, memo } from 'react';
-import { Text, type TextStyle } from 'react-native';
+import { type TextStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
 import Button from '~/containers/Button';
@@ -127,9 +128,9 @@ export const MultiSelect = memo(
 				inputStyle={inputStyle}
 				innerInputStyle={innerInputStyle}
 				testID={testID}>
-				<Text style={[styles.pickerText, { color: currentValue ? colors.fontTitlesLabels : colors.fontSecondaryInfo }]}>
+				<PlainText style={[styles.pickerText, { color: currentValue ? colors.fontTitlesLabels : colors.fontSecondaryInfo }]}>
 					{currentValue || placeholder.text}
-				</Text>
+				</PlainText>
 			</Input>
 		);
 
@@ -145,7 +146,7 @@ export const MultiSelect = memo(
 					{selected.length ? (
 						<Chips items={selected} onSelect={(item: any) => (disabled ? {} : onSelect(item))} />
 					) : (
-						<Text style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder.text}</Text>
+						<PlainText style={[styles.pickerText, { color: colors.fontSecondaryInfo }]}>{placeholder.text}</PlainText>
 					)}
 				</Input>
 			);
diff --git a/app/containers/UIKit/UiKitModal.test.tsx b/app/containers/UIKit/UiKitModal.test.tsx
index 6e94984375d..b93f37bba60 100644
--- a/app/containers/UIKit/UiKitModal.test.tsx
+++ b/app/containers/UIKit/UiKitModal.test.tsx
@@ -1,4 +1,11 @@
 import { generateSnapshots } from '~/.rnstorybook/generateSnapshots';
 import * as stories from './UiKitModal.stories';
 
+jest.mock('~/lib/methods/handleMediaDownload.ts', () => ({
+	...jest.requireActual('~/lib/methods/handleMediaDownload.ts'),
+	getMediaCache: jest.fn(() => Promise.resolve({ exists: false })),
+	downloadMediaFile: jest.fn(() => Promise.resolve('')),
+	isDownloadActive: jest.fn(() => false)
+}));
+
 generateSnapshots(stories);
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/CallParticipants.tsx b/app/containers/UIKit/VideoConferenceBlock/components/CallParticipants.tsx
index 4cb84545e85..7c6865568b4 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/CallParticipants.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/CallParticipants.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import i18n from '~/i18n';
 import useStyle from './styles';
@@ -18,10 +19,10 @@ export const CallParticipants = ({ users }: { users: TCallUsers }): ReactElement
 			)}
 			{users.length > MAX_USERS ? (
 				<View style={style.plusUsers}>
-					<Text style={style.plusUsersText}>{users.length > 9 ? '+9' : `+${users.length}`}</Text>
+					<PlainText style={style.plusUsersText}>{users.length > 9 ? '+9' : `+${users.length}`}</PlainText>
 				</View>
 			) : null}
-			<Text style={style.joined}>{i18n.t('Joined')}</Text>
+			<PlainText style={style.joined}>{i18n.t('Joined')}</PlainText>
 		</>
 	);
 };
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
index 9fb9a186f69..cdb8e78caf2 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceBaseContainer.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import i18n from '~/i18n';
 import { useTheme } from '~/theme';
@@ -52,7 +53,7 @@ export const VideoConferenceBaseContainer = ({ variant, children }: VideoConfMes
 					}}>
 					<CustomIcon name={iconStyle[variant].icon} size={24} color={iconStyle[variant].color} />
 				</View>
-				<Text style={style.infoContainerText}>{iconStyle[variant].label}</Text>
+				<PlainText style={style.infoContainerText}>{iconStyle[variant].label}</PlainText>
 			</View>
 			<View style={style.callToActionContainer}>{children}</View>
 		</View>
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceDirect.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceDirect.tsx
index b0533815e74..1d72a0e41d2 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceDirect.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceDirect.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import i18n from '~/i18n';
 import useStyle from './styles';
@@ -10,7 +10,7 @@ const VideoConferenceDirect = memo(() => {
 
 	return (
 		<VideoConferenceBaseContainer variant='incoming'>
-			<Text style={style.callBack}>{i18n.t('Waiting_for_answer')}</Text>
+			<PlainText style={style.callBack}>{i18n.t('Waiting_for_answer')}</PlainText>
 		</VideoConferenceBaseContainer>
 	);
 });
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx
index 2f0cb5a4de5..59ccff0af8a 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceEnded.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IUser } from '~/definitions';
 import { type VideoConferenceType } from '~/definitions/IVideoConference';
@@ -35,18 +35,18 @@ export default function VideoConferenceEnded({
 			{type === 'direct' ? (
 				<>
 					<Touch style={style.callToActionCallBack} onPress={showInitCallActionSheet} disabled={isInActiveVoipCall}>
-						<Text style={style.callToActionCallBackText}>
+						<PlainText style={style.callToActionCallBackText}>
 							{createdBy.username === username ? i18n.t('Call_again') : i18n.t('Call_back')}
-						</Text>
+						</PlainText>
 					</Touch>
-					<Text style={style.callBack}>{i18n.t('Call_was_not_answered')}</Text>
+					<PlainText style={style.callBack}>{i18n.t('Call_was_not_answered')}</PlainText>
 				</>
 			) : (
 				<>
 					{users.length && !onlyAuthorOnCall ? (
 						<CallParticipants users={users} />
 					) : (
-						<Text style={style.notAnswered}>{i18n.t('Call_was_not_answered')}</Text>
+						<PlainText style={style.notAnswered}>{i18n.t('Call_was_not_answered')}</PlainText>
 					)}
 				</>
 			)}
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceIssue.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceIssue.tsx
index 37431f8d763..148fefa5f8b 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceIssue.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceIssue.tsx
@@ -1,5 +1,5 @@
 import { memo } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import i18n from '~/i18n';
 import useStyle from './styles';
@@ -10,7 +10,7 @@ const VideoConferenceIssue = memo(() => {
 
 	return (
 		<VideoConferenceBaseContainer variant='issue'>
-			<Text style={style.callBack}>{i18n.t('Waiting_for_server_connection')}</Text>
+			<PlainText style={style.callBack}>{i18n.t('Waiting_for_server_connection')}</PlainText>
 		</VideoConferenceBaseContainer>
 	);
 });
diff --git a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx
index 718d30200dc..b040429b7cf 100644
--- a/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx
+++ b/app/containers/UIKit/VideoConferenceBlock/components/VideoConferenceOutgoing.tsx
@@ -1,5 +1,5 @@
 import { type ReactElement } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import i18n from '~/i18n';
 import { videoConfJoin } from '~/lib/methods/videoConf';
@@ -14,7 +14,7 @@ export default function VideoConferenceOutgoing({ users, blockId }: { users: TCa
 	return (
 		<VideoConferenceBaseContainer variant='outgoing'>
 			<Touch style={style.callToActionButton} onPress={() => videoConfJoin(blockId)}>
-				<Text style={style.callToActionButtonText}>{i18n.t('Join')}</Text>
+				<PlainText style={style.callToActionButtonText}>{i18n.t('Join')}</PlainText>
 			</Touch>
 			<CallParticipants users={users} />
 		</VideoConferenceBaseContainer>
diff --git a/app/containers/UIKit/__snapshots__/Button.test.tsx.snap b/app/containers/UIKit/__snapshots__/Button.test.tsx.snap
index 30b67aed945..cb1da389d0e 100644
--- a/app/containers/UIKit/__snapshots__/Button.test.tsx.snap
+++ b/app/containers/UIKit/__snapshots__/Button.test.tsx.snap
@@ -52,6 +52,9 @@ exports[`Story Snapshots: CustomStyleButton should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -184,6 +187,9 @@ exports[`Story Snapshots: PrimaryButton should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -256,6 +262,9 @@ exports[`Story Snapshots: SecondaryButton should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="Press me!"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
diff --git a/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap b/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
index 5d55ef5e549..e44048dfa3b 100644
--- a/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
+++ b/app/containers/UIKit/__snapshots__/UiKitMessage.test.tsx.snap
@@ -54,6 +54,9 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Approve"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -127,6 +130,9 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Deny"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -200,6 +206,9 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Deny"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -273,6 +282,9 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Deny"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -346,6 +358,9 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Deny"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -426,6 +441,9 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Deny"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -506,6 +524,9 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Deny"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -527,57 +548,64 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
       </Text>
     </View>
   </View>,
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="Show more"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 12,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#156FF5",
         },
+        {},
+        undefined,
       ]
     }
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="Show more"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -599,7 +627,7 @@ exports[`Story Snapshots: ActionButton should match snapshot 1`] = `
     >
       Show more
     </Text>
-  </RNGestureHandlerButton>,
+  </View>,
 ]
 `;
 
@@ -1063,95 +1091,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call ended"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call ended"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call ended
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call ended**
                 </Text>
               </View>
             </View>
@@ -1196,95 +1138,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="00:06"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="00:06"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          00:06
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **00:06**
                 </Text>
               </View>
             </View>
@@ -1396,95 +1252,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call transferred"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call transferred"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call transferred
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call transferred**
                 </Text>
               </View>
             </View>
@@ -1529,95 +1299,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="00:06"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="00:06"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          00:06
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **00:06**
                 </Text>
               </View>
             </View>
@@ -1729,95 +1413,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call not answered"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call not answered"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call not answered
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call not answered**
                 </Text>
               </View>
             </View>
@@ -1929,95 +1527,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call failed"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call failed"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call failed
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call failed**
                 </Text>
               </View>
             </View>
@@ -2139,95 +1651,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#C1C7D0",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call ended"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call ended"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#C1C7D0",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call ended
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call ended**
                 </Text>
               </View>
             </View>
@@ -2272,95 +1698,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#C1C7D0",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="00:06"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="00:06"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#C1C7D0",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          00:06
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **00:06**
                 </Text>
               </View>
             </View>
@@ -2472,95 +1812,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#C1C7D0",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call transferred"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call transferred"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#C1C7D0",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call transferred
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call transferred**
                 </Text>
               </View>
             </View>
@@ -2605,95 +1859,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#C1C7D0",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="00:06"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="00:06"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#C1C7D0",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          00:06
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **00:06**
                 </Text>
               </View>
             </View>
@@ -2805,95 +1973,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#C1C7D0",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call not answered"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call not answered"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#C1C7D0",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call not answered
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call not answered**
                 </Text>
               </View>
             </View>
@@ -3005,95 +2087,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#C1C7D0",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call failed"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call failed"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#C1C7D0",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call failed
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call failed**
                 </Text>
               </View>
             </View>
@@ -3215,95 +2211,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#E4E7EA",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call ended"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call ended"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#E4E7EA",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call ended
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call ended**
                 </Text>
               </View>
             </View>
@@ -3348,95 +2258,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#E4E7EA",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="00:06"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="00:06"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#E4E7EA",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          00:06
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **00:06**
                 </Text>
               </View>
             </View>
@@ -3548,95 +2372,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#E4E7EA",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call transferred"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call transferred"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#E4E7EA",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call transferred
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call transferred**
                 </Text>
               </View>
             </View>
@@ -3681,95 +2419,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#E4E7EA",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="00:06"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="00:06"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#E4E7EA",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          00:06
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **00:06**
                 </Text>
               </View>
             </View>
@@ -3881,95 +2533,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#E4E7EA",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call not answered"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call not answered"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#E4E7EA",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call not answered
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call not answered**
                 </Text>
               </View>
             </View>
@@ -4081,95 +2647,9 @@ exports[`Story Snapshots: InfoCard should match snapshot 1`] = `
                 }
               >
                 <Text
-                  style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "lineHeight": 22,
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#E4E7EA",
-                      },
-                    ]
-                  }
+                  accessibilityLabel="Voice call failed"
                 >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="Voice call failed"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#E4E7EA",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ]
-                          }
-                        >
-                          Voice call failed
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
+                  **Voice call failed**
                 </Text>
               </View>
             </View>
@@ -4236,95 +2716,9 @@ exports[`Story Snapshots: InfoCardI18n should match snapshot 1`] = `
           }
         >
           <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
+            accessibilityLabel="Voice call ended"
           >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "700",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityLabel="Voice call ended"
-                    style={
-                      [
-                        {
-                          "flexShrink": 1,
-                          "fontSize": 16,
-                          "lineHeight": 22,
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                      ]
-                    }
-                  >
-                    Voice call ended
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
+            **Voice call ended**
           </Text>
         </View>
       </View>
@@ -4369,95 +2763,9 @@ exports[`Story Snapshots: InfoCardI18n should match snapshot 1`] = `
           }
         >
           <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
+            accessibilityLabel="Voice call failed"
           >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "700",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityLabel="Voice call failed"
-                    style={
-                      [
-                        {
-                          "flexShrink": 1,
-                          "fontSize": 16,
-                          "lineHeight": 22,
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                      ]
-                    }
-                  >
-                    Voice call failed
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
+            **Voice call failed**
           </Text>
         </View>
       </View>
@@ -4502,95 +2810,9 @@ exports[`Story Snapshots: InfoCardI18n should match snapshot 1`] = `
           }
         >
           <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
+            accessibilityLabel="Voice call not answered"
           >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "700",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityLabel="Voice call not answered"
-                    style={
-                      [
-                        {
-                          "flexShrink": 1,
-                          "fontSize": 16,
-                          "lineHeight": 22,
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                      ]
-                    }
-                  >
-                    Voice call not answered
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
+            **Voice call not answered**
           </Text>
         </View>
       </View>
@@ -4635,95 +2857,9 @@ exports[`Story Snapshots: InfoCardI18n should match snapshot 1`] = `
           }
         >
           <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
+            accessibilityLabel="Voice call transferred"
           >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "700",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    accessibilityLabel="Voice call transferred"
-                    style={
-                      [
-                        {
-                          "flexShrink": 1,
-                          "fontSize": 16,
-                          "lineHeight": 22,
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                      ]
-                    }
-                  >
-                    Voice call transferred
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
+            **Voice call transferred**
           </Text>
         </View>
       </View>
@@ -5435,57 +3571,9 @@ exports[`Story Snapshots: Section should match snapshot 1`] = `
       }
     >
       <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
+        accessibilityLabel="Section"
       >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Section"
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Section
-          </Text>
-        </Text>
+        Section
       </Text>
     </View>
   </View>
@@ -5521,57 +3609,9 @@ exports[`Story Snapshots: SectionButton should match snapshot 1`] = `
       }
     >
       <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
+        accessibilityLabel="Section + button"
       >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Section + button"
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Section + button
-          </Text>
-        </Text>
+        Section \\+ button
       </Text>
     </View>
   </View>
@@ -5626,6 +3666,9 @@ exports[`Story Snapshots: SectionButton should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="button"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -5678,111 +3721,70 @@ exports[`Story Snapshots: SectionDatePicker should match snapshot 1`] = `
       }
     >
       <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
+        accessibilityLabel="Section + DatePicker"
       >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Section + DatePicker"
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Section + DatePicker
-          </Text>
-        </Text>
+        Section \\+ DatePicker
       </Text>
     </View>
   </View>
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="Select a date"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": false,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 12,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#156FF5",
         },
+        {},
+        undefined,
       ]
     }
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="Select a date"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -5804,7 +3806,7 @@ exports[`Story Snapshots: SectionDatePicker should match snapshot 1`] = `
     >
       Select a date
     </Text>
-  </RNGestureHandlerButton>
+  </View>
 </View>
 `;
 
@@ -5818,57 +3820,67 @@ exports[`Story Snapshots: SectionFontSizeParity should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Regular message: the reference font size"
+    >
+      Regular message: the reference font size
+    </Text>
+  </View>
+  <View
+    style={
+      [
+        {
+          "marginBottom": 8,
+        },
+        {
+          "justifyContent": "center",
+        },
+      ]
+    }
+  >
+    <View
       style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
+        {
+          "flex": 1,
+          "padding": 4,
+        }
       }
     >
-      <Text
+      <View
         style={
           {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
+            "gap": 2,
           }
         }
       >
         <Text
-          accessibilityLabel="Regular message: the reference font size"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Section mrkdwn: must match the message above"
         >
-          Regular message: the reference font size
+          Section mrkdwn: must match the message above
         </Text>
-      </Text>
+      </View>
+    </View>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Updating workspace from 8.7.0-rc.1 to 8.7.0-rc.2"
+    >
+      Updating workspace from 8\\.7\\.0\\-rc\\.1 to 8\\.7\\.0\\-rc\\.2
+    </Text>
+    <Text
+      accessibilityLabel="		changes: https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2"
+    >
+      		changes: [https://github\\.com/RocketChat/Rocket\\.Chat/compare/8\\.7\\.0\\-rc\\.1\\.\\.\\.8\\.7\\.0\\-rc\\.2](&lt;https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2&gt;)
+    </Text>
+    <Text
+      accessibilityLabel="	"
+    >
+      	
     </Text>
   </View>
   <View
@@ -5899,911 +3911,163 @@ exports[`Story Snapshots: SectionFontSizeParity should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Updating workspace from 8.7.0-rc.1 to 8.7.0-rc.2"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Section mrkdwn: must match the message above"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Section mrkdwn: must match the message above
-            </Text>
-          </Text>
+          Updating workspace from 8\\.7\\.0\\-rc\\.1 to 8\\.7\\.0\\-rc\\.2
+        </Text>
+        <Text
+          accessibilityLabel="		changes: https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2"
+        >
+          		changes: [https://github\\.com/RocketChat/Rocket\\.Chat/compare/8\\.7\\.0\\-rc\\.1\\.\\.\\.8\\.7\\.0\\-rc\\.2](&lt;https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2&gt;)
+        </Text>
+        <Text
+          accessibilityLabel="	"
+        >
+          	
         </Text>
       </View>
     </View>
   </View>
+</View>
+`;
+
+exports[`Story Snapshots: SectionMarkdownList should match snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "marginBottom": 8,
+      },
+      {
+        "justifyContent": "center",
+      },
+    ]
+  }
+>
   <View
     style={
       {
-        "gap": 2,
+        "flex": 1,
+        "padding": 4,
       }
     }
   >
-    <Text
+    <View
       style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
+        {
+          "gap": 2,
+        }
       }
     >
       <Text
+        accessibilityLabel="List:"
+      >
+        **List**:
+      </Text>
+      <Text
+        accessibilityLabel="Item"
+      >
+        1. Item
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
+[
+  <View
+    style={
+      [
+        {
+          "marginBottom": 8,
+        },
+        {
+          "justifyContent": "center",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        {
+          "flex": 1,
+          "padding": 4,
+        }
+      }
+    >
+      <View
         style={
           {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
+            "gap": 2,
           }
         }
       >
         <Text
-          accessibilityLabel="Updating workspace from 8.7.0-rc.1 to 8.7.0-rc.2"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Updating workspace from 8.7.0-rc.1 to 8.7.0-rc.2
-        </Text>
-      </Text>
-    </Text>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="		changes: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          		changes: 
-        </Text>
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="	"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          	
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      [
-        {
-          "marginBottom": 8,
-        },
-        {
-          "justifyContent": "center",
-        },
-      ]
-    }
-  >
-    <View
-      style={
-        {
-          "flex": 1,
-          "padding": 4,
-        }
-      }
-    >
-      <View
-        style={
-          {
-            "gap": 2,
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Updating workspace from 8.7.0-rc.1 to 8.7.0-rc.2"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Updating workspace from 8.7.0-rc.1 to 8.7.0-rc.2
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="		changes: "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              		changes: 
-            </Text>
-            <Text
-              onLongPress={[Function]}
-              onPress={[Function]}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "color": "#095AD2",
-                      },
-                    ]
-                  }
-                >
-                  https://github.com/RocketChat/Rocket.Chat/compare/8.7.0-rc.1...8.7.0-rc.2
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="	"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              	
-            </Text>
-          </Text>
-        </Text>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: SectionMarkdownList should match snapshot 1`] = `
-<View
-  style={
-    [
-      {
-        "marginBottom": 8,
-      },
-      {
-        "justifyContent": "center",
-      },
-    ]
-  }
->
-  <View
-    style={
-      {
-        "flex": 1,
-        "padding": 4,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
+          accessibilityLabel="Section + select"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                accessibilityLabel="List"
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                  ]
-                }
-              >
-                List
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=":"
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            :
-          </Text>
+          Section \\+ select
         </Text>
-      </Text>
-      <View>
-        <View
-          style={
-            {
-              "flexDirection": "row",
-            }
-          }
-        >
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            1
-            . 
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                accessibilityLabel="Item"
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                  ]
-                }
-              >
-                Item
-              </Text>
-            </Text>
-          </Text>
-        </View>
       </View>
     </View>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
-[
-  <View
-    style={
-      [
-        {
-          "marginBottom": 8,
-        },
-        {
-          "justifyContent": "center",
-        },
-      ]
-    }
-  >
     <View
-      style={
+      accessibilityLabel="2 selecteds"
+      accessibilityRole="button"
+      accessibilityState={
         {
-          "flex": 1,
-          "padding": 4,
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
         }
       }
-    >
-      <View
-        style={
-          {
-            "gap": 2,
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Section + select"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Section + select
-            </Text>
-          </Text>
-        </Text>
-      </View>
-    </View>
-    <RNGestureHandlerButton
-      accessibilityLabel="2 selecteds"
-      accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={0.105}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
-            "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 12,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
           },
+          {},
+          undefined,
         ]
       }
       underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
+        accessibilityLabel="2 selecteds"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -6825,7 +4089,7 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
       >
         2 selecteds
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
   <View
     style={
@@ -6855,111 +4119,70 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Section + select with value undefined"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Section + select with value undefined"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Section + select with value undefined
-            </Text>
-          </Text>
+          Section \\+ select with value undefined
         </Text>
       </View>
     </View>
-    <RNGestureHandlerButton
+    <View
       accessibilityLabel="0 selecteds"
       accessibilityRole="button"
-      activeOpacity={0.105}
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={0.105}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
         [
           {
-            "backgroundColor": "#156FF5",
-            "borderRadius": 4,
             "justifyContent": "center",
-            "marginBottom": 12,
             "paddingHorizontal": 16,
             "paddingVertical": 14,
           },
           {
-            "cursor": undefined,
+            "borderRadius": 4,
+            "marginBottom": 12,
+          },
+          {
+            "backgroundColor": "#156FF5",
           },
+          {},
+          undefined,
         ]
       }
       underlayColor="black"
     >
-      <View
-        collapsable={false}
-        style={
-          {
-            "backgroundColor": "black",
-            "borderBottomLeftRadius": undefined,
-            "borderBottomRightRadius": undefined,
-            "borderRadius": 4,
-            "borderTopLeftRadius": undefined,
-            "borderTopRightRadius": undefined,
-            "bottom": 0,
-            "left": 0,
-            "opacity": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          }
-        }
-      />
       <Text
+        accessibilityLabel="0 selecteds"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -6981,7 +4204,7 @@ exports[`Story Snapshots: SectionMultiSelect should match snapshot 1`] = `
       >
         0 selecteds
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>,
 ]
 `;
@@ -7015,57 +4238,9 @@ exports[`Story Snapshots: SectionOverflow should match snapshot 1`] = `
       }
     >
       <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
+        accessibilityLabel="Section + Overflow"
       >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Section + Overflow"
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Section + Overflow
-          </Text>
-        </Text>
+        Section \\+ Overflow
       </Text>
     </View>
   </View>
@@ -7091,13 +4266,29 @@ exports[`Story Snapshots: SectionOverflow should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
+      focusable={true}
       hitSlop={
         {
           "bottom": 4,
@@ -7106,53 +4297,40 @@ exports[`Story Snapshots: SectionOverflow should match snapshot 1`] = `
           "top": 4,
         }
       }
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[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,
-          },
-          {
-            "cursor": undefined,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": undefined,
+              "borderRadius": undefined,
+            },
+          ],
+          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={
           {
@@ -7187,7 +4365,7 @@ exports[`Story Snapshots: SectionOverflow should match snapshot 1`] = `
           
         </Text>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
 </View>
 `;
@@ -7221,57 +4399,9 @@ exports[`Story Snapshots: SectionSelect should match snapshot 1`] = `
       }
     >
       <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
+        accessibilityLabel="Section + select"
       >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Section + select"
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Section + select
-          </Text>
-        </Text>
+        Section \\+ select
       </Text>
     </View>
   </View>
diff --git a/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap b/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
index dae7366564f..2c5fc57d84e 100644
--- a/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
+++ b/app/containers/UIKit/__snapshots__/UiKitModal.test.tsx.snap
@@ -10,6 +10,9 @@ exports[`Story Snapshots: ModalActions should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Title"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -32,13 +35,13 @@ exports[`Story Snapshots: ModalActions should match snapshot 1`] = `
       Title
     </Text>
     <A11yOrderView
-      orderKey="«r0»"
+      orderKey="_r_0_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r0»"
+        orderKey="_r_0_"
       >
         <View
           style={
@@ -140,57 +143,9 @@ exports[`Story Snapshots: ModalActions should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Details"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Details"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Details
-            </Text>
-          </Text>
+          Details
         </Text>
       </View>
     </View>
@@ -723,6 +678,9 @@ exports[`Story Snapshots: ModalActions should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Description"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -745,13 +703,13 @@ exports[`Story Snapshots: ModalActions should match snapshot 1`] = `
       Description
     </Text>
     <A11yOrderView
-      orderKey="«r1»"
+      orderKey="_r_1_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r1»"
+        orderKey="_r_1_"
       >
         <View
           style={
@@ -861,134 +819,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Actions with Show More 🚀"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Actions with Show More"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Actions with Show More
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-            <Text
-              style={
-                [
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              🚀
-            </Text>
-          </Text>
+          **Actions with Show More** 🚀
         </Text>
         <View
           style={
@@ -998,57 +831,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
           }
         />
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="This modal demonstrates the "Show more" functionality. The actions block has 8 buttons, but only the first 5 are visible initially. Click "Show more" to reveal all buttons."
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="This modal demonstrates the "Show more" functionality. The actions block has 8 buttons, but only the first 5 are visible initially. Click "Show more" to reveal all buttons."
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              This modal demonstrates the "Show more" functionality. The actions block has 8 buttons, but only the first 5 are visible initially. Click "Show more" to reveal all buttons.
-            </Text>
-          </Text>
+          This modal demonstrates the "Show more" functionality\\. The actions block has 8 buttons, but only the first 5 are visible initially\\. Click "Show more" to reveal all buttons\\.
         </Text>
       </View>
     </View>
@@ -1122,6 +907,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Primary Action"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1195,6 +983,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Secondary"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1268,6 +1059,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Danger Action"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1341,6 +1135,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Button 4"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1414,6 +1211,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Button 5"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1494,6 +1294,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Button 6 - Hidden"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1574,6 +1377,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Button 7 - Hidden"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1654,6 +1460,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Button 8 - Hidden"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1675,57 +1484,64 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
       </Text>
     </View>
   </View>,
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="Show more"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#156FF5",
-          "borderRadius": 4,
           "justifyContent": "center",
-          "marginBottom": 12,
           "paddingHorizontal": 16,
           "paddingVertical": 14,
         },
         {
-          "cursor": undefined,
+          "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#156FF5",
         },
+        {},
+        undefined,
       ]
     }
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="Show more"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -1747,7 +1563,7 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
     >
       Show more
     </Text>
-  </RNGestureHandlerButton>,
+  </View>,
   <View
     style={
       [
@@ -1776,201 +1592,9 @@ exports[`Story Snapshots: ModalActionsWithShowMore should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="This actions block has 8 buttons but only shows 5 initially. Click "Show more" to see all buttons!"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="This actions block has "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              This actions block has 
-            </Text>
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="8 buttons"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  8 buttons
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" but only shows "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               but only shows 
-            </Text>
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="5"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  5
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" initially. Click "Show more" to see all buttons!"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               initially. Click "Show more" to see all buttons!
-            </Text>
-          </Text>
+          This actions block has **8 buttons** but only shows **5** initially\\. Click "Show more" to see all buttons\\!
         </Text>
       </View>
     </View>
@@ -1991,6 +1615,8 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
   >
     <Text
       accessibilityLabel="Due today"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={0}
       style={
         [
@@ -2061,57 +1687,9 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Finish interface componests (3 hours)"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Finish interface componests (3 hours)"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Finish interface componests (3 hours)
-            </Text>
-          </Text>
+          Finish interface componests \\(3 hours\\)
         </Text>
       </View>
     </View>
@@ -2137,13 +1715,29 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 4,
@@ -2152,53 +1746,40 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
             "top": 4,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[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,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": undefined,
+                "borderRadius": undefined,
+              },
+            ],
+            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={
             {
@@ -2233,7 +1814,7 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2264,57 +1845,9 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="English Class (1 hour)"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="English Class (1 hour)"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              English Class (1 hour)
-            </Text>
-          </Text>
+          English Class \\(1 hour\\)
         </Text>
       </View>
     </View>
@@ -2340,13 +1873,29 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 4,
@@ -2355,53 +1904,40 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
             "top": 4,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[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,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": undefined,
+                "borderRadius": undefined,
+              },
+            ],
+            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={
             {
@@ -2436,7 +1972,7 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
   <View
@@ -2467,57 +2003,9 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Send an email to John (15min)"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Send an email to John (15min)"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Send an email to John (15min)
-            </Text>
-          </Text>
+          Send an email to John \\(15min\\)
         </Text>
       </View>
     </View>
@@ -2543,13 +2031,29 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
+        focusable={true}
         hitSlop={
           {
             "bottom": 4,
@@ -2558,53 +2062,40 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
             "top": 4,
           }
         }
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[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,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": undefined,
+                "borderRadius": undefined,
+              },
+            ],
+            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={
             {
@@ -2639,7 +2130,7 @@ exports[`Story Snapshots: ModalContextsDividers should match snapshot 1`] = `
             
           </Text>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
 ]
@@ -2654,6 +2145,9 @@ exports[`Story Snapshots: ModalDatePickerWithError should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -2697,60 +2191,63 @@ exports[`Story Snapshots: ModalDatePickerWithError should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       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,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": undefined,
+            },
+          ],
+          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={{}}
       >
@@ -2772,6 +2269,9 @@ exports[`Story Snapshots: ModalDatePickerWithError should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="Invalid Date"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -2823,9 +2323,12 @@ exports[`Story Snapshots: ModalDatePickerWithError should match snapshot 1`] = `
           </Text>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>
   <Text
+    accessibilityLabel="error test"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -2860,13 +2363,13 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
     }
   >
     <A11yOrderView
-      orderKey="«r2»"
+      orderKey="_r_2_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r2»"
+        orderKey="_r_2_"
       >
         <View
           style={
@@ -2948,6 +2451,9 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Outgoing Title"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -2970,13 +2476,13 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
       Outgoing Title
     </Text>
     <A11yOrderView
-      orderKey="«r3»"
+      orderKey="_r_3_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r3»"
+        orderKey="_r_3_"
       >
         <View
           style={
@@ -3050,6 +2556,9 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
       </A11yIndexView>
     </A11yOrderView>
     <Text
+      accessibilityLabel="Pick something unique!"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -3079,6 +2588,9 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Set a date"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -3122,60 +2634,63 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            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={{}}
         >
@@ -3197,6 +2712,9 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Invalid Date"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -3248,7 +2766,7 @@ exports[`Story Snapshots: ModalFormInput should match snapshot 1`] = `
             </Text>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>,
 ]
@@ -3267,6 +2785,8 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
   >
     <Text
       accessibilityLabel="Task: ZOL-994"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={0}
       style={
         [
@@ -3320,57 +2840,9 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Update Spec final assets"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Update Spec final assets"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Update Spec final assets
-            </Text>
-          </Text>
+          Update Spec final assets
         </Text>
       </View>
     </View>
@@ -3425,6 +2897,9 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Change"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -3471,6 +2946,9 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Notes"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -3493,6 +2971,9 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
       Notes
     </Text>
     <Text
+      accessibilityLabel="Describe your update"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -3515,13 +2996,13 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
       Describe your update
     </Text>
     <A11yOrderView
-      orderKey="«r4»"
+      orderKey="_r_4_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r4»"
+        orderKey="_r_4_"
       >
         <View
           style={
@@ -3598,6 +3079,9 @@ exports[`Story Snapshots: ModalFormTextArea should match snapshot 1`] = `
       </A11yIndexView>
     </A11yOrderView>
     <Text
+      accessibilityLabel="Please take the time to compose something short"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -3813,57 +3297,9 @@ exports[`Story Snapshots: ModalImages should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="How could be the life in Mars?"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="How could be the life in Mars?"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              How could be the life in Mars?
-            </Text>
-          </Text>
+          How could be the life in Mars?
         </Text>
       </View>
     </View>
@@ -3901,6 +3337,7 @@ exports[`Story Snapshots: ModalImages should match snapshot 1`] = `
         onLoadStart={[Function]}
         onProgress={[Function]}
         placeholder={[]}
+        sfEffect={null}
         source={
           [
             {
@@ -3915,12 +3352,16 @@ exports[`Story Snapshots: ModalImages should match snapshot 1`] = `
             "width": 20,
           }
         }
+        symbolSize={null}
+        symbolWeight={null}
         transition={null}
         width={20}
       />
     </View>
     <Text
       accessibilityLabel="November 25, 2019"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={0}
       style={
         [
@@ -3974,148 +3415,14 @@ exports[`Story Snapshots: ModalImages should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Next stop, Mars!"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Next stop, Mars!"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Next stop, Mars!
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Next stop, Mars\\!**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Mussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl."
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Mussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl."
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Mussum Ipsum, cacilds vidis litro abertis. Admodum accumsan disputationi eu sit. Vide electram sadipscing et per. Diuretics paradis num copo é motivis de denguis. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Aenean aliquam molestie leo, vitae iaculis nisl.
-            </Text>
-          </Text>
+          Mussum Ipsum, cacilds vidis litro abertis\\. Admodum accumsan disputationi eu sit\\. Vide electram sadipscing et per\\. Diuretics paradis num copo é motivis de denguis\\. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis\\. Aenean aliquam molestie leo, vitae iaculis nisl\\.
         </Text>
       </View>
     </View>
@@ -4133,6 +3440,9 @@ exports[`Story Snapshots: ModalInputWithAddField should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="First field"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -4155,13 +3465,13 @@ exports[`Story Snapshots: ModalInputWithAddField should match snapshot 1`] = `
       First field
     </Text>
     <A11yOrderView
-      orderKey="«r5»"
+      orderKey="_r_5_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r5»"
+        orderKey="_r_5_"
       >
         <View
           style={
@@ -4243,6 +3553,9 @@ exports[`Story Snapshots: ModalInputWithAddField should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Second field"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -4265,13 +3578,13 @@ exports[`Story Snapshots: ModalInputWithAddField should match snapshot 1`] = `
       Second field
     </Text>
     <A11yOrderView
-      orderKey="«r6»"
+      orderKey="_r_6_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«r6»"
+        orderKey="_r_6_"
       >
         <View
           style={
@@ -4415,6 +3728,9 @@ exports[`Story Snapshots: ModalInputWithError should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -4437,13 +3753,13 @@ exports[`Story Snapshots: ModalInputWithError should match snapshot 1`] = `
     Label
   </Text>
   <A11yOrderView
-    orderKey="«r7»"
+    orderKey="_r_7_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r7»"
+      orderKey="_r_7_"
     >
       <View
         style={
@@ -4517,6 +3833,9 @@ exports[`Story Snapshots: ModalInputWithError should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <Text
+    accessibilityLabel="error test"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -4551,6 +3870,9 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Share with..."
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -4594,60 +3916,63 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
         ]
       }
     >
-      <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={
-          [
-            {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": 4,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
-            },
-            {
-              "cursor": undefined,
-            },
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": 4,
+              },
+            ],
+            undefined,
           ]
         }
         underlayColor="#E4E7EA"
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "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={{}}
         >
@@ -4673,6 +3998,9 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Search"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4725,9 +4053,12 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
             </Text>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <Text
+      accessibilityLabel="Initial Value Undefined"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -4757,6 +4088,9 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Share with..."
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -4800,60 +4134,63 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            {
-              "backgroundColor": "#FFFFFF",
-              "borderRadius": 4,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": 4,
+              },
+            ],
+            undefined,
           ]
         }
         underlayColor="#E4E7EA"
       >
-        <View
-          collapsable={false}
-          style={
-            {
-              "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={{}}
         >
@@ -4910,61 +4247,63 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
                   ]
                 }
               >
-                <RNGestureHandlerButton
-                  activeOpacity={1}
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  activeUnderlayOpacity={1}
+                  animationDuration={0}
                   collapsable={false}
-                  delayLongPress={600}
-                  enabled={true}
-                  handlerTag={-1}
-                  handlerType="NativeViewGestureHandler"
-                  innerRef={null}
-                  onActiveStateChange={[Function]}
-                  onGestureHandlerEvent={[Function]}
-                  onGestureHandlerStateChange={[Function]}
-                  onPress={[Function]}
-                  rippleColor="#E4E7EA"
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
                     [
-                      {
-                        "backgroundColor": "#F2F3F5",
-                        "borderRadius": 2,
-                        "margin": undefined,
-                        "marginBottom": 8,
-                        "marginEnd": undefined,
-                        "marginHorizontal": undefined,
-                        "marginLeft": undefined,
-                        "marginRight": 8,
-                        "marginStart": undefined,
-                        "marginTop": undefined,
-                        "marginVertical": undefined,
-                      },
-                      {
-                        "cursor": undefined,
-                      },
+                      [
+                        undefined,
+                        {
+                          "margin": undefined,
+                          "marginBottom": 8,
+                          "marginEnd": undefined,
+                          "marginHorizontal": undefined,
+                          "marginLeft": undefined,
+                          "marginRight": 8,
+                          "marginStart": undefined,
+                          "marginTop": undefined,
+                          "marginVertical": undefined,
+                        },
+                        {
+                          "backgroundColor": "#F2F3F5",
+                          "borderRadius": 2,
+                        },
+                      ],
+                      undefined,
                     ]
                   }
-                  testID="multi-select-chip-1"
                   underlayColor="#E4E7EA"
                 >
-                  <View
-                    collapsable={false}
-                    style={
-                      {
-                        "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={
                       {
@@ -4974,8 +4313,12 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
                         "paddingHorizontal": 4,
                       }
                     }
+                    testID="multi-select-chip-1"
                   >
                     <Text
+                      accessibilityLabel="John"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -5026,7 +4369,7 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
                       
                     </Text>
                   </View>
-                </RNGestureHandlerButton>
+                </View>
               </ExternalKeyboardView>
             </View>
             <Text
@@ -5060,9 +4403,12 @@ exports[`Story Snapshots: ModalMultiSelect should match snapshot 1`] = `
             </Text>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <Text
+      accessibilityLabel="Initial Value as John"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -5096,6 +4442,9 @@ exports[`Story Snapshots: ModalMultilneWithError should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="Label"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -5118,13 +4467,13 @@ exports[`Story Snapshots: ModalMultilneWithError should match snapshot 1`] = `
     Label
   </Text>
   <A11yOrderView
-    orderKey="«r8»"
+    orderKey="_r_8_"
   >
     <A11yIndexView
       importantForAccessibility="yes"
       orderFocusType={0}
       orderIndex={1}
-      orderKey="«r8»"
+      orderKey="_r_8_"
     >
       <View
         style={
@@ -5201,6 +4550,9 @@ exports[`Story Snapshots: ModalMultilneWithError should match snapshot 1`] = `
     </A11yIndexView>
   </A11yOrderView>
   <Text
+    accessibilityLabel="error test"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -5255,362 +4607,19 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Bruno Quadros,"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Bruno Quadros"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Bruno Quadros
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=","
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              ,
-            </Text>
-          </Text>
+          **Bruno Quadros**,
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Please review your details for your travel expense."
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Please review your details for your "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Please review your details for your 
-            </Text>
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="travel expense"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  travel expense
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel="."
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              .
-            </Text>
-          </Text>
+          Please review your details for your **travel expense**\\.
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Expense no. DA921."
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Expense no. "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Expense no. 
-            </Text>
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="DA921"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  DA921
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel="."
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              .
-            </Text>
-          </Text>
+          Expense no\\. **DA921**\\.
         </Text>
       </View>
     </View>
@@ -5631,6 +4640,7 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
       onLoadStart={[Function]}
       onProgress={[Function]}
       placeholder={[]}
+      sfEffect={null}
       source={
         [
           {
@@ -5645,6 +4655,8 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
           "width": 88,
         }
       }
+      symbolSize={null}
+      symbolWeight={null}
       transition={null}
       width={88}
     />
@@ -5694,148 +4706,14 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Date:"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Date:"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Date:
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Date:**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="11/02/2020"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="11/02/2020"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              11/02/2020
-            </Text>
-          </Text>
+          11/02/2020
         </Text>
       </View>
     </View>
@@ -5868,148 +4746,14 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Category:"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Category:"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Category:
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Category:**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Travel"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Travel"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Travel
-            </Text>
-          </Text>
+          Travel
         </Text>
       </View>
     </View>
@@ -6042,148 +4786,14 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Cost:"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Cost:"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Cost:
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Cost:**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="$150.00 USD"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="$150.00 USD"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              $150.00 USD
-            </Text>
-          </Text>
+          \\$150\\.00 USD
         </Text>
       </View>
     </View>
@@ -6216,148 +4826,14 @@ exports[`Story Snapshots: ModalSectionAccessories should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Notes:"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Notes:"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Notes:
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Notes:**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="WebSummit Conference"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="WebSummit Conference"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              WebSummit Conference
-            </Text>
-          </Text>
+          WebSummit Conference
         </Text>
       </View>
     </View>
@@ -6390,214 +4866,19 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
       <View
         style={
           {
-            "gap": 2,
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Rocket.Chat is free, unlimited and open source"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Rocket.Chat is free, unlimited and open source
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-            <Text
-              style={
-                [
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              🚀
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
+            "gap": 2,
           }
+        }
+      >
+        <Text
+          accessibilityLabel="Rocket.Chat is free, unlimited and open source 🚀"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="If you have any doubt ask to "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              If you have any doubt ask to 
-            </Text>
-            <Text
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "lineHeight": 22,
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              @rocketcat
-            </Text>
-          </Text>
+          **Rocket\\.Chat is free, unlimited and open source** 🚀
+        </Text>
+        <Text
+          accessibilityLabel="If you have any doubt ask to @rocketcat"
+        >
+          If you have any doubt ask to @rocketcat
         </Text>
       </View>
     </View>
@@ -6655,148 +4936,14 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Text 1"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Text 1"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Text 1
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Text 1**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Description, Mussum Ipsum, cacilds vidis litro
-            </Text>
-          </Text>
+          Description, Mussum Ipsum, cacilds vidis litro
         </Text>
       </View>
     </Text>
@@ -6810,162 +4957,28 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
           {
             "marginVertical": 6,
           },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <View
-        style={
-          {
-            "gap": 2,
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Text 2"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Text 2
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
+          {
+            "color": "#2F343D",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          {
+            "gap": 2,
           }
+        }
+      >
+        <Text
+          accessibilityLabel="Text 2"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Description, Mussum Ipsum, cacilds vidis litro
-            </Text>
-          </Text>
+          **Text 2**
+        </Text>
+        <Text
+          accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
+        >
+          Description, Mussum Ipsum, cacilds vidis litro
         </Text>
       </View>
     </Text>
@@ -7006,148 +5019,14 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Text 3"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Text 3"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Text 3
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Text 3**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Description, Mussum Ipsum, cacilds vidis litro
-            </Text>
-          </Text>
+          Description, Mussum Ipsum, cacilds vidis litro
         </Text>
       </View>
     </Text>
@@ -7175,148 +5054,14 @@ exports[`Story Snapshots: ModalSectionSelects should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Text 4"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Text 4"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  Text 4
-                </Text>
-              </Text>
-            </Text>
-          </Text>
+          **Text 4**
         </Text>
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Description, Mussum Ipsum, cacilds vidis litro"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Description, Mussum Ipsum, cacilds vidis litro
-            </Text>
-          </Text>
+          Description, Mussum Ipsum, cacilds vidis litro
         </Text>
       </View>
     </Text>
diff --git a/app/containers/UnreadBadge/__snapshots__/UnreadBadge.test.tsx.snap b/app/containers/UnreadBadge/__snapshots__/UnreadBadge.test.tsx.snap
index e4708e727c3..c1139294006 100644
--- a/app/containers/UnreadBadge/__snapshots__/UnreadBadge.test.tsx.snap
+++ b/app/containers/UnreadBadge/__snapshots__/UnreadBadge.test.tsx.snap
@@ -29,6 +29,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     testID="unread-badge-9"
   >
     <Text
+      accessibilityLabel="9"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -72,6 +75,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     testID="unread-badge-+99"
   >
     <Text
+      accessibilityLabel="+99"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -118,6 +124,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     testID="unread-badge-9"
   >
     <Text
+      accessibilityLabel="9"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -162,6 +171,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     testID="unread-badge-+999"
   >
     <Text
+      accessibilityLabel="+999"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -206,6 +218,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     testID="mention-badge-9"
   >
     <Text
+      accessibilityLabel="9"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -250,6 +265,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     testID="group-mention-badge-9"
   >
     <Text
+      accessibilityLabel="9"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -294,6 +312,9 @@ exports[`Story Snapshots: All should match snapshot 1`] = `
     testID="unread-badge-9"
   >
     <Text
+      accessibilityLabel="9"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -352,6 +373,9 @@ exports[`Story Snapshots: DifferentMentionTypes should match snapshot 1`] = `
     testID="unread-badge-1"
   >
     <Text
+      accessibilityLabel="1"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -396,6 +420,9 @@ exports[`Story Snapshots: DifferentMentionTypes should match snapshot 1`] = `
     testID="mention-badge-1"
   >
     <Text
+      accessibilityLabel="1"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -440,6 +467,9 @@ exports[`Story Snapshots: DifferentMentionTypes should match snapshot 1`] = `
     testID="group-mention-badge-1"
   >
     <Text
+      accessibilityLabel="1"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -484,6 +514,9 @@ exports[`Story Snapshots: DifferentMentionTypes should match snapshot 1`] = `
     testID="mention-badge-1"
   >
     <Text
+      accessibilityLabel="1"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -528,6 +561,9 @@ exports[`Story Snapshots: DifferentMentionTypes should match snapshot 1`] = `
     testID="unread-badge-1"
   >
     <Text
+      accessibilityLabel="1"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -572,6 +608,9 @@ exports[`Story Snapshots: DifferentMentionTypes should match snapshot 1`] = `
     testID="unread-badge-1"
   >
     <Text
+      accessibilityLabel="1"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -616,6 +655,9 @@ exports[`Story Snapshots: DifferentMentionTypes should match snapshot 1`] = `
     testID="unread-badge-1"
   >
     <Text
+      accessibilityLabel="1"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -674,6 +716,9 @@ exports[`Story Snapshots: Normal should match snapshot 1`] = `
     testID="unread-badge-9"
   >
     <Text
+      accessibilityLabel="9"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -718,6 +763,9 @@ exports[`Story Snapshots: Normal should match snapshot 1`] = `
     testID="unread-badge-+999"
   >
     <Text
+      accessibilityLabel="+999"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -773,6 +821,9 @@ exports[`Story Snapshots: Small should match snapshot 1`] = `
     testID="unread-badge-9"
   >
     <Text
+      accessibilityLabel="9"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -816,6 +867,9 @@ exports[`Story Snapshots: Small should match snapshot 1`] = `
     testID="unread-badge-+99"
   >
     <Text
+      accessibilityLabel="+99"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={1}
       style={
         [
@@ -877,6 +931,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="unread-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -921,6 +978,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="mention-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -965,6 +1025,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="group-mention-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1009,6 +1072,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="unread-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1064,6 +1130,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="unread-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1108,6 +1177,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="mention-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1152,6 +1224,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="group-mention-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1196,6 +1271,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="unread-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1251,6 +1329,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="unread-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1295,6 +1376,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="mention-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1339,6 +1423,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="group-mention-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1383,6 +1470,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
       testID="unread-badge-1"
     >
       <Text
+        accessibilityLabel="1"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
diff --git a/app/containers/UnreadBadge/index.tsx b/app/containers/UnreadBadge/index.tsx
index 7217961e8c0..d2377a4f0c3 100644
--- a/app/containers/UnreadBadge/index.tsx
+++ b/app/containers/UnreadBadge/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { type StyleProp, StyleSheet, Text, useWindowDimensions, View, type ViewStyle } from 'react-native';
+import { type StyleProp, StyleSheet, useWindowDimensions, View, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import sharedStyles from '~/views/Styles';
 import { getUnreadStyle } from './getUnreadStyle';
@@ -118,9 +119,9 @@ const UnreadBadge = memo(
 					style
 				]}
 				testID={testId}>
-				<Text style={[styles.unreadText, small && styles.textSmall, { color }]} numberOfLines={1}>
+				<PlainText style={[styles.unreadText, small && styles.textSmall, { color }]} numberOfLines={1}>
 					{text}
-				</Text>
+				</PlainText>
 			</View>
 		);
 	}
diff --git a/app/containers/UserGeneratedContentRules.tsx b/app/containers/UserGeneratedContentRules.tsx
index 9a27969132b..454a1f09cb4 100644
--- a/app/containers/UserGeneratedContentRules.tsx
+++ b/app/containers/UserGeneratedContentRules.tsx
@@ -1,4 +1,5 @@
 import { View, StyleSheet, Text, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import sharedStyles from '../views/Styles';
 import { useTheme } from '../theme';
@@ -38,7 +39,9 @@ const UGCRules = ({ styleContainer }: { styleContainer?: ViewStyle }) => {
 	};
 	return (
 		<View style={[styles.bottomContainer, styleContainer]}>
-			<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Onboarding_agree_terms')}</Text>
+			<PlainText style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
+				{I18n.t('Onboarding_agree_terms')}
+			</PlainText>
 			<Text
 				style={[styles.bottomContainerTextUnderline, styles.bottomContainerText, { color: colors.fontInfo }]}
 				onPress={() => openContract('terms-of-service')}>
diff --git a/app/containers/UserItem.ios.tsx b/app/containers/UserItem.ios.tsx
new file mode 100644
index 00000000000..9d190485cb6
--- /dev/null
+++ b/app/containers/UserItem.ios.tsx
@@ -0,0 +1,43 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import Avatar from './Avatar';
+import { CustomIcon, type TIconsName } from './CustomIcon';
+import NativeListRow from './NativeListRow';
+import { AVATAR_SIZE } from './NativeListRow/constants';
+import { useTheme } from '../theme';
+import i18n from '../i18n';
+
+interface IUserItem {
+	name: string;
+	username: string;
+	onPress(): void;
+	testID: string;
+	onLongPress?: () => void;
+	style?: StyleProp<ViewStyle>;
+	icon?: TIconsName | null;
+	iconColor?: string;
+	isChecked?: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
+}
+
+const UserItem = ({ name, username, onPress, testID, onLongPress, icon, iconColor, isChecked, isFirst, isLast }: IUserItem) => {
+	const { colors } = useTheme();
+	const label = icon ? `${name} ${isChecked ? i18n.t('Selected') : i18n.t('Unselected')}` : name;
+	return (
+		<NativeListRow
+			title={name}
+			onPress={onPress}
+			onLongPress={onLongPress}
+			testID={testID}
+			accessibilityLabel={label}
+			isSelected={isChecked}
+			isFirst={isFirst}
+			isLast={isLast}
+			leading={<Avatar text={username} size={AVATAR_SIZE} />}
+			trailing={icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.fontHint} /> : undefined}
+		/>
+	);
+};
+
+export default UserItem;
diff --git a/app/containers/UserItem.tsx b/app/containers/UserItem.tsx
index 7a6b8bffc11..972e346ea18 100644
--- a/app/containers/UserItem.tsx
+++ b/app/containers/UserItem.tsx
@@ -1,4 +1,5 @@
-import { Pressable, PixelRatio, type StyleProp, StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import { Pressable, PixelRatio, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import Avatar from './Avatar';
 import { CustomIcon, type TIconsName } from './CustomIcon';
@@ -44,6 +45,8 @@ interface IUserItem {
 	icon?: TIconsName | null;
 	iconColor?: string;
 	isChecked?: boolean;
+	isFirst?: boolean;
+	isLast?: boolean;
 }
 
 const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, iconColor, isChecked }: IUserItem) => {
@@ -70,9 +73,9 @@ const UserItem = ({ name, username, onPress, testID, onLongPress, style, icon, i
 			<View style={[styles.container, { height }, style]}>
 				<Avatar text={username} size={30} style={styles.avatar} />
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
+					<PlainText style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{name}
-					</Text>
+					</PlainText>
 				</View>
 				{icon ? <CustomIcon name={icon} size={22} color={iconColor || colors.fontHint} style={styles.icon} /> : null}
 			</View>
diff --git a/app/containers/VideoPlayer/index.tsx b/app/containers/VideoPlayer/index.tsx
index 4d156ff367f..b8877b4553d 100644
--- a/app/containers/VideoPlayer/index.tsx
+++ b/app/containers/VideoPlayer/index.tsx
@@ -61,7 +61,7 @@ const VideoPlayer = ({ attachment, user, baseUrl, setLoading }: IVideoPlayerProp
 				style={styles.container}
 				contentFit='contain'
 				nativeControls
-				allowsFullscreen
+				fullscreenOptions={{ enable: true }}
 				allowsPictureInPicture
 			/>
 		</View>
diff --git a/app/containers/markdown/Markdown.textStyle.test.tsx b/app/containers/markdown/Markdown.textStyle.test.tsx
deleted file mode 100644
index c16d9964cf7..00000000000
--- a/app/containers/markdown/Markdown.textStyle.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { StyleSheet } from 'react-native';
-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(StyleSheet.flatten(plainTextNode.props.style)).toEqual(expect.objectContaining({ fontSize: 17 }));
-		expect(StyleSheet.flatten(linkNode.props.style)).toEqual(expect.objectContaining({ fontSize: 17 }));
-		expect(StyleSheet.flatten(mentionNode.props.style)).toEqual(expect.objectContaining({ fontSize: 17 }));
-		expect(StyleSheet.flatten(hashtagNode.props.style)).toEqual(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
deleted file mode 100644
index 5c067a788e9..00000000000
--- a/app/containers/markdown/__snapshots__/Markdown.test.tsx.snap
+++ /dev/null
@@ -1,13272 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="This is block quote"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              This is block quote
-            </Text>
-          </Text>
-        </Text>
-      </View>
-    </View>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="this is a normal line"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          this is a normal line
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Code should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="This is "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          This is 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            inline code
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Inline "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Inline 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            code
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" has "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           has 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            back-ticks around
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" it."
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           it.
-        </Text>
-      </Text>
-    </Text>
-    <View
-      style={
-        [
-          {
-            "borderRadius": 4,
-            "borderWidth": 1,
-            "padding": 4,
-          },
-          {
-            "backgroundColor": "#E4E7EA",
-            "borderColor": "#CBCED1",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Courier New",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        Code block
-      </Text>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Emoji should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Unicode: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Unicode: 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          😃
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          😇
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          👍
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Shortnames: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Shortnames: 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {},
-              false,
-            ]
-          }
-        >
-           
-          😂
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {},
-              false,
-            ]
-          }
-        >
-           
-          👍️
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Custom emojis: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Custom emojis: 
-        </Text>
-        <View
-          style={
-            {
-              "transform": [
-                {
-                  "translateY": 3,
-                },
-              ],
-            }
-          }
-        >
-          <ViewManagerAdapter_ExpoImage
-            containerViewRef={{"current":"Object"}}
-            contentFit="contain"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={15}
-            nativeViewRef={{"current":"NativeComponent"}}
-            onError={[Function]}
-            onLoad={[Function]}
-            onLoadStart={[Function]}
-            onProgress={[Function]}
-            placeholder={[]}
-            source={
-              [
-                {
-                  "uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
-                },
-              ]
-            }
-            style={
-              {
-                "height": 15,
-                "width": 15,
-              }
-            }
-            transition={null}
-            width={15}
-          />
-        </View>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <View
-          style={
-            {
-              "transform": [
-                {
-                  "translateY": 3,
-                },
-              ],
-            }
-          }
-        >
-          <ViewManagerAdapter_ExpoImage
-            containerViewRef={{"current":"Object"}}
-            contentFit="contain"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={15}
-            nativeViewRef={{"current":"NativeComponent"}}
-            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
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <View
-          style={
-            {
-              "transform": [
-                {
-                  "translateY": 3,
-                },
-              ],
-            }
-          }
-        >
-          <ViewManagerAdapter_ExpoImage
-            containerViewRef={{"current":"Object"}}
-            contentFit="contain"
-            contentPosition={
-              {
-                "left": "50%",
-                "top": "50%",
-              }
-            }
-            height={15}
-            nativeViewRef={{"current":"NativeComponent"}}
-            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>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <View
-      style={
-        {
-          "flexDirection": "row",
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "color": "#2F343D",
-            },
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 30,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 43,
-              "textAlign": "left",
-            },
-          ]
-        }
-      >
-        😃
-      </Text>
-      <Text
-        style={
-          [
-            {
-              "color": "#2F343D",
-            },
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 30,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 43,
-              "textAlign": "left",
-            },
-            {},
-            false,
-          ]
-        }
-      >
-        👍️
-      </Text>
-      <View
-        style={
-          {
-            "transform": [
-              {
-                "translateY": 0,
-              },
-            ],
-          }
-        }
-      >
-        <ViewManagerAdapter_ExpoImage
-          containerViewRef={{"current":"Object"}}
-          contentFit="contain"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={30}
-          nativeViewRef={{"current":"NativeComponent"}}
-          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>
-`;
-
-exports[`Story Snapshots: Hashtag should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          test-channel
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          #unknown
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Headers should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 24,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "700",
-            "lineHeight": 30,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Header 1"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          Header 1
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 22,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "700",
-            "lineHeight": 28,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Header 2"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          Header 2
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 20,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "600",
-            "lineHeight": 26,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Header 3"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          Header 3
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 18,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "600",
-            "lineHeight": 24,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Header 4"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          Header 4
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: HeadersWithFormatting should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 24,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "700",
-            "lineHeight": 30,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="H1 "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          H1 
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="bold"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 24,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 30,
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                  ],
-                ]
-              }
-            >
-              bold
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "fontStyle": "italic",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="italic"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 24,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 30,
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ],
-                ]
-              }
-            >
-              italic
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "textDecorationLine": "line-through",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="strike"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 24,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 30,
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                  ],
-                ]
-              }
-            >
-              strike
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            code
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {},
-              false,
-            ]
-          }
-        >
-           
-          🚀
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-              {
-                "color": "#9B1325",
-              },
-            ]
-          }
-        >
-          rocket.cat
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          test-channel
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 24,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 30,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="https://rocket.chat"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 24,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 30,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ],
-                ]
-              }
-            >
-              https://rocket.chat
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 22,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "700",
-            "lineHeight": 28,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="H2 "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          H2 
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="bold"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 22,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 28,
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                  ],
-                ]
-              }
-            >
-              bold
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "fontStyle": "italic",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="italic"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 22,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 28,
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ],
-                ]
-              }
-            >
-              italic
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "textDecorationLine": "line-through",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="strike"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 22,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 28,
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                  ],
-                ]
-              }
-            >
-              strike
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            code
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {},
-              false,
-            ]
-          }
-        >
-           
-          🚀
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-              {
-                "color": "#9B1325",
-              },
-            ]
-          }
-        >
-          rocket.cat
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          test-channel
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 22,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "lineHeight": 28,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="https://rocket.chat"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 22,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "lineHeight": 28,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ],
-                ]
-              }
-            >
-              https://rocket.chat
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 20,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "600",
-            "lineHeight": 26,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="H3 "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          H3 
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="bold"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 20,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 26,
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                  ],
-                ]
-              }
-            >
-              bold
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "fontStyle": "italic",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="italic"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 20,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 26,
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ],
-                ]
-              }
-            >
-              italic
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "textDecorationLine": "line-through",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="strike"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 20,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 26,
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                  ],
-                ]
-              }
-            >
-              strike
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            code
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {},
-              false,
-            ]
-          }
-        >
-           
-          🚀
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#9B1325",
-              },
-            ]
-          }
-        >
-          rocket.cat
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          test-channel
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 20,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="https://rocket.chat"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 20,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 26,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ],
-                ]
-              }
-            >
-              https://rocket.chat
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 18,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "600",
-            "lineHeight": 24,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="H4 "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-          H4 
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="bold"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 18,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 24,
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                  ],
-                ]
-              }
-            >
-              bold
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "fontStyle": "italic",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="italic"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 18,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 24,
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ],
-                ]
-              }
-            >
-              italic
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "textDecorationLine": "line-through",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="strike"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 18,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 24,
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                  ],
-                ]
-              }
-            >
-              strike
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            code
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {},
-              false,
-            ]
-          }
-        >
-           
-          🚀
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-              {
-                "color": "#9B1325",
-              },
-            ]
-          }
-        >
-          rocket.cat
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          test-channel
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "600",
-                "lineHeight": 24,
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="https://rocket.chat"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 18,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "lineHeight": 24,
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ],
-                ]
-              }
-            >
-              https://rocket.chat
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Image should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <ViewManagerAdapter_ExpoImage
-          borderColor={4291546833}
-          containerViewRef={{"current":"Object"}}
-          contentFit="contain"
-          contentPosition={
-            {
-              "left": "50%",
-              "top": "50%",
-            }
-          }
-          height={300}
-          nativeViewRef={{"current":"NativeComponent"}}
-          onError={[Function]}
-          onLoad={[Function]}
-          onLoadStart={[Function]}
-          onProgress={[Function]}
-          placeholder={[]}
-          source={
-            [
-              {
-                "uri": "https://play.google.com/intl/en_us/badges/images/badge_new.png",
-              },
-            ]
-          }
-          style={
-            {
-              "borderColor": "#CBCED1",
-              "height": 300,
-              "width": 300,
-            }
-          }
-          transition={null}
-          width={300}
-        />
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Links should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Markdown link"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              Markdown link
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=": "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          : 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            [description](url)
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Formatted Link"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              Formatted Link
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=": "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          : 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "borderRadius": 4,
-                "borderWidth": 1,
-                "fontFamily": "Courier New",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "paddingLeft": 2,
-                "paddingTop": 2,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#E4E7EA",
-                "borderColor": "#CBCED1",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text>
-            &lt;url|description&gt;
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Markdown link"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              Markdown link
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" and the text with default style"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           and the text with default style
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Markdown link"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              Markdown link
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" and the text continues on the next line"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           and the text continues on the next line
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Lists should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Open Source"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Open Source
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              onLongPress={[Function]}
-              onPress={[Function]}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Rocket.Chat"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "color": "#095AD2",
-                      },
-                    ]
-                  }
-                >
-                  Rocket.Chat
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </View>
-    </View>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="  - nodejs"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-            - nodejs
-        </Text>
-      </Text>
-    </Text>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="  - ReactNative"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-            - ReactNative
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          1
-          . 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Open Source"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Open Source
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          2
-          . 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              onLongPress={[Function]}
-              onPress={[Function]}
-              style={
-                [
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontSize": 16,
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="Rocket.Chat"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "color": "#095AD2",
-                      },
-                    ]
-                  }
-                >
-                  Rocket.Chat
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="bold"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      },
-                    ]
-                  }
-                >
-                  bold
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="italic"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "fontStyle": "italic",
-                      },
-                    ]
-                  }
-                >
-                  italic
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "textDecorationLine": "line-through",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="strikethrough"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      {
-                        "textDecorationLine": "line-through",
-                      },
-                    ]
-                  }
-                >
-                  strikethrough
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityLabel="bold italic"
-                      style={
-                        [
-                          {
-                            "flexShrink": 1,
-                            "fontSize": 16,
-                            "lineHeight": 22,
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          [
-                            {
-                              "fontStyle": "italic",
-                            },
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "700",
-                              "textAlign": "left",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      bold italic
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "700",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "textDecorationLine": "line-through",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityLabel="bold strikethrough"
-                      style={
-                        [
-                          {
-                            "flexShrink": 1,
-                            "fontSize": 16,
-                            "lineHeight": 22,
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "700",
-                              "textAlign": "left",
-                            },
-                            {
-                              "textDecorationLine": "line-through",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      bold strikethrough
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "textDecorationLine": "line-through",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityLabel="italic strikethrough"
-                      style={
-                        [
-                          {
-                            "flexShrink": 1,
-                            "fontSize": 16,
-                            "lineHeight": 22,
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          [
-                            {
-                              "fontStyle": "italic",
-                            },
-                            {
-                              "textDecorationLine": "line-through",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      italic strikethrough
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-            <Text
-              accessibilityLabel=" "
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-               
-            </Text>
-          </Text>
-        </Text>
-      </View>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          • 
-        </Text>
-        <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "textDecorationLine": "line-through",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          {
-                            "backgroundColor": "transparent",
-                            "flexShrink": 1,
-                            "fontFamily": "Inter",
-                            "fontVariant": [
-                              "tabular-nums",
-                            ],
-                            "fontWeight": "400",
-                            "textAlign": "left",
-                          }
-                        }
-                      >
-                        <Text
-                          accessibilityLabel="bold italic strikethrough"
-                          style={
-                            [
-                              {
-                                "flexShrink": 1,
-                                "fontSize": 16,
-                                "lineHeight": 22,
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                              [
-                                {
-                                  "fontStyle": "italic",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "700",
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "textDecorationLine": "line-through",
-                                },
-                              ],
-                            ]
-                          }
-                        >
-                          bold italic strikethrough
-                        </Text>
-                      </Text>
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Mentions should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View>
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9B1325",
-                },
-              ]
-            }
-          >
-            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,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#8E6300",
-                },
-              ]
-            }
-          >
-            name1
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "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,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#974809",
-                },
-              ]
-            }
-          >
-            here
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            @unknown
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#8E6300",
-                },
-              ]
-            }
-          >
-            team
-          </Text>
-        </Text>
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9B1325",
-                },
-              ]
-            }
-          >
-            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,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#8E6300",
-                },
-              ]
-            }
-          >
-            Name
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "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,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#974809",
-                },
-              ]
-            }
-          >
-            here
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "lineHeight": 22,
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            @unknown
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#8E6300",
-                },
-              ]
-            }
-          >
-            team
-          </Text>
-        </Text>
-      </Text>
-    </View>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: MentionsWithFormatting should match snapshot 1`] = `
-<RCTScrollView
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View>
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Normal: "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Normal: 
-          </Text>
-          <Text
-            onPress={[Function]}
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#9B1325",
-                },
-              ]
-            }
-          >
-            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,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#8E6300",
-                },
-              ]
-            }
-          >
-            name1
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              [
-                {
-                  "backgroundColor": "transparent",
-                  "fontFamily": "Inter",
-                  "fontSize": 16,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "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,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "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,
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "600",
-                  "textAlign": "left",
-                },
-                {
-                  "color": "#095AD2",
-                },
-              ]
-            }
-          >
-            test-channel
-          </Text>
-        </Text>
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Bold: "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Bold: 
-          </Text>
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#9B1325",
-                    },
-                  ]
-                }
-              >
-                rocket.cat
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#8E6300",
-                    },
-                  ]
-                }
-              >
-                name1
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#974809",
-                    },
-                  ]
-                }
-              >
-                all
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#974809",
-                    },
-                  ]
-                }
-              >
-                here
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "700",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-              >
-                test-channel
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Italic: "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Italic: 
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                    {
-                      "color": "#9B1325",
-                    },
-                  ]
-                }
-              >
-                rocket.cat
-              </Text>
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                    {
-                      "color": "#8E6300",
-                    },
-                  ]
-                }
-              >
-                name1
-              </Text>
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                    {
-                      "color": "#974809",
-                    },
-                  ]
-                }
-              >
-                all
-              </Text>
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                    {
-                      "color": "#974809",
-                    },
-                  ]
-                }
-              >
-                here
-              </Text>
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-              >
-                test-channel
-              </Text>
-              <Text
-                accessibilityLabel=" "
-                style={
-                  [
-                    {
-                      "flexShrink": 1,
-                      "fontSize": 16,
-                      "lineHeight": 22,
-                    },
-                    {
-                      "color": "#2F343D",
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ]
-                }
-              >
-                 
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Strikethrough: "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Strikethrough: 
-          </Text>
-          <Text
-            style={
-              {
-                "textDecorationLine": "line-through",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                    {
-                      "color": "#9B1325",
-                    },
-                  ]
-                }
-              >
-                rocket.cat
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "textDecorationLine": "line-through",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                    {
-                      "color": "#8E6300",
-                    },
-                  ]
-                }
-              >
-                name1
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "textDecorationLine": "line-through",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                    {
-                      "color": "#974809",
-                    },
-                  ]
-                }
-              >
-                all
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "textDecorationLine": "line-through",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                    {
-                      "color": "#974809",
-                    },
-                  ]
-                }
-              >
-                here
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "textDecorationLine": "line-through",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                onPress={[Function]}
-                style={
-                  [
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontSize": 16,
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "600",
-                      "textAlign": "left",
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ]
-                }
-              >
-                test-channel
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </View>
-    <View
-      style={
-        {
-          "gap": 2,
-        }
-      }
-    >
-      <Text
-        style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 16,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "lineHeight": 22,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "flexShrink": 1,
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "400",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            accessibilityLabel="Italic + Bold + Strikethrough: "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-            Italic + Bold + Strikethrough: 
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "textDecorationLine": "line-through",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        onPress={[Function]}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            [
-                              {
-                                "fontStyle": "italic",
-                              },
-                              {
-                                "textDecorationLine": "line-through",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ],
-                            {
-                              "color": "#9B1325",
-                            },
-                          ]
-                        }
-                      >
-                        rocket.cat
-                      </Text>
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "textDecorationLine": "line-through",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        onPress={[Function]}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            [
-                              {
-                                "fontStyle": "italic",
-                              },
-                              {
-                                "textDecorationLine": "line-through",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ],
-                            {
-                              "color": "#8E6300",
-                            },
-                          ]
-                        }
-                      >
-                        name1
-                      </Text>
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "textDecorationLine": "line-through",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            [
-                              {
-                                "fontStyle": "italic",
-                              },
-                              {
-                                "textDecorationLine": "line-through",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ],
-                            {
-                              "color": "#974809",
-                            },
-                          ]
-                        }
-                      >
-                        all
-                      </Text>
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "textDecorationLine": "line-through",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            [
-                              {
-                                "fontStyle": "italic",
-                              },
-                              {
-                                "textDecorationLine": "line-through",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ],
-                            {
-                              "color": "#974809",
-                            },
-                          ]
-                        }
-                      >
-                        here
-                      </Text>
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-          <Text
-            accessibilityLabel=" "
-            style={
-              [
-                {
-                  "flexShrink": 1,
-                  "fontSize": 16,
-                  "lineHeight": 22,
-                },
-                {
-                  "color": "#2F343D",
-                },
-              ]
-            }
-          >
-             
-          </Text>
-          <Text
-            style={
-              {
-                "fontStyle": "italic",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "backgroundColor": "transparent",
-                  "flexShrink": 1,
-                  "fontFamily": "Inter",
-                  "fontVariant": [
-                    "tabular-nums",
-                  ],
-                  "fontWeight": "400",
-                  "textAlign": "left",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "textDecorationLine": "line-through",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "backgroundColor": "transparent",
-                      "flexShrink": 1,
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "400",
-                      "textAlign": "left",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "700",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        onPress={[Function]}
-                        style={
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontSize": 16,
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "600",
-                              "textAlign": "left",
-                            },
-                            [
-                              {
-                                "fontStyle": "italic",
-                              },
-                              {
-                                "textDecorationLine": "line-through",
-                              },
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "700",
-                                "textAlign": "left",
-                              },
-                            ],
-                            {
-                              "color": "#095AD2",
-                            },
-                          ]
-                        }
-                      >
-                        test-channel
-                      </Text>
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </View>
-  </View>
-</RCTScrollView>
-`;
-
-exports[`Story Snapshots: Preview should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <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,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "lineHeight": 22,
-          "textAlign": "left",
-        },
-        {
-          "color": "#2F343D",
-          "lineHeight": undefined,
-        },
-      ]
-    }
-    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>
-  <Text
-    accessibilityLabel="a b c d e"
-    numberOfLines={1}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "lineHeight": 22,
-          "textAlign": "left",
-        },
-        {
-          "color": "#2F343D",
-          "lineHeight": undefined,
-        },
-      ]
-    }
-    testID="markdown-preview-a b c d e"
-  >
-    a b c d e
-  </Text>
-  <Text
-    accessibilityLabel="a b c"
-    numberOfLines={1}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "lineHeight": 22,
-          "textAlign": "left",
-        },
-        {
-          "color": "#2F343D",
-          "lineHeight": undefined,
-        },
-      ]
-    }
-    testID="markdown-preview-a b c"
-  >
-    a b c
-  </Text>
-  <Text
-    accessibilityLabel="@rocket.cat @name1 @all @here @unknown #general #unknown"
-    numberOfLines={1}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "lineHeight": 22,
-          "textAlign": "left",
-        },
-        {
-          "color": "#2F343D",
-          "lineHeight": undefined,
-        },
-      ]
-    }
-    testID="markdown-preview-@rocket.cat @name1 @all @here @unknown #general #unknown"
-  >
-    @rocket.cat @name1 @all @here @unknown #general #unknown
-  </Text>
-  <Text
-    accessibilityLabel="Testing: 😃 👍️ :marioparty:"
-    numberOfLines={1}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "lineHeight": 22,
-          "textAlign": "left",
-        },
-        {
-          "color": "#2F343D",
-          "lineHeight": undefined,
-        },
-      ]
-    }
-    testID="markdown-preview-Testing: 😃 👍️ :marioparty:"
-  >
-    Testing: 😃 👍️ :marioparty:
-  </Text>
-  <Text
-    accessibilityLabel="Fallback from new md to old"
-    numberOfLines={1}
-    style={
-      [
-        {
-          "backgroundColor": "transparent",
-          "fontFamily": "Inter",
-          "fontSize": 16,
-          "fontVariant": [
-            "tabular-nums",
-          ],
-          "fontWeight": "400",
-          "lineHeight": 22,
-          "textAlign": "left",
-        },
-        {
-          "color": "#2F343D",
-          "lineHeight": undefined,
-        },
-      ]
-    }
-    testID="markdown-preview-Fallback from new md to old"
-  >
-    Fallback from new md to old
-  </Text>
-</View>
-`;
-
-exports[`Story Snapshots: Text should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="This is "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          This is 
-        </Text>
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Rocket.Chat"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "color": "#095AD2",
-                  },
-                ]
-              }
-            >
-              Rocket.Chat
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "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={
-            [
-              {
-                "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>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="a"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          a
-        </Text>
-      </Text>
-    </Text>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="b"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          b
-        </Text>
-      </Text>
-    </Text>
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="c"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          c
-        </Text>
-      </Text>
-    </Text>
-    <View
-      style={
-        {
-          "height": 8,
-        }
-      }
-    />
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="d"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          d
-        </Text>
-      </Text>
-    </Text>
-    <View
-      style={
-        {
-          "height": 8,
-        }
-      }
-    />
-    <View
-      style={
-        {
-          "height": 8,
-        }
-      }
-    />
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="e"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          e
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="a       b                                                                             c"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          a       b                                                                             c
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Emphasis: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Emphasis: 
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="bold"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "backgroundColor": "transparent",
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "700",
-                    "textAlign": "left",
-                  },
-                ]
-              }
-            >
-              bold
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "fontStyle": "italic",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="italic"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "fontStyle": "italic",
-                  },
-                ]
-              }
-            >
-              italic
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "textDecorationLine": "line-through",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="strikethrough"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  {
-                    "textDecorationLine": "line-through",
-                  },
-                ]
-              }
-            >
-              strikethrough
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="bold with italic"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                        {
-                          "fontStyle": "italic",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  bold with italic
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "textDecorationLine": "line-through",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="bold with strike"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                        {
-                          "textDecorationLine": "line-through",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  bold with strike
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "textDecorationLine": "line-through",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityLabel="bold with italic and strike"
-                      style={
-                        [
-                          {
-                            "flexShrink": 1,
-                            "fontSize": 16,
-                            "lineHeight": 22,
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          [
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "700",
-                              "textAlign": "left",
-                            },
-                            {
-                              "fontStyle": "italic",
-                            },
-                            {
-                              "textDecorationLine": "line-through",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      bold with italic and strike
-                    </Text>
-                  </Text>
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "fontStyle": "italic",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "textDecorationLine": "line-through",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="italic with strike"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      [
-                        {
-                          "fontStyle": "italic",
-                        },
-                        {
-                          "textDecorationLine": "line-through",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  italic with strike
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</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,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "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",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="bold"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "color": "red",
-                      "fontSize": 10,
-                    },
-                    {
-                      "backgroundColor": "transparent",
-                      "fontFamily": "Inter",
-                      "fontVariant": [
-                        "tabular-nums",
-                      ],
-                      "fontWeight": "700",
-                      "textAlign": "left",
-                    },
-                  ],
-                ]
-              }
-            >
-              bold
-            </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={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="italic"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "color": "red",
-                      "fontSize": 10,
-                    },
-                    {
-                      "fontStyle": "italic",
-                    },
-                  ],
-                ]
-              }
-            >
-              italic
-            </Text>
-          </Text>
-        </Text>
-        <Text
-          accessibilityLabel=" "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-              {
-                "color": "red",
-                "fontSize": 10,
-              },
-            ]
-          }
-        >
-           
-        </Text>
-        <Text
-          style={
-            {
-              "textDecorationLine": "line-through",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="strikethrough"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "color": "red",
-                      "fontSize": 10,
-                    },
-                    {
-                      "textDecorationLine": "line-through",
-                    },
-                  ],
-                ]
-              }
-            >
-              strikethrough
-            </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",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="bold with italic"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      [
-                        {
-                          "color": "red",
-                          "fontSize": 10,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                        {
-                          "fontStyle": "italic",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  bold with italic
-                </Text>
-              </Text>
-            </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",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "textDecorationLine": "line-through",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="bold with strike"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      [
-                        {
-                          "color": "red",
-                          "fontSize": 10,
-                        },
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "700",
-                          "textAlign": "left",
-                        },
-                        {
-                          "textDecorationLine": "line-through",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  bold with strike
-                </Text>
-              </Text>
-            </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",
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "700",
-              "textAlign": "left",
-            }
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "fontStyle": "italic",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  style={
-                    {
-                      "textDecorationLine": "line-through",
-                    }
-                  }
-                >
-                  <Text
-                    style={
-                      {
-                        "backgroundColor": "transparent",
-                        "flexShrink": 1,
-                        "fontFamily": "Inter",
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      }
-                    }
-                  >
-                    <Text
-                      accessibilityLabel="bold with italic and strike"
-                      style={
-                        [
-                          {
-                            "flexShrink": 1,
-                            "fontSize": 16,
-                            "lineHeight": 22,
-                          },
-                          {
-                            "color": "#2F343D",
-                          },
-                          [
-                            {
-                              "color": "red",
-                              "fontSize": 10,
-                            },
-                            {
-                              "backgroundColor": "transparent",
-                              "fontFamily": "Inter",
-                              "fontVariant": [
-                                "tabular-nums",
-                              ],
-                              "fontWeight": "700",
-                              "textAlign": "left",
-                            },
-                            {
-                              "fontStyle": "italic",
-                            },
-                            {
-                              "textDecorationLine": "line-through",
-                            },
-                          ],
-                        ]
-                      }
-                    >
-                      bold with italic and strike
-                    </Text>
-                  </Text>
-                </Text>
-              </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={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              style={
-                {
-                  "textDecorationLine": "line-through",
-                }
-              }
-            >
-              <Text
-                style={
-                  {
-                    "backgroundColor": "transparent",
-                    "flexShrink": 1,
-                    "fontFamily": "Inter",
-                    "fontVariant": [
-                      "tabular-nums",
-                    ],
-                    "fontWeight": "400",
-                    "textAlign": "left",
-                  }
-                }
-              >
-                <Text
-                  accessibilityLabel="italic with strike"
-                  style={
-                    [
-                      {
-                        "flexShrink": 1,
-                        "fontSize": 16,
-                        "lineHeight": 22,
-                      },
-                      {
-                        "color": "#2F343D",
-                      },
-                      [
-                        {
-                          "color": "red",
-                          "fontSize": 10,
-                        },
-                        {
-                          "fontStyle": "italic",
-                        },
-                        {
-                          "textDecorationLine": "line-through",
-                        },
-                      ],
-                    ]
-                  }
-                >
-                  italic with strike
-                </Text>
-              </Text>
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "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,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "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,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          onLongPress={[Function]}
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              },
-              {
-                "color": "red",
-                "fontSize": 10,
-              },
-              {
-                "color": "#095AD2",
-              },
-            ]
-          }
-        >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Markdown link"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                  [
-                    {
-                      "color": "red",
-                      "fontSize": 10,
-                    },
-                    {
-                      "color": "#095AD2",
-                    },
-                  ],
-                ]
-              }
-            >
-              Markdown link
-            </Text>
-          </Text>
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
-
-exports[`Story Snapshots: Timestamp should match snapshot 1`] = `
-<View
-  style={
-    {
-      "backgroundColor": "#FFFFFF",
-      "marginHorizontal": 15,
-      "marginVertical": 50,
-    }
-  }
->
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="Unix timestamp formats"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          Unix timestamp formats
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="t - Short time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          t - Short time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           12:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="T - Long time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          T - Long time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           12:00:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="d - Short date: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          d - Short date: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           01/01/2025 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="D - Long date: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          D - Long date: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           Wednesday, Jan 01, 2025 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="f - Short date/time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          f - Short date/time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           Wednesday, Jan 01, 2025 12:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="F - Long date/time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          F - Long date/time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           Wednesday, Jan 01, 2025 12:00:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="R - Relative time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          R - Relative time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           a year ago 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="ISO timestamp formats"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          ISO timestamp formats
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="t - Short time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          t - Short time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           12:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="T - Long time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          T - Long time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           12:00:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="d - Short date: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          d - Short date: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           01/01/2025 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="D - Long date: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          D - Long date: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           Wednesday, Jan 01, 2025 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="f - Short date/time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          f - Short date/time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           Wednesday, Jan 01, 2025 12:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="F - Long date/time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          F - Long date/time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           Wednesday, Jan 01, 2025 12:00:00 AM 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-  <View
-    style={
-      {
-        "gap": 2,
-      }
-    }
-  >
-    <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
-    >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="R - Relative time: "
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          R - Relative time: 
-        </Text>
-        <Text
-          onPress={[Function]}
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "textAlign": "left",
-              },
-              {
-                "backgroundColor": "#D7DBE0",
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-           a year ago 
-        </Text>
-      </Text>
-    </Text>
-  </View>
-</View>
-`;
diff --git a/app/containers/markdown/Markdown.test.tsx b/app/containers/markdown/__tests__/Markdown.test.tsx
similarity index 80%
rename from app/containers/markdown/Markdown.test.tsx
rename to app/containers/markdown/__tests__/Markdown.test.tsx
index d79cc26d786..b4176356f27 100644
--- a/app/containers/markdown/Markdown.test.tsx
+++ b/app/containers/markdown/__tests__/Markdown.test.tsx
@@ -1,5 +1,5 @@
 import { generateSnapshots } from '~/.rnstorybook/generateSnapshots';
-import * as stories from './Markdown.stories';
+import * as stories from '../Markdown.stories';
 
 beforeAll(() => {
 	jest.useFakeTimers({ now: new Date('2026-02-01T00:00:00.000Z').getTime() });
diff --git a/app/containers/markdown/__tests__/Markdown.textStyle.test.tsx b/app/containers/markdown/__tests__/Markdown.textStyle.test.tsx
new file mode 100644
index 00000000000..b197741f6a9
--- /dev/null
+++ b/app/containers/markdown/__tests__/Markdown.textStyle.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react-native';
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
+
+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('serializes mentions, hashtags and links into scheme-encoded markdown and propagates textStyle', () => {
+		const onLinkPress = jest.fn();
+		const textStyle = { fontSize: 17 };
+
+		const { UNSAFE_getByType } = 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 markdownText = UNSAFE_getByType(EnrichedMarkdownText);
+
+		expect(markdownText.props.markdown).toContain('[my link](<https://rocket.chat>)');
+		expect(markdownText.props.markdown).toContain('[**@rocket\\.cat**](<user://u1>)');
+		expect(markdownText.props.markdown).toContain('[**\\#general**](<channel://r1>)');
+		expect(markdownText.props.containerStyle).toEqual(textStyle);
+
+		markdownText.props.onLinkPress({ url: 'https://rocket.chat' });
+
+		expect(onLinkPress).toHaveBeenCalledWith('https://rocket.chat');
+	});
+});
diff --git a/app/containers/markdown/__tests__/__snapshots__/Markdown.test.tsx.snap b/app/containers/markdown/__tests__/__snapshots__/Markdown.test.tsx.snap
new file mode 100644
index 00000000000..bf8f731b18c
--- /dev/null
+++ b/app/containers/markdown/__tests__/__snapshots__/Markdown.test.tsx.snap
@@ -0,0 +1,1229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="This is block quote"
+    >
+      &gt; This is block quote
+    </Text>
+    <Text
+      accessibilityLabel="this is a normal line"
+    >
+      this is a normal line
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Code should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="This is inline code"
+    >
+      This is \`inline code\`
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Inline code has back-ticks around it."
+    >
+      Inline \`code\` has \`back-ticks around\` it\\.
+    </Text>
+    <Text
+      accessibilityLabel="Code block"
+    >
+      \`\`\`
+Code block
+\`\`\`
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Emoji should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Unicode: 😃😇👍"
+    >
+      Unicode: 😃😇👍
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Shortnames: 😂 👍️"
+    >
+      Shortnames: 😂 👍️
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Custom emojis: :react_rocket: :nyan_rocket: :marioparty:"
+    >
+      Custom emojis: ⁠![](https://open.rocket.chat/emoji-custom/react_rocket.png) ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png) ⁠![](https://open.rocket.chat/emoji-custom/marioparty.gif)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="😃 👍️ :marioparty:"
+    >
+      😃👍️⁠![](https://open.rocket.chat/emoji-custom/marioparty.gif)
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Hashtag should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="test-channel #unknown"
+    >
+      [**test\\-channel**](&lt;channel://123&gt;) \\#unknown
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Headers should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Header 1"
+    >
+      # Header 1
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Header 2"
+    >
+      ## Header 2
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Header 3"
+    >
+      ### Header 3
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Header 4"
+    >
+      #### Header 4
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: HeadersWithFormatting should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="H1 bold italic strike code 🚀 rocket.cat test-channel https://rocket.chat"
+    >
+      # H1 **bold** _italic_ ~~strike~~ \`code\` 🚀 [**rocket\\.cat**](&lt;user://random?me=1&gt;) [**test\\-channel**](&lt;channel://123&gt;) [https://rocket\\.chat](&lt;https://rocket.chat&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="H2 bold italic strike code 🚀 rocket.cat test-channel https://rocket.chat"
+    >
+      ## H2 **bold** _italic_ ~~strike~~ \`code\` 🚀 [**rocket\\.cat**](&lt;user://random?me=1&gt;) [**test\\-channel**](&lt;channel://123&gt;) [https://rocket\\.chat](&lt;https://rocket.chat&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="H3 bold italic strike code 🚀 rocket.cat test-channel https://rocket.chat"
+    >
+      ### H3 **bold** _italic_ ~~strike~~ \`code\` 🚀 [**rocket\\.cat**](&lt;user://random?me=1&gt;) [**test\\-channel**](&lt;channel://123&gt;) [https://rocket\\.chat](&lt;https://rocket.chat&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="H4 bold italic strike code 🚀 rocket.cat test-channel https://rocket.chat"
+    >
+      #### H4 **bold** _italic_ ~~strike~~ \`code\` 🚀 [**rocket\\.cat**](&lt;user://random?me=1&gt;) [**test\\-channel**](&lt;channel://123&gt;) [https://rocket\\.chat](&lt;https://rocket.chat&gt;)
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Image should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel=""
+    >
+      ![](&lt;https://play.google.com/intl/en_us/badges/images/badge_new.png&gt;)
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Links should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Markdown link: [description](url)"
+    >
+      [Markdown link](&lt;https://rocket.chat&gt;): \`[description](url)\`
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Formatted Link: <url|description>"
+    >
+      [Formatted Link](&lt;https://rocket.chat&gt;): \`&lt;url|description&gt;\`
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Markdown link and the text with default style"
+    >
+      [Markdown link](&lt;https://rocket.chat&gt;) and the text with default style
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Markdown link and the text continues on the next line"
+    >
+      [Markdown link](&lt;https://rocket.chat&gt;) and the text continues on the next line
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Lists should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Open Source
+Rocket.Chat"
+    >
+      - Open Source
+- [Rocket\\.Chat](&lt;//Rocket.Chat&gt;)
+    </Text>
+    <Text
+      accessibilityLabel="  - nodejs"
+    >
+        \\- nodejs
+    </Text>
+    <Text
+      accessibilityLabel="  - ReactNative"
+    >
+        \\- ReactNative
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Open Source
+Rocket.Chat"
+    >
+      1. Open Source
+2. [Rocket\\.Chat](&lt;//Rocket.Chat&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="bold 
+italic 
+strikethrough 
+bold italic 
+bold strikethrough 
+italic strikethrough 
+bold italic strikethrough"
+    >
+      - **bold** 
+- _italic_ 
+- ~~strikethrough~~ 
+- _**bold italic**_ 
+- **~~bold strikethrough~~** 
+- _~~italic strikethrough~~_ 
+- _**~~bold italic strikethrough~~**_
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Mentions should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View>
+    <View
+      style={
+        {
+          "gap": 2,
+        }
+      }
+    >
+      <Text
+        accessibilityLabel="rocket.cat name1 all here @unknown team"
+      >
+        [**rocket\\.cat**](&lt;user://random?me=1&gt;) [**name1**](&lt;user://random2&gt;) [**all**](&lt;user://all&gt;) [**here**](&lt;user://here&gt;) @unknown [**team**](&lt;user://team?team=1&gt;)
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "gap": 2,
+        }
+      }
+    >
+      <Text
+        accessibilityLabel="Rocket Cat Name all here @unknown team"
+      >
+        [**Rocket Cat**](&lt;user://random?me=1&gt;) [**Name**](&lt;user://random2&gt;) [**all**](&lt;user://all&gt;) [**here**](&lt;user://here&gt;) @unknown [**team**](&lt;user://team?team=1&gt;)
+      </Text>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: MentionsWithFormatting should match snapshot 1`] = `
+<RCTScrollView
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View>
+    <View
+      style={
+        {
+          "gap": 2,
+        }
+      }
+    >
+      <Text
+        accessibilityLabel="Normal: rocket.cat name1 all here test-channel"
+      >
+        Normal: [**rocket\\.cat**](&lt;user://random?me=1&gt;) [**name1**](&lt;user://random2&gt;) [**all**](&lt;user://all&gt;) [**here**](&lt;user://here&gt;) [**test\\-channel**](&lt;channel://123&gt;)
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "gap": 2,
+        }
+      }
+    >
+      <Text
+        accessibilityLabel="Bold: rocket.cat name1 all here test-channel"
+      >
+        Bold: **[**rocket\\.cat**](&lt;user://random?me=1&gt;)** **[**name1**](&lt;user://random2&gt;)** **[**all**](&lt;user://all&gt;)** **[**here**](&lt;user://here&gt;)** **[**test\\-channel**](&lt;channel://123&gt;)**
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "gap": 2,
+        }
+      }
+    >
+      <Text
+        accessibilityLabel="Italic:  rocket.cat   name1   all   here   test-channel "
+      >
+        Italic: _ [**rocket\\.cat**](&lt;user://random?me=1&gt;) _ _ [**name1**](&lt;user://random2&gt;) _ _ [**all**](&lt;user://all&gt;) _ _ [**here**](&lt;user://here&gt;) _ _ [**test\\-channel**](&lt;channel://123&gt;) _
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "gap": 2,
+        }
+      }
+    >
+      <Text
+        accessibilityLabel="Strikethrough: rocket.cat name1 all here test-channel"
+      >
+        Strikethrough: ~~[**rocket\\.cat**](&lt;user://random?me=1&gt;)~~ ~~[**name1**](&lt;user://random2&gt;)~~ ~~[**all**](&lt;user://all&gt;)~~ ~~[**here**](&lt;user://here&gt;)~~ ~~[**test\\-channel**](&lt;channel://123&gt;)~~
+      </Text>
+    </View>
+    <View
+      style={
+        {
+          "gap": 2,
+        }
+      }
+    >
+      <Text
+        accessibilityLabel="Italic + Bold + Strikethrough: rocket.cat name1 all here test-channel"
+      >
+        Italic \\+ Bold \\+ Strikethrough: _~~**[**rocket\\.cat**](&lt;user://random?me=1&gt;)**~~_ _~~**[**name1**](&lt;user://random2&gt;)**~~_ _~~**[**all**](&lt;user://all&gt;)**~~_ _~~**[**here**](&lt;user://here&gt;)**~~_ _~~**[**test\\-channel**](&lt;channel://123&gt;)**~~_
+      </Text>
+    </View>
+  </View>
+</RCTScrollView>
+`;
+
+exports[`Story Snapshots: Preview should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <Text
+    accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+    accessibilityRole="text"
+    accessible={true}
+    numberOfLines={1}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "400",
+          "lineHeight": 22,
+          "textAlign": "left",
+        },
+        {
+          "color": "#2F343D",
+          "lineHeight": undefined,
+        },
+      ]
+    }
+    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>
+  <Text
+    accessibilityLabel="a b c d e"
+    accessibilityRole="text"
+    accessible={true}
+    numberOfLines={1}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "400",
+          "lineHeight": 22,
+          "textAlign": "left",
+        },
+        {
+          "color": "#2F343D",
+          "lineHeight": undefined,
+        },
+      ]
+    }
+    testID="markdown-preview-a b c d e"
+  >
+    a b c d e
+  </Text>
+  <Text
+    accessibilityLabel="a b c"
+    accessibilityRole="text"
+    accessible={true}
+    numberOfLines={1}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "400",
+          "lineHeight": 22,
+          "textAlign": "left",
+        },
+        {
+          "color": "#2F343D",
+          "lineHeight": undefined,
+        },
+      ]
+    }
+    testID="markdown-preview-a b c"
+  >
+    a b c
+  </Text>
+  <Text
+    accessibilityLabel="@rocket.cat @name1 @all @here @unknown #general #unknown"
+    accessibilityRole="text"
+    accessible={true}
+    numberOfLines={1}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "400",
+          "lineHeight": 22,
+          "textAlign": "left",
+        },
+        {
+          "color": "#2F343D",
+          "lineHeight": undefined,
+        },
+      ]
+    }
+    testID="markdown-preview-@rocket.cat @name1 @all @here @unknown #general #unknown"
+  >
+    @rocket.cat @name1 @all @here @unknown #general #unknown
+  </Text>
+  <Text
+    accessibilityLabel="Testing: 😃 👍️ :marioparty:"
+    accessibilityRole="text"
+    accessible={true}
+    numberOfLines={1}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "400",
+          "lineHeight": 22,
+          "textAlign": "left",
+        },
+        {
+          "color": "#2F343D",
+          "lineHeight": undefined,
+        },
+      ]
+    }
+    testID="markdown-preview-Testing: 😃 👍️ :marioparty:"
+  >
+    Testing: 😃 👍️ :marioparty:
+  </Text>
+  <Text
+    accessibilityLabel="Fallback from new md to old"
+    accessibilityRole="text"
+    accessible={true}
+    numberOfLines={1}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "fontFamily": "Inter",
+          "fontSize": 16,
+          "fontVariant": [
+            "tabular-nums",
+          ],
+          "fontWeight": "400",
+          "lineHeight": 22,
+          "textAlign": "left",
+        },
+        {
+          "color": "#2F343D",
+          "lineHeight": undefined,
+        },
+      ]
+    }
+    testID="markdown-preview-Fallback from new md to old"
+  >
+    Fallback from new md to old
+  </Text>
+</View>
+`;
+
+exports[`Story Snapshots: Text should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="This is Rocket.Chat"
+    >
+      This is [Rocket\\.Chat](&lt;//Rocket.Chat&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="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={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="a"
+    >
+      a
+    </Text>
+    <Text
+      accessibilityLabel="b"
+    >
+      b
+    </Text>
+    <Text
+      accessibilityLabel="c"
+    >
+      c
+    </Text>
+    <View
+      style={
+        {
+          "height": 8,
+        }
+      }
+    />
+    <Text
+      accessibilityLabel="d"
+    >
+      d
+    </Text>
+    <View
+      style={
+        {
+          "height": 8,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "height": 8,
+        }
+      }
+    />
+    <Text
+      accessibilityLabel="e"
+    >
+      e
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="a       b                                                                             c"
+    >
+      a       b                                                                             c
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Emphasis: bold italic strikethrough bold with italic bold with strike bold with italic and strike italic with strike"
+    >
+      Emphasis: **bold** _italic_ ~~strikethrough~~ **_bold with italic_** **~~bold with strike~~** **_~~bold with italic and strike~~_** _~~italic with strike~~_
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: TextStyle should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Emphasis: bold italic strikethrough bold with italic bold with strike bold with italic and strike italic with strike"
+      style={
+        {
+          "color": "red",
+          "fontSize": 10,
+        }
+      }
+    >
+      Emphasis: **bold** _italic_ ~~strikethrough~~ **_bold with italic_** **~~bold with strike~~** **_~~bold with italic and strike~~_** _~~italic with strike~~_
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="rocket.cat name1 all here @unknown team"
+      style={
+        {
+          "color": "red",
+          "fontSize": 10,
+        }
+      }
+    >
+      [**rocket\\.cat**](&lt;user://random?me=1&gt;) [**name1**](&lt;user://random2&gt;) [**all**](&lt;user://all&gt;) [**here**](&lt;user://here&gt;) @unknown [**team**](&lt;user://team?team=1&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="test-channel #unknown"
+      style={
+        {
+          "color": "red",
+          "fontSize": 10,
+        }
+      }
+    >
+      [**test\\-channel**](&lt;channel://123&gt;) \\#unknown
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="This is block quote"
+      style={
+        {
+          "color": "red",
+          "fontSize": 10,
+        }
+      }
+    >
+      &gt; This is block quote
+    </Text>
+    <Text
+      accessibilityLabel="this is a normal line"
+      style={
+        {
+          "color": "red",
+          "fontSize": 10,
+        }
+      }
+    >
+      this is a normal line
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Markdown link"
+      style={
+        {
+          "color": "red",
+          "fontSize": 10,
+        }
+      }
+    >
+      [Markdown link](&lt;https://rocket.chat&gt;)
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`Story Snapshots: Timestamp should match snapshot 1`] = `
+<View
+  style={
+    {
+      "backgroundColor": "#FFFFFF",
+      "marginHorizontal": 15,
+      "marginVertical": 50,
+    }
+  }
+>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="Unix timestamp formats"
+    >
+      Unix timestamp formats
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="t - Short time: 12:00 AM"
+    >
+      t \\- Short time: [ 12:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="T - Long time: 12:00:00 AM"
+    >
+      T \\- Long time: [ 12:00:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="d - Short date: 01/01/2025"
+    >
+      d \\- Short date: [ 01/01/2025 ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="D - Long date: Wednesday, Jan 01, 2025"
+    >
+      D \\- Long date: [ Wednesday, Jan 01, 2025 ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="f - Short date/time: Wednesday, Jan 01, 2025 12:00 AM"
+    >
+      f \\- Short date/time: [ Wednesday, Jan 01, 2025 12:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="F - Long date/time: Wednesday, Jan 01, 2025 12:00:00 AM"
+    >
+      F \\- Long date/time: [ Wednesday, Jan 01, 2025 12:00:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="R - Relative time: a year ago"
+    >
+      R \\- Relative time: [ a year ago ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="ISO timestamp formats"
+    >
+      ISO timestamp formats
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="t - Short time: 12:00 AM"
+    >
+      t \\- Short time: [ 12:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="T - Long time: 12:00:00 AM"
+    >
+      T \\- Long time: [ 12:00:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="d - Short date: 01/01/2025"
+    >
+      d \\- Short date: [ 01/01/2025 ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="D - Long date: Wednesday, Jan 01, 2025"
+    >
+      D \\- Long date: [ Wednesday, Jan 01, 2025 ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="f - Short date/time: Wednesday, Jan 01, 2025 12:00 AM"
+    >
+      f \\- Short date/time: [ Wednesday, Jan 01, 2025 12:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="F - Long date/time: Wednesday, Jan 01, 2025 12:00:00 AM"
+    >
+      F \\- Long date/time: [ Wednesday, Jan 01, 2025 12:00:00 AM ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+  <View
+    style={
+      {
+        "gap": 2,
+      }
+    }
+  >
+    <Text
+      accessibilityLabel="R - Relative time: a year ago"
+    >
+      R \\- Relative time: [ a year ago ](&lt;timestamp://1735689600&gt;)
+    </Text>
+  </View>
+</View>
+`;
diff --git a/app/containers/markdown/__tests__/buildMarkdownStyle.test.ts b/app/containers/markdown/__tests__/buildMarkdownStyle.test.ts
new file mode 100644
index 00000000000..3e69d2947f5
--- /dev/null
+++ b/app/containers/markdown/__tests__/buildMarkdownStyle.test.ts
@@ -0,0 +1,25 @@
+import { buildMarkdownStyle } from '../buildMarkdownStyle';
+import { colors as lightColors } from '~/lib/constants/colors';
+
+const colors = lightColors.light;
+
+describe('buildMarkdownStyle', () => {
+	it('sizes images to big-emoji size for an emoji-only message', () => {
+		const style = buildMarkdownStyle(colors, true, 1);
+		expect(style.image?.maxHeight).toBe(30);
+		expect(style.inlineImage?.size).toBe(30);
+	});
+
+	it('caps a block image to the regular attachment size otherwise', () => {
+		const style = buildMarkdownStyle(colors, false, 1);
+		expect(style.image?.maxHeight).toBe(300);
+		expect(style.inlineImage?.size).toBe(19);
+	});
+
+	it('scales emoji sizes with the font scale', () => {
+		expect(buildMarkdownStyle(colors, true, 2).inlineImage?.size).toBe(60);
+		expect(buildMarkdownStyle(colors, true, 2).image?.maxHeight).toBe(60);
+		expect(buildMarkdownStyle(colors, false, 2).inlineImage?.size).toBe(38);
+		expect(buildMarkdownStyle(colors, false, 2).image?.maxHeight).toBe(300);
+	});
+});
diff --git a/app/containers/markdown/__tests__/katex.test.ts b/app/containers/markdown/__tests__/katex.test.ts
new file mode 100644
index 00000000000..f7a86532e59
--- /dev/null
+++ b/app/containers/markdown/__tests__/katex.test.ts
@@ -0,0 +1,94 @@
+import { parse } from '@rocket.chat/message-parser';
+import { renderHook } from '@testing-library/react-native';
+
+import { buildRenderSegments, type ISerializeContext } from '../serialize';
+import { useParseOptions } from '../hooks/useParseOptions';
+import { useSetting } from '~/lib/hooks/useSetting';
+
+jest.mock('~/lib/hooks/useSetting', () => ({
+	useSetting: jest.fn()
+}));
+
+const context: ISerializeContext = {
+	mentions: [],
+	channels: [],
+	useRealName: false,
+	username: '',
+	mentionsWithAtSymbol: false,
+	roomsWithHashTagSymbol: false,
+	getCustomEmoji: () => null,
+	baseUrl: 'https://open.rocket.chat',
+	convertAsciiEmoji: true,
+	formatShortnameToUnicode: shortname => shortname
+};
+
+const segmentsFor = (msg: string, katexEnabled: boolean, dollarSyntax: boolean, parenthesisSyntax: boolean) => {
+	const settings: Record<string, boolean> = {
+		Katex_Enabled: katexEnabled,
+		Katex_Dollar_Syntax: dollarSyntax,
+		Katex_Parenthesis_Syntax: parenthesisSyntax
+	};
+	jest.mocked(useSetting).mockImplementation(key => settings[key]);
+	const { result } = renderHook(() => useParseOptions());
+	return buildRenderSegments(parse(msg, result.current), context);
+};
+
+describe('markdown katex', () => {
+	it('serializes inline dollar math as a latex math span when dollar syntax is enabled', () => {
+		expect(segmentsFor('Inline $x^2 + y^2 = z^2$ katex', true, true, false)).toEqual([
+			{ type: 'markdown', content: 'Inline $x^2 + y^2 = z^2$ katex', accessibilityLabel: 'Inline x^2 + y^2 = z^2 katex' }
+		]);
+	});
+
+	it('escapes dollar signs as plain text when dollar syntax is disabled', () => {
+		expect(segmentsFor('Inline $x^2$ katex', true, false, true)).toEqual([
+			{ type: 'markdown', content: 'Inline \\$x\\^2\\$ katex', accessibilityLabel: 'Inline $x^2$ katex' }
+		]);
+	});
+
+	it('splits double dollar math into a native block math segment when dollar syntax is enabled', () => {
+		expect(segmentsFor('$$\\int_0^1 x\\,dx = \\frac{1}{2}$$', true, true, false)).toEqual([
+			{
+				type: 'markdown',
+				content: '$$\n\\int_0^1 x\\,dx = \\frac{1}{2}\n$$',
+				accessibilityLabel: '\\int_0^1 x\\,dx = \\frac{1}{2}'
+			}
+		]);
+	});
+
+	it('serializes bracket matrix math as a native block math segment when parenthesis syntax is enabled', () => {
+		const matrix = '\\frac{a}{b} + \\begin{pmatrix} 1 & 2 \\\\ 3 & 4 \\end{pmatrix}';
+		expect(segmentsFor(`\\[${matrix}\\]`, true, false, true)).toEqual([
+			{ type: 'markdown', content: `$$\n${matrix}\n$$`, accessibilityLabel: matrix }
+		]);
+	});
+
+	it('keeps mention prefixes when the symbol preferences are enabled', () => {
+		const tokens = parse('@all #general');
+		const mentionContext = {
+			...context,
+			channels: [{ _id: 'GENERAL', name: 'general' }],
+			mentionsWithAtSymbol: true,
+			roomsWithHashTagSymbol: true
+		};
+		expect(buildRenderSegments(tokens, mentionContext)).toEqual([
+			{
+				type: 'markdown',
+				content: '[**@all**](<user://all>) [**\\#general**](<channel://GENERAL>)',
+				accessibilityLabel: '@all #general'
+			}
+		]);
+	});
+
+	it('serializes parenthesis math as a latex math span when parenthesis syntax is enabled', () => {
+		expect(segmentsFor('Paren \\(a+b\\) inline', true, false, true)).toEqual([
+			{ type: 'markdown', content: 'Paren $a+b$ inline', accessibilityLabel: 'Paren a+b inline' }
+		]);
+	});
+
+	it('keeps math delimiters as plain text when katex is disabled', () => {
+		expect(segmentsFor('Paren \\(a+b\\) and $x$', false, true, true)).toEqual([
+			{ type: 'markdown', content: 'Paren \\\\\\(a\\+b\\\\\\) and \\$x\\$', accessibilityLabel: 'Paren \\(a+b\\) and $x$' }
+		]);
+	});
+});
diff --git a/app/containers/markdown/__tests__/serialize.test.ts b/app/containers/markdown/__tests__/serialize.test.ts
new file mode 100644
index 00000000000..1c74fd7cd1e
--- /dev/null
+++ b/app/containers/markdown/__tests__/serialize.test.ts
@@ -0,0 +1,126 @@
+import { parse } from '@rocket.chat/message-parser';
+
+import { buildRenderSegments, type ISerializeContext } from '../serialize';
+
+const baseContext: ISerializeContext = {
+	mentions: [],
+	channels: [],
+	useRealName: false,
+	username: '',
+	mentionsWithAtSymbol: false,
+	roomsWithHashTagSymbol: false,
+	getCustomEmoji: () => null,
+	baseUrl: 'https://open.rocket.chat',
+	convertAsciiEmoji: true,
+	formatShortnameToUnicode: shortname => shortname
+};
+
+const serialize = (msg: string, ctx: Partial<ISerializeContext> = {}) => {
+	const segments = buildRenderSegments(parse(msg), { ...baseContext, ...ctx });
+	return segments
+		.map(segment => {
+			if (segment.type === 'markdown') return segment.content;
+			return '';
+		})
+		.join('\n\n');
+};
+
+describe('markdown serialize', () => {
+	it('escapes plain text so literal punctuation is not reinterpreted as markdown', () => {
+		expect(serialize('a * b')).toBe('a \\* b');
+	});
+
+	it('escapes ampersands so text entities render literally', () => {
+		expect(serialize('a &lt; b &amp; c')).toBe('a \\&lt; b \\&amp; c');
+	});
+
+	it('serializes bold, italic and strike as CommonMark', () => {
+		expect(serialize('*bold* _italic_ ~strike~')).toBe('**bold** _italic_ ~~strike~~');
+	});
+
+	it('serializes a known user mention as a user scheme link', () => {
+		const result = serialize('@rocket.cat', {
+			mentions: [{ _id: 'u1', username: 'rocket.cat', name: 'Rocket Cat', type: 'user' }]
+		});
+		expect(result).toBe('[**rocket\\.cat**](<user://u1>)');
+	});
+
+	it('marks the mention itsMe with ?me=1', () => {
+		const result = serialize('@rocket.cat', {
+			username: 'rocket.cat',
+			mentions: [{ _id: 'u1', username: 'rocket.cat', name: 'Rocket Cat', type: 'user' }]
+		});
+		expect(result).toBe('[**rocket\\.cat**](<user://u1?me=1>)');
+	});
+
+	it('marks a team mention with ?team=1', () => {
+		const result = serialize('@design-team', {
+			mentions: [{ _id: 't1', name: 'design-team', type: 'team' }]
+		});
+		expect(result).toBe('[**design\\-team**](<user://t1?team=1>)');
+	});
+
+	it('renders an unknown user mention as plain text', () => {
+		expect(serialize('@unknown-user')).toBe('@unknown\\-user');
+	});
+
+	it('serializes a known channel mention as a channel scheme link', () => {
+		const result = serialize('#general', { channels: [{ _id: 'r1', name: 'general' }] });
+		expect(result).toBe('[**general**](<channel://r1>)');
+	});
+
+	it('renders an unknown channel mention as plain text', () => {
+		expect(serialize('#unknown-channel')).toBe('\\#unknown\\-channel');
+	});
+
+	it('keeps http(s) links unchanged', () => {
+		expect(serialize('[Rocket.Chat](https://rocket.chat)')).toBe('[Rocket\\.Chat](<https://rocket.chat>)');
+	});
+
+	it('serializes a timestamp as a timestamp scheme link', () => {
+		const result = serialize('<t:1735689600:d>');
+		expect(result).toContain('](<timestamp://1735689600>)');
+	});
+
+	describe('custom emoji', () => {
+		const getCustomEmoji: ISerializeContext['getCustomEmoji'] = name =>
+			name === 'marioparty' ? { name: 'marioparty', extension: 'gif' } : null;
+		const marioparty = '\u2060![](https://open.rocket.chat/emoji-custom/marioparty.gif)';
+
+		it('serializes a custom emoji as an image after a word joiner so it renders inline', () => {
+			expect(serialize(':marioparty:', { getCustomEmoji })).toBe(marioparty);
+		});
+
+		it('joins big emoji without separators', () => {
+			expect(serialize(':marioparty: :marioparty: :marioparty:', { getCustomEmoji })).toBe(marioparty.repeat(3));
+		});
+
+		it('joins custom and unicode big emoji without separators', () => {
+			expect(serialize(':marioparty: 😀', { getCustomEmoji })).toBe(`${marioparty}😀`);
+		});
+
+		it('keeps a custom emoji inline within a sentence', () => {
+			expect(serialize(':marioparty: hello :marioparty: world', { getCustomEmoji })).toBe(
+				`${marioparty} hello ${marioparty} world`
+			);
+		});
+	});
+
+	it('serializes an unordered list', () => {
+		expect(serialize('* one\n* two')).toBe('- one\n- two');
+	});
+
+	it('serializes a task list with checked state', () => {
+		expect(serialize('- [x] done\n- [ ] pending')).toBe('- [x] done\n- [ ] pending');
+	});
+
+	it('serializes a fenced code block', () => {
+		expect(serialize('```\nconst a = 1;\n```')).toBe('```\nconst a = 1;\n```');
+	});
+
+	it('splits a block-level KATEX AST node (as produced by the server-parsed md prop) into a native block math segment', () => {
+		const tokens: Parameters<typeof buildRenderSegments>[0] = [{ type: 'KATEX', value: 'x^2' }];
+		const segments = buildRenderSegments(tokens, baseContext);
+		expect(segments).toEqual([{ type: 'markdown', content: '$$\nx^2\n$$', accessibilityLabel: 'x^2' }]);
+	});
+});
diff --git a/app/containers/markdown/buildMarkdownStyle.ts b/app/containers/markdown/buildMarkdownStyle.ts
new file mode 100644
index 00000000000..17e0c50af7f
--- /dev/null
+++ b/app/containers/markdown/buildMarkdownStyle.ts
@@ -0,0 +1,64 @@
+import { Platform } from 'react-native';
+import { type MarkdownStyle } from 'react-native-enriched-markdown';
+
+import { type TColors } from '~/theme';
+import { CHANNEL_SCHEME, ME_QUERY, TEAM_QUERY, TIMESTAMP_SCHEME, USER_SCHEME } from './linkSchemes';
+
+const codeFontFamily = Platform.select({ ios: 'Courier New', android: 'monospace' });
+
+export const buildMarkdownStyle = (colors: TColors, isBigEmojiOnly: boolean, fontScale: number): MarkdownStyle => ({
+	paragraph: {
+		fontSize: isBigEmojiOnly ? 30 : 16,
+		lineHeight: isBigEmojiOnly ? 43 : 22,
+		color: colors.fontDefault
+	},
+	h1: { fontSize: 24, lineHeight: 30, fontWeight: 'bold', color: colors.fontDefault },
+	h2: { fontSize: 22, lineHeight: 28, fontWeight: 'bold', color: colors.fontDefault },
+	h3: { fontSize: 20, lineHeight: 26, fontWeight: '600', color: colors.fontDefault },
+	h4: { fontSize: 18, lineHeight: 24, fontWeight: '600', color: colors.fontDefault },
+	blockquote: {
+		borderColor: colors.strokeLight,
+		backgroundColor: colors.strokeLight,
+		borderWidth: 0,
+		padding: 4
+	},
+	list: {
+		color: colors.fontDefault
+	},
+	code: {
+		fontFamily: codeFontFamily,
+		color: colors.fontDefault,
+		backgroundColor: colors.surfaceNeutral,
+		borderColor: colors.strokeLight
+	},
+	codeBlock: {
+		fontFamily: codeFontFamily,
+		color: colors.fontDefault,
+		backgroundColor: colors.surfaceNeutral,
+		borderColor: colors.strokeLight,
+		borderWidth: 1,
+		borderRadius: 4,
+		padding: 4
+	},
+	link: {
+		color: colors.fontInfo
+	},
+	linkVariants: {
+		[`^${USER_SCHEME}(all|here)$`]: { color: colors.statusFontService, underline: false },
+		[`^${USER_SCHEME}[^?]+\\${ME_QUERY}$`]: { color: colors.statusFontDanger, underline: false },
+		[`^${USER_SCHEME}[^?]+\\${TEAM_QUERY}$`]: { color: colors.statusFontWarning, underline: false },
+		[`^${USER_SCHEME}`]: { color: colors.statusFontWarning, underline: false },
+		[`^${CHANNEL_SCHEME}`]: { color: colors.fontInfo, underline: false },
+		[`^${TIMESTAMP_SCHEME}`]: { color: colors.fontDefault, backgroundColor: colors.surfaceSelected }
+	},
+	image: {
+		maxHeight: isBigEmojiOnly ? 30 * fontScale : 300,
+		resizeMode: 'contain'
+	},
+	inlineImage: {
+		size: (isBigEmojiOnly ? 30 : 19) * fontScale
+	},
+	taskList: {
+		checkedColor: colors.fontDefault
+	}
+});
diff --git a/app/containers/markdown/components/Heading.tsx b/app/containers/markdown/components/Heading.tsx
deleted file mode 100644
index db818342ebb..00000000000
--- a/app/containers/markdown/components/Heading.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { type ReactElement } from 'react';
-import { Text } from 'react-native';
-import { type Heading as HeadingProps } from '@rocket.chat/message-parser';
-
-import styles from '../styles';
-import { useTheme } from '~/theme';
-import Inline from './Inline';
-import MarkdownContext, { useMarkdownContext } from '../contexts/MarkdownContext';
-
-interface IHeadingProps {
-	value: HeadingProps['value'];
-	level: HeadingProps['level'];
-}
-
-const Heading = ({ value, level }: IHeadingProps): ReactElement => {
-	const { colors } = useTheme();
-	const textStyle = styles[`heading${level}`];
-	const context = useMarkdownContext(textStyle);
-
-	return (
-		<Text style={[textStyle, { color: colors.fontDefault }]}>
-			<MarkdownContext.Provider value={context}>
-				<Inline value={value} />
-			</MarkdownContext.Provider>
-		</Text>
-	);
-};
-
-export default Heading;
diff --git a/app/containers/markdown/components/Image.tsx b/app/containers/markdown/components/Image.tsx
deleted file mode 100644
index c6d8b9eb037..00000000000
--- a/app/containers/markdown/components/Image.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { type Image as ImageProps } from '@rocket.chat/message-parser';
-import { Image as ExpoImage } from 'expo-image';
-
-import { useTheme } from '~/theme';
-import styles from '../styles';
-
-interface IImageProps {
-	value: ImageProps['value'];
-}
-
-const Image = ({ value }: IImageProps) => {
-	const { colors } = useTheme();
-	const { src } = value;
-
-	return (
-		<ExpoImage
-			style={[styles.inlineImage, { borderColor: colors.strokeLight }]}
-			source={{ uri: encodeURI(src.value) }}
-			contentFit='contain'
-		/>
-	);
-};
-
-export default Image;
diff --git a/app/containers/markdown/components/Inline.tsx b/app/containers/markdown/components/Inline.tsx
deleted file mode 100644
index fddf15eeb04..00000000000
--- a/app/containers/markdown/components/Inline.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { type ReactElement } from 'react';
-import { Text } from 'react-native';
-import { type Link as LinkProps, type Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
-
-import styles from '../styles';
-import { AtMention, Hashtag } from './mentions';
-import { Emoji } from './emoji';
-import { Bold, Italic, Link, Strike } from './inline/index';
-import Plain from './Plain';
-import InlineCode from './InlineCode';
-import Image from './Image';
-import Timestamp from './Timestamp';
-// import { InlineKaTeX, KaTeX } from './Katex';
-
-interface IParagraphProps {
-	value: ParagraphProps['value'];
-	forceTrim?: boolean;
-}
-
-const getInlineKey = (block: ParagraphProps['value'][number], index: number): string => `${block.type}-${index}`;
-
-const toLinkLabelValue = (label: LinkProps['value']['label']): ParagraphProps['value'] =>
-	Array.isArray(label) ? label : [label];
-
-const Inline = ({ value, forceTrim }: IParagraphProps): ReactElement | null => {
-	return (
-		<Text style={styles.inline}>
-			{value.map((block, index) => {
-				const key = getInlineKey(block, index);
-
-				// We are forcing trim when is a `[ ](https://https://open.rocket.chat/) plain_text`
-				// to clean the empty spaces
-				if (forceTrim) {
-					if (index === 0 && block.type === 'LINK') {
-						if (!Array.isArray(block.value.label)) {
-							block.value.label.value = block.value?.label?.value?.toString().trimLeft();
-						} else {
-							// @ts-ignore - we are forcing the value to be a string
-							block.value.label.value = block?.value?.label?.[0]?.value?.toString().trimLeft();
-						}
-					}
-					if (index === 1 && block.type !== 'LINK') {
-						block.value = block.value?.toString().trimLeft();
-					}
-				}
-
-				switch (block.type) {
-					case 'IMAGE':
-						return <Image key={key} value={block.value} />;
-					case 'PLAIN_TEXT':
-						return <Plain key={key} value={block.value} />;
-					case 'BOLD':
-						return (
-							<Bold key={key}>
-								<Inline value={block.value} />
-							</Bold>
-						);
-					case 'STRIKE':
-						return (
-							<Strike key={key}>
-								<Inline value={block.value} />
-							</Strike>
-						);
-					case 'ITALIC':
-						return (
-							<Italic key={key}>
-								<Inline value={block.value} />
-							</Italic>
-						);
-					case 'LINK':
-						return (
-							<Link key={key} value={block.value}>
-								<Inline value={toLinkLabelValue(block.value.label)} />
-							</Link>
-						);
-					case 'MENTION_USER':
-						return <AtMention key={key} mention={block.value.value} />;
-					case 'EMOJI':
-						return <Emoji key={key} block={block} index={index} />;
-					case 'MENTION_CHANNEL':
-						return <Hashtag key={key} hashtag={block.value.value} />;
-					case 'INLINE_CODE':
-						return <InlineCode key={key} value={block.value} />;
-					case 'INLINE_KATEX':
-						// return <InlineKaTeX value={block.value} />;
-						return <Text key={key}>{block.value}</Text>;
-					case 'TIMESTAMP':
-						return <Timestamp key={key} value={block.value} />;
-					default:
-						return null;
-				}
-			})}
-		</Text>
-	);
-};
-
-export default Inline;
diff --git a/app/containers/markdown/components/InlineCode.tsx b/app/containers/markdown/components/InlineCode.tsx
deleted file mode 100644
index 01a39f8df0e..00000000000
--- a/app/containers/markdown/components/InlineCode.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Text } from 'react-native';
-import { type InlineCode as InlineCodeProps } from '@rocket.chat/message-parser';
-
-import styles from '../styles';
-import { themes } from '~/lib/constants/colors';
-import { useTheme } from '~/theme';
-
-interface IInlineCodeProps {
-	value: InlineCodeProps['value'];
-}
-
-const InlineCode = ({ value }: IInlineCodeProps) => {
-	const { theme } = useTheme();
-
-	return (
-		<Text
-			style={[
-				styles.codeInline,
-				{
-					color: themes[theme].fontDefault,
-					backgroundColor: themes[theme].surfaceNeutral,
-					borderColor: themes[theme].strokeLight
-				}
-			]}>
-			{(block => {
-				switch (block.type) {
-					case 'PLAIN_TEXT':
-						return <Text>{block.value}</Text>;
-					default:
-						return null;
-				}
-			})(value)}
-		</Text>
-	);
-};
-
-export default InlineCode;
diff --git a/app/containers/markdown/components/Katex.tsx b/app/containers/markdown/components/Katex.tsx
deleted file mode 100644
index 576c2a110f1..00000000000
--- a/app/containers/markdown/components/Katex.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { type KaTeX as KaTeXProps } from '@rocket.chat/message-parser';
-import { type ReactElement } from 'react';
-import { type StyleProp, type ViewStyle } from 'react-native';
-import Katex from 'react-native-katex';
-// eslint-disable-next-line import/no-unresolved
-import MathView, { MathText } from 'react-native-math-view';
-
-import { isAndroid } from '~/lib/methods/helpers/deviceInfo';
-import { useTheme } from '~/theme';
-import { DEFAULT_MESSAGE_HEIGHT } from '~/containers/message/utils';
-
-interface IKaTeXProps {
-	value: KaTeXProps['value'];
-}
-
-const BLOCK_ENV_PATTERN = /\\begin\s*\{\s*(array|matrix|pmatrix|bmatrix|Bmatrix|vmatrix|Vmatrix)\s*\}/;
-
-export const KaTeX = ({ value }: IKaTeXProps): ReactElement | null => {
-	const { colors } = useTheme();
-	const fixAndroidWebviewCrashStyle: StyleProp<ViewStyle> = isAndroid ? { opacity: 0.99, overflow: 'hidden' } : {};
-	// KaTeX array does not render correctly in MathView (shows gray box).
-	// MathView does not throw, so renderError is never triggered.
-	if (BLOCK_ENV_PATTERN.test(value)) {
-		return (
-			<Katex
-				expression={value}
-				displayMode={true}
-				style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]}
-			/>
-		);
-	}
-
-	return (
-		<MathView
-			math={value}
-			config={{ inline: false }}
-			style={{ color: colors.fontDefault }}
-			renderError={() => (
-				<Katex
-					expression={value}
-					displayMode={true}
-					style={[{ flex: 1, height: DEFAULT_MESSAGE_HEIGHT }, fixAndroidWebviewCrashStyle]}
-				/>
-			)}
-		/>
-	);
-};
-
-export const InlineKaTeX = ({ value }: IKaTeXProps): ReactElement | null => {
-	const { colors } = useTheme();
-	return <MathText color value={`$$${value}$$`} direction='ltr' style={{ color: colors.fontDefault }} />;
-};
diff --git a/app/containers/markdown/components/LineBreak.tsx b/app/containers/markdown/components/LineBreak.tsx
deleted file mode 100644
index 9ff53bb7b15..00000000000
--- a/app/containers/markdown/components/LineBreak.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { View } from 'react-native';
-
-export default function LineBreak() {
-	return <View style={{ height: 8 }} />;
-}
diff --git a/app/containers/markdown/components/Paragraph.tsx b/app/containers/markdown/components/Paragraph.tsx
deleted file mode 100644
index 3e15d2f6af2..00000000000
--- a/app/containers/markdown/components/Paragraph.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Text } from 'react-native';
-import { type Paragraph as ParagraphProps } from '@rocket.chat/message-parser';
-
-import Inline from './Inline';
-import styles from '../styles';
-import { useTheme } from '~/theme';
-import { themes } from '~/lib/constants/colors';
-
-interface IParagraphProps {
-	value: ParagraphProps['value'];
-}
-
-const Paragraph = ({ value }: IParagraphProps) => {
-	let forceTrim = false;
-	const { theme } = useTheme();
-	if (
-		value?.[0]?.type === 'LINK' &&
-		// Need to update the @rocket.chat/message-parser to understand that the label can be a Markup | Markup[]
-		// https://github.com/RocketChat/fuselage/blob/461ecf661d9ff4a46390957c915e4352fa942a7c/packages/message-parser/src/definitions.ts#L141
-		// @ts-ignore
-		(value?.[0]?.value?.label?.value?.toString().trim() === '' || value?.[0]?.value?.label?.[0]?.value?.toString().trim() === '')
-	) {
-		// We are returning null when we receive a message like this: `[ ](https://open.rocket.chat/)\nplain_text`
-		// to avoid render a line empty above the the message
-		if (value.length === 1) {
-			return null;
-		}
-		if (value.length === 2 && value?.[1]?.type === 'PLAIN_TEXT' && value?.[1]?.value?.toString().trim() === '') {
-			return null;
-		}
-		forceTrim = true;
-	}
-	return (
-		<Text style={[styles.text, { color: themes[theme].fontDefault }]}>
-			<Inline value={value} forceTrim={forceTrim} />
-		</Text>
-	);
-};
-
-export default Paragraph;
diff --git a/app/containers/markdown/components/Plain.tsx b/app/containers/markdown/components/Plain.tsx
index 8a12a2eb7b6..7974707184f 100644
--- a/app/containers/markdown/components/Plain.tsx
+++ b/app/containers/markdown/components/Plain.tsx
@@ -4,7 +4,6 @@ import { type Plain as PlainProps } from '@rocket.chat/message-parser';
 
 import { useTheme } from '~/theme';
 import styles from '../styles';
-import { useMarkdownContext } from '../contexts/MarkdownContext';
 
 interface IPlainProps {
 	value: PlainProps['value'];
@@ -12,9 +11,8 @@ interface IPlainProps {
 
 const Plain = ({ value }: IPlainProps): ReactElement => {
 	const { colors } = useTheme();
-	const { textStyle } = useMarkdownContext();
 	return (
-		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.fontDefault }, ...(textStyle ? [textStyle] : [])]}>
+		<Text accessibilityLabel={value} style={[styles.plainText, { color: colors.fontDefault }]}>
 			{value}
 		</Text>
 	);
diff --git a/app/containers/markdown/components/Preview.tsx b/app/containers/markdown/components/Preview.tsx
index 83faa140bf7..594fb0d5dcf 100644
--- a/app/containers/markdown/components/Preview.tsx
+++ b/app/containers/markdown/components/Preview.tsx
@@ -1,4 +1,5 @@
-import { type StyleProp, Text, type TextStyle } from 'react-native';
+import { type StyleProp, type TextStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { themes } from '~/lib/constants/colors';
 import { useTheme } from '~/theme';
@@ -21,7 +22,7 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdo
 	}
 	const m = formattedText;
 	return (
-		<Text
+		<PlainText
 			accessibilityLabel={m}
 			style={[
 				styles.text,
@@ -31,7 +32,7 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdo
 			numberOfLines={numberOfLines}
 			testID={testID || `markdown-preview-${m}`}>
 			{m}
-		</Text>
+		</PlainText>
 	);
 };
 
diff --git a/app/containers/markdown/components/Quote.tsx b/app/containers/markdown/components/Quote.tsx
deleted file mode 100644
index cefa3423638..00000000000
--- a/app/containers/markdown/components/Quote.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { View } from 'react-native';
-import { type Quote as QuoteProps } from '@rocket.chat/message-parser';
-
-import { themes } from '~/lib/constants/colors';
-import { useTheme } from '~/theme';
-import styles from '../styles';
-import Paragraph from './Paragraph';
-
-interface IQuoteProps {
-	value: QuoteProps['value'];
-}
-
-const Quote = ({ value }: IQuoteProps) => {
-	const { theme } = useTheme();
-	return (
-		<View style={styles.container}>
-			<View style={[styles.quote, { backgroundColor: themes[theme].strokeLight }]} />
-			<View style={styles.childContainer}>
-				{value.map(item => (
-					<Paragraph value={item.value} />
-				))}
-			</View>
-		</View>
-	);
-};
-
-export default Quote;
diff --git a/app/containers/markdown/components/Timestamp.tsx b/app/containers/markdown/components/Timestamp.tsx
deleted file mode 100644
index 6bfc8dff0ff..00000000000
--- a/app/containers/markdown/components/Timestamp.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useMemo, useCallback, type ReactElement } from 'react';
-import { Text } from 'react-native';
-
-import dayjs from '~/lib/dayjs';
-import { useTheme } from '~/theme';
-import { LISTENER } from '~/containers/Toast';
-import EventEmitter from '~/lib/methods/helpers/events';
-import sharedStyles from '~/views/Styles';
-
-interface ITimestampProps {
-	value: { timestamp: string; format: 't' | 'T' | 'd' | 'D' | 'f' | 'F' | 'R' };
-}
-
-const Timestamp = ({ value }: ITimestampProps): ReactElement => {
-	const { colors } = useTheme();
-
-	const timestampMs = useMemo(() => {
-		const ts = value.timestamp;
-
-		// RC API returns Unix timestamps in seconds; dayjs expects milliseconds
-		if (/^-?\d{10}$/.test(ts)) return Number(ts) * 1000;
-		if (/^-?\d{13}$/.test(ts)) return Number(ts);
-
-		return dayjs(ts).valueOf();
-	}, [value.timestamp]);
-
-	const formatDate = useMemo(() => {
-		if (value.format === 't') {
-			return dayjs(timestampMs).format('hh:mm A');
-		}
-
-		if (value.format === 'T') {
-			return dayjs(timestampMs).format('hh:mm:ss A');
-		}
-
-		if (value.format === 'd') {
-			return dayjs(timestampMs).format('MM/DD/YYYY');
-		}
-
-		if (value.format === 'D') {
-			return dayjs(timestampMs).format('dddd, MMM DD, YYYY');
-		}
-
-		if (value.format === 'f') {
-			return dayjs(timestampMs).format('dddd, MMM DD, YYYY hh:mm A');
-		}
-
-		if (value.format === 'F') {
-			return dayjs(timestampMs).format('dddd, MMM DD, YYYY hh:mm:ss A');
-		}
-
-		if (value.format === 'R') {
-			return dayjs(timestampMs).fromNow();
-		}
-
-		return 'Invalid Date';
-	}, [timestampMs, value.format]);
-
-	const handlePress = useCallback(() => {
-		const message = dayjs(timestampMs).format('dddd, MMM DD, YYYY hh:mm A');
-		EventEmitter.emit(LISTENER, { message });
-	}, [timestampMs]);
-
-	return (
-		<Text
-			style={[sharedStyles.textMedium, { backgroundColor: colors.surfaceSelected, color: colors.fontDefault }]}
-			onPress={handlePress}>
-			{` ${formatDate} `}
-		</Text>
-	);
-};
-
-export default Timestamp;
diff --git a/app/containers/markdown/components/code/Code.tsx b/app/containers/markdown/components/code/Code.tsx
deleted file mode 100644
index a7060452430..00000000000
--- a/app/containers/markdown/components/code/Code.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { type ReactElement } from 'react';
-import { View } from 'react-native';
-import { type Code as CodeProps } from '@rocket.chat/message-parser';
-
-import styles from '~/containers/markdown/styles';
-import { useTheme } from '~/theme';
-import CodeLine from './CodeLine';
-
-interface ICodeProps {
-	value: CodeProps['value'];
-}
-
-const Code = ({ value }: ICodeProps): ReactElement => {
-	const { colors } = useTheme();
-
-	return (
-		<View
-			style={[
-				styles.codeBlock,
-				{
-					backgroundColor: colors.surfaceNeutral,
-					borderColor: colors.strokeLight
-				}
-			]}>
-			{value.map(block => {
-				switch (block.type) {
-					case 'CODE_LINE':
-						return <CodeLine value={block.value} />;
-					default:
-						return null;
-				}
-			})}
-		</View>
-	);
-};
-
-export default Code;
diff --git a/app/containers/markdown/components/code/CodeLine.tsx b/app/containers/markdown/components/code/CodeLine.tsx
deleted file mode 100644
index e982979dfb4..00000000000
--- a/app/containers/markdown/components/code/CodeLine.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { type CodeLine as CodeLineProps } from '@rocket.chat/message-parser';
-import { type ReactElement } from 'react';
-import { Text } from 'react-native';
-
-import { useTheme } from '~/theme';
-import styles from '~/containers/markdown/styles';
-
-interface ICodeLineProps {
-	value: CodeLineProps['value'];
-}
-
-const CodeLine = ({ value }: ICodeLineProps): ReactElement | null => {
-	const { colors } = useTheme();
-	if (value.type !== 'PLAIN_TEXT') {
-		return null;
-	}
-
-	return <Text style={[styles.codeBlockText, { color: colors.fontDefault }]}>{value.value}</Text>;
-};
-
-export default CodeLine;
diff --git a/app/containers/markdown/components/code/index.ts b/app/containers/markdown/components/code/index.ts
deleted file mode 100644
index da88c689cf7..00000000000
--- a/app/containers/markdown/components/code/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import Code from './Code';
-import CodeLine from './CodeLine';
-
-export { Code, CodeLine };
diff --git a/app/containers/markdown/components/emoji/BigEmoji.tsx b/app/containers/markdown/components/emoji/BigEmoji.tsx
deleted file mode 100644
index 134ceaadc53..00000000000
--- a/app/containers/markdown/components/emoji/BigEmoji.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { StyleSheet, View } from 'react-native';
-import { type BigEmoji as BigEmojiProps } from '@rocket.chat/message-parser';
-
-import Emoji from './Emoji';
-
-interface IBigEmojiProps {
-	value: BigEmojiProps['value'];
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flexDirection: 'row'
-	}
-});
-
-const BigEmoji = ({ value }: IBigEmojiProps) => (
-	<View style={styles.container}>
-		{value.map(block => (
-			<Emoji block={block} isBigEmoji />
-		))}
-	</View>
-);
-
-export default BigEmoji;
diff --git a/app/containers/markdown/components/emoji/index.ts b/app/containers/markdown/components/emoji/index.ts
deleted file mode 100644
index 6826cf12c24..00000000000
--- a/app/containers/markdown/components/emoji/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import BigEmoji from './BigEmoji';
-import Emoji from './Emoji';
-
-export { Emoji, BigEmoji };
diff --git a/app/containers/markdown/components/inline/Bold.tsx b/app/containers/markdown/components/inline/Bold.tsx
deleted file mode 100644
index 88fdc931efd..00000000000
--- a/app/containers/markdown/components/inline/Bold.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { type ReactNode } from 'react';
-import { Text } from 'react-native';
-
-import sharedStyles from '~/views/Styles';
-import MarkdownContext, { useMarkdownContext } from '~/containers/markdown/contexts/MarkdownContext';
-
-interface IBoldProps {
-	children: ReactNode;
-}
-
-const Bold = ({ children }: IBoldProps) => {
-	const context = useMarkdownContext(sharedStyles.textBold);
-
-	return (
-		<Text style={sharedStyles.textBold}>
-			<MarkdownContext.Provider value={context}>{children}</MarkdownContext.Provider>
-		</Text>
-	);
-};
-
-export default Bold;
diff --git a/app/containers/markdown/components/inline/Italic.tsx b/app/containers/markdown/components/inline/Italic.tsx
deleted file mode 100644
index 19f9b52f9f1..00000000000
--- a/app/containers/markdown/components/inline/Italic.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { type ReactNode } from 'react';
-import { Text } from 'react-native';
-
-import styles from '~/containers/markdown/styles';
-import MarkdownContext, { useMarkdownContext } from '~/containers/markdown/contexts/MarkdownContext';
-
-interface IItalicProps {
-	children: ReactNode;
-}
-
-const Italic = ({ children }: IItalicProps) => {
-	const context = useMarkdownContext(styles.emph);
-
-	return (
-		<Text style={styles.emph}>
-			<MarkdownContext.Provider value={context}>{children}</MarkdownContext.Provider>
-		</Text>
-	);
-};
-
-export default Italic;
diff --git a/app/containers/markdown/components/inline/Link.tsx b/app/containers/markdown/components/inline/Link.tsx
deleted file mode 100644
index 3d28458311d..00000000000
--- a/app/containers/markdown/components/inline/Link.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useMemo, type ReactNode } from 'react';
-import { Alert, Text } from 'react-native';
-import { type Link as LinkProps } from '@rocket.chat/message-parser';
-import Clipboard from '@react-native-clipboard/clipboard';
-
-import I18n from '~/i18n';
-import { LISTENER } from '~/containers/Toast';
-import { useTheme } from '~/theme';
-import openLink from '~/lib/methods/helpers/openLink';
-import EventEmitter from '~/lib/methods/helpers/events';
-import MarkdownContext, { useMarkdownContext } from '~/containers/markdown/contexts/MarkdownContext';
-import styles from '~/containers/markdown/styles';
-
-interface ILinkProps {
-	value: LinkProps['value'];
-	children: ReactNode;
-}
-
-const Link = ({ value, children }: ILinkProps) => {
-	const { theme, colors } = useTheme();
-	const { onLinkPress, textStyle } = useMarkdownContext();
-	const linkStyle = useMemo(() => ({ color: colors.fontInfo }), [colors.fontInfo]);
-	const context = useMarkdownContext(linkStyle);
-	const { src } = 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);
-		}
-		openLink(src.value, theme);
-	};
-
-	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 style={[styles.link, ...(textStyle ? [textStyle] : []), linkStyle]} onPress={handlePress} onLongPress={onLongPress}>
-			<MarkdownContext.Provider value={context}>{children}</MarkdownContext.Provider>
-		</Text>
-	);
-};
-
-export default Link;
diff --git a/app/containers/markdown/components/inline/Strike.tsx b/app/containers/markdown/components/inline/Strike.tsx
deleted file mode 100644
index 8387684f175..00000000000
--- a/app/containers/markdown/components/inline/Strike.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { type ReactNode } from 'react';
-import { Text } from 'react-native';
-
-import styles from '~/containers/markdown/styles';
-import MarkdownContext, { useMarkdownContext } from '~/containers/markdown/contexts/MarkdownContext';
-
-interface IStrikeProps {
-	children: ReactNode;
-}
-
-const Strike = ({ children }: IStrikeProps) => {
-	const context = useMarkdownContext(styles.del);
-
-	return (
-		<Text style={styles.del}>
-			<MarkdownContext.Provider value={context}>{children}</MarkdownContext.Provider>
-		</Text>
-	);
-};
-
-export default Strike;
diff --git a/app/containers/markdown/components/inline/index.ts b/app/containers/markdown/components/inline/index.ts
deleted file mode 100644
index a5193b34825..00000000000
--- a/app/containers/markdown/components/inline/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import Bold from './Bold';
-import Italic from './Italic';
-import Link from './Link';
-import Strike from './Strike';
-
-export { Bold, Italic, Link, Strike };
diff --git a/app/containers/markdown/components/list/OrderedList.tsx b/app/containers/markdown/components/list/OrderedList.tsx
deleted file mode 100644
index 9fc77ad544d..00000000000
--- a/app/containers/markdown/components/list/OrderedList.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { type ReactElement } from 'react';
-import { View, Text } from 'react-native';
-import { type OrderedList as OrderedListProps } from '@rocket.chat/message-parser';
-
-import Inline from '../Inline';
-import styles from '~/containers/markdown/styles';
-import { useTheme } from '~/theme';
-
-interface IOrderedListProps {
-	value: OrderedListProps['value'];
-}
-
-const OrderedList = ({ value }: IOrderedListProps): ReactElement => {
-	const { colors } = useTheme();
-	return (
-		<View>
-			{value.map(item => (
-				<View style={styles.row} key={item.number?.toString()}>
-					<Text style={[styles.text, styles.listPrefix, { color: colors.fontDefault }]}>{item.number}. </Text>
-					<Text style={[styles.text, styles.inline, { color: colors.fontDefault }]}>
-						<Inline value={item.value} />
-					</Text>
-				</View>
-			))}
-		</View>
-	);
-};
-
-export default OrderedList;
diff --git a/app/containers/markdown/components/list/TaskList.tsx b/app/containers/markdown/components/list/TaskList.tsx
deleted file mode 100644
index 1ab56b4f3ce..00000000000
--- a/app/containers/markdown/components/list/TaskList.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Text, View } from 'react-native';
-import { type Tasks as TasksProps } from '@rocket.chat/message-parser';
-
-import Inline from '../Inline';
-import styles from '~/containers/markdown/styles';
-import { useTheme } from '~/theme';
-import { CustomIcon } from '~/containers/CustomIcon';
-
-interface ITasksProps {
-	value: TasksProps['value'];
-}
-
-const TaskList = ({ value = [] }: ITasksProps) => {
-	const { colors } = useTheme();
-	return (
-		<View>
-			{value.map(item => (
-				<View style={styles.row}>
-					<Text style={[styles.text, { color: colors.fontDefault }]}>
-						<CustomIcon
-							testID={item.status ? 'task-list-checked' : 'task-list-unchecked'}
-							name={item.status ? 'checkbox-checked' : 'checkbox-unchecked'}
-							size={24}
-						/>
-					</Text>
-					<Text style={[styles.inline, { color: colors.fontDefault }]}>
-						<Inline value={item.value} />
-					</Text>
-				</View>
-			))}
-		</View>
-	);
-};
-
-export default TaskList;
diff --git a/app/containers/markdown/components/list/UnorderedList.tsx b/app/containers/markdown/components/list/UnorderedList.tsx
deleted file mode 100644
index 98b9ab5b63a..00000000000
--- a/app/containers/markdown/components/list/UnorderedList.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { type UnorderedList as UnorderedListProps } from '@rocket.chat/message-parser';
-import { View, Text } from 'react-native';
-
-import Inline from '../Inline';
-import styles from '~/containers/markdown/styles';
-import { themes } from '~/lib/constants/colors';
-import { useTheme } from '~/theme';
-
-interface IUnorderedListProps {
-	value: UnorderedListProps['value'];
-}
-
-const UnorderedList = ({ value }: IUnorderedListProps) => {
-	const { theme } = useTheme();
-	return (
-		<View>
-			{value.map(item => (
-				<View style={styles.row}>
-					<Text style={[styles.text, { color: themes[theme].fontDefault }]}>{'\u2022 '}</Text>
-					<Text style={[styles.inline, { color: themes[theme].fontDefault }]}>
-						<Inline value={item.value} />
-					</Text>
-				</View>
-			))}
-		</View>
-	);
-};
-
-export default UnorderedList;
diff --git a/app/containers/markdown/components/list/index.ts b/app/containers/markdown/components/list/index.ts
deleted file mode 100644
index 27ae0fb0b06..00000000000
--- a/app/containers/markdown/components/list/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import OrderedList from './OrderedList';
-import TaskList from './TaskList';
-import UnorderedList from './UnorderedList';
-
-export { OrderedList, TaskList, UnorderedList };
diff --git a/app/containers/markdown/components/mentions/AtMention.tsx b/app/containers/markdown/components/mentions/AtMention.tsx
deleted file mode 100644
index a5789b21879..00000000000
--- a/app/containers/markdown/components/mentions/AtMention.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { memo } from 'react';
-import { Text } from 'react-native';
-
-import { useTheme } from '~/theme';
-import { themes } from '~/lib/constants/colors';
-import { USER_MENTIONS_PREFERENCES_KEY } from '~/lib/constants/keys';
-import styles from '~/containers/markdown/styles';
-import { events, logEvent } from '~/lib/methods/helpers/log';
-import { useUserPreferences } from '~/lib/methods/userPreferences';
-import { useMarkdownContext } from '~/containers/markdown/contexts/MarkdownContext';
-
-interface IAtMention {
-	mention: string;
-}
-
-const AtMention = memo(({ mention }: IAtMention) => {
-	const { theme } = useTheme();
-	const { textStyle, username, navToRoomInfo, useRealName, mentions } = useMarkdownContext();
-	const [mentionsWithAtSymbol] = useUserPreferences<boolean>(USER_MENTIONS_PREFERENCES_KEY, false);
-	const preffix = mentionsWithAtSymbol ? '@' : '';
-	if (mention === 'all' || mention === 'here') {
-		return (
-			<Text
-				style={[
-					styles.mention,
-					...(textStyle ? [textStyle] : []),
-					{
-						color: themes[theme].statusFontService
-					}
-				]}>
-				{preffix}
-				{mention}
-			</Text>
-		);
-	}
-
-	const itsMe = mention === username;
-	let mentionStyle = {};
-	if (itsMe) {
-		mentionStyle = {
-			color: themes[theme].statusFontDanger
-		};
-	} else {
-		mentionStyle = {
-			color: themes[theme].statusFontWarning
-		};
-	}
-
-	const atMentioned = mentions?.find?.((m: any) => m && (m.username === mention || m.name === mention));
-
-	const handlePress = () => {
-		logEvent(events.ROOM_MENTION_GO_USER_INFO);
-		const navParam = {
-			t: 'd',
-			rid: atMentioned && atMentioned._id,
-			itsMe
-		};
-		if (navToRoomInfo) {
-			navToRoomInfo(navParam);
-		}
-	};
-
-	if (atMentioned) {
-		let text;
-		if (atMentioned.type === 'user') {
-			text = useRealName && atMentioned.name ? atMentioned.name : atMentioned.username;
-		} else {
-			text = atMentioned.name;
-		}
-
-		return (
-			// not enough information on mentions to navigate to team info, so we don't handle onPress
-			<Text
-				style={[styles.mention, ...(textStyle ? [textStyle] : []), mentionStyle]}
-				onPress={atMentioned?.type === 'team' ? undefined : handlePress}>
-				{preffix}
-				{text}
-			</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
deleted file mode 100644
index 7e18408d8b6..00000000000
--- a/app/containers/markdown/components/mentions/Hashtag.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { memo } from 'react';
-import { Text } from 'react-native';
-
-import i18n from '~/i18n';
-import { themes } from '~/lib/constants/colors';
-import { ROOM_MENTIONS_PREFERENCES_KEY } from '~/lib/constants/keys';
-import { getSubscriptionByRoomId } from '~/lib/database/services/Subscription';
-import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
-import { useUserPreferences } from '~/lib/methods/userPreferences';
-import { showErrorAlert } from '~/lib/methods/helpers/info';
-import { goRoom } from '~/lib/methods/helpers/goRoom';
-import { getRoomInfo } from '~/lib/services/restApi';
-import { useTheme } from '~/theme';
-import { sendLoadingEvent } from '~/containers/Loading';
-import styles from '~/containers/markdown/styles';
-import { useMarkdownContext } from '~/containers/markdown/contexts/MarkdownContext';
-
-interface IHashtag {
-	hashtag: string;
-}
-
-const Hashtag = memo(({ hashtag }: IHashtag) => {
-	const { theme } = useTheme();
-	const { textStyle, channels, navToRoomInfo } = useMarkdownContext();
-	const [roomsWithHashTagSymbol] = useUserPreferences<boolean>(ROOM_MENTIONS_PREFERENCES_KEY, false);
-	const isMasterDetail = useMasterDetail();
-	const preffix = roomsWithHashTagSymbol ? '#' : '';
-	const handlePress = async () => {
-		const index = channels?.findIndex(channel => channel.name === hashtag);
-		if (typeof index !== 'undefined' && navToRoomInfo) {
-			const navParam = {
-				t: 'c',
-				rid: channels?.[index]._id
-			};
-			const room = navParam.rid && (await getSubscriptionByRoomId(navParam.rid));
-			if (room) {
-				goRoom({ item: room, isMasterDetail });
-			} else if (navParam.rid) {
-				sendLoadingEvent({ visible: true });
-				try {
-					await getRoomInfo(navParam.rid);
-					sendLoadingEvent({ visible: false });
-					navToRoomInfo(navParam);
-				} catch (error) {
-					sendLoadingEvent({ visible: false });
-					showErrorAlert(i18n.t('The_room_does_not_exist'), i18n.t('Room_not_found'));
-				}
-			}
-		}
-	};
-
-	if (channels && channels.length && channels.findIndex(channel => channel.name === hashtag) !== -1) {
-		return (
-			<Text
-				style={[
-					styles.mention,
-					...(textStyle ? [textStyle] : []),
-					{
-						color: themes[theme].fontInfo
-					}
-				]}
-				onPress={handlePress}>
-				{`${preffix}${hashtag}`}
-			</Text>
-		);
-	}
-	return (
-		<Text style={[styles.text, ...(textStyle ? [textStyle] : []), { color: themes[theme].fontDefault }]}>{`#${hashtag}`}</Text>
-	);
-});
-
-export default Hashtag;
diff --git a/app/containers/markdown/components/mentions/index.tsx b/app/containers/markdown/components/mentions/index.tsx
deleted file mode 100644
index f38962aec66..00000000000
--- a/app/containers/markdown/components/mentions/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import AtMention from './AtMention';
-import Hashtag from './Hashtag';
-
-export { AtMention, Hashtag };
diff --git a/app/containers/markdown/contexts/MarkdownContext.ts b/app/containers/markdown/contexts/MarkdownContext.ts
deleted file mode 100644
index 0f57a021812..00000000000
--- a/app/containers/markdown/contexts/MarkdownContext.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { createContext, useContext, useMemo } from 'react';
-import { type StyleProp, type TextStyle } from 'react-native';
-
-import { type IUserMention, type IUserChannel } from '../interfaces';
-
-interface IMarkdownContext {
-	mentions?: IUserMention[];
-	channels?: IUserChannel[];
-	useRealName?: boolean;
-	username?: string;
-	navToRoomInfo?: Function;
-	onLinkPress?: Function;
-	textStyle?: StyleProp<TextStyle>;
-}
-
-const defaultState = {
-	mentions: [],
-	channels: [],
-	useRealName: false,
-	username: '',
-	navToRoomInfo: () => {},
-	textStyle: undefined
-};
-
-const MarkdownContext = createContext<IMarkdownContext>(defaultState);
-
-export const useMarkdownContext = (textStyle?: StyleProp<TextStyle>): IMarkdownContext => {
-	const context = useContext(MarkdownContext);
-
-	return useMemo(() => {
-		if (!textStyle) return context;
-		if (!context.textStyle) return { ...context, textStyle };
-
-		return {
-			...context,
-			textStyle: [
-				...(Array.isArray(context.textStyle) ? context.textStyle : [context.textStyle]),
-				...(Array.isArray(textStyle) ? textStyle : [textStyle])
-			]
-		};
-	}, [context, textStyle]);
-};
-
-export default MarkdownContext;
diff --git a/app/containers/markdown/hooks/useMarkdownLinkPress.ts b/app/containers/markdown/hooks/useMarkdownLinkPress.ts
new file mode 100644
index 00000000000..37693e43b35
--- /dev/null
+++ b/app/containers/markdown/hooks/useMarkdownLinkPress.ts
@@ -0,0 +1,115 @@
+import { Alert } from 'react-native';
+import { useCallback } from 'react';
+import Clipboard from '@react-native-clipboard/clipboard';
+
+import I18n from '~/i18n';
+import dayjs from '~/lib/dayjs';
+import { CHANNEL_SCHEME, ME_QUERY, TEAM_QUERY, TIMESTAMP_FULL_FORMAT, TIMESTAMP_SCHEME, USER_SCHEME } from '../linkSchemes';
+import { useTheme } from '~/theme';
+import { LISTENER } from '~/containers/Toast';
+import EventEmitter from '~/lib/methods/helpers/events';
+import { events, logEvent } from '~/lib/methods/helpers/log';
+import openLink from '~/lib/methods/helpers/openLink';
+import { showErrorAlert } from '~/lib/methods/helpers/info';
+import { goRoom } from '~/lib/methods/helpers/goRoom';
+import { getRoomInfo } from '~/lib/services/restApi';
+import { getSubscriptionByRoomId } from '~/lib/database/services/Subscription';
+import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { sendLoadingEvent } from '~/containers/Loading';
+import { type IUserChannel, type TOnLinkPress } from '../interfaces';
+
+interface IUseMarkdownLinkPressParams {
+	channels?: IUserChannel[];
+	navToRoomInfo?: Function;
+	onLinkPress?: TOnLinkPress;
+}
+
+const isInternalScheme = (url: string): boolean =>
+	url.startsWith(USER_SCHEME) || url.startsWith(CHANNEL_SCHEME) || url.startsWith(TIMESTAMP_SCHEME);
+
+export const useMarkdownLinkPress = ({ channels, navToRoomInfo, onLinkPress }: IUseMarkdownLinkPressParams) => {
+	const { theme } = useTheme();
+	const isMasterDetail = useMasterDetail();
+
+	const handleChannelPress = useCallback(
+		async (rid: string) => {
+			if (!navToRoomInfo) {
+				return;
+			}
+			const navParam = { t: 'c', rid };
+			const room = await getSubscriptionByRoomId(rid);
+			if (room) {
+				goRoom({ item: room, isMasterDetail });
+				return;
+			}
+			sendLoadingEvent({ visible: true });
+			try {
+				await getRoomInfo(rid);
+				sendLoadingEvent({ visible: false });
+				navToRoomInfo(navParam);
+			} catch (error) {
+				sendLoadingEvent({ visible: false });
+				showErrorAlert(I18n.t('The_room_does_not_exist'), I18n.t('Room_not_found'));
+			}
+		},
+		[navToRoomInfo, isMasterDetail]
+	);
+
+	const handleLinkPress = useCallback(
+		(url: string) => {
+			if (url.startsWith(USER_SCHEME)) {
+				const [rid, query = ''] = url.slice(USER_SCHEME.length).split('?');
+				if (rid === 'all' || rid === 'here' || `?${query}` === TEAM_QUERY) {
+					return;
+				}
+				logEvent(events.ROOM_MENTION_GO_USER_INFO);
+				navToRoomInfo?.({ t: 'd', rid, itsMe: `?${query}` === ME_QUERY });
+				return;
+			}
+
+			if (url.startsWith(CHANNEL_SCHEME)) {
+				const rid = url.slice(CHANNEL_SCHEME.length);
+				if (channels?.some(channel => channel._id === rid)) {
+					handleChannelPress(rid);
+				}
+				return;
+			}
+
+			if (url.startsWith(TIMESTAMP_SCHEME)) {
+				const unixSeconds = Number(url.slice(TIMESTAMP_SCHEME.length));
+				const message = dayjs(unixSeconds * 1000).format(TIMESTAMP_FULL_FORMAT);
+				EventEmitter.emit(LISTENER, { message });
+				return;
+			}
+
+			if (process.env.RUNNING_E2E_TESTS === 'true') {
+				Alert.alert('Link Pressed', url);
+				return;
+			}
+
+			if (onLinkPress) {
+				onLinkPress(url);
+				return;
+			}
+
+			openLink(url, theme);
+		},
+		[channels, navToRoomInfo, onLinkPress, theme, handleChannelPress]
+	);
+
+	const handleLinkLongPress = useCallback((url: string) => {
+		if (isInternalScheme(url)) {
+			return;
+		}
+
+		if (process.env.RUNNING_E2E_TESTS === 'true') {
+			Alert.alert('Link Long Pressed', url);
+			return;
+		}
+
+		Clipboard.setString(url);
+		EventEmitter.emit(LISTENER, { message: I18n.t('Copied_to_clipboard') });
+	}, []);
+
+	return { handleLinkPress, handleLinkLongPress };
+};
diff --git a/app/containers/markdown/hooks/useParseOptions.ts b/app/containers/markdown/hooks/useParseOptions.ts
new file mode 100644
index 00000000000..c029b914ef3
--- /dev/null
+++ b/app/containers/markdown/hooks/useParseOptions.ts
@@ -0,0 +1,15 @@
+import { useMemo } from 'react';
+import type { Options } from '@rocket.chat/message-parser';
+
+import { useSetting } from '~/lib/hooks/useSetting';
+
+export const useParseOptions = (): Options => {
+	const katexEnabled = useSetting('Katex_Enabled') === true;
+	const dollarSyntax = useSetting('Katex_Dollar_Syntax') === true;
+	const parenthesisSyntax = useSetting('Katex_Parenthesis_Syntax') === true;
+
+	return useMemo(
+		(): Options => (katexEnabled ? { katex: { dollarSyntax, parenthesisSyntax } } : {}),
+		[katexEnabled, dollarSyntax, parenthesisSyntax]
+	);
+};
diff --git a/app/containers/markdown/index.tsx b/app/containers/markdown/index.tsx
index d6add8e7bfe..1cc4d821c94 100644
--- a/app/containers/markdown/index.tsx
+++ b/app/containers/markdown/index.tsx
@@ -1,21 +1,22 @@
 import { useMemo, type FC } from 'react';
-import { type StyleProp, type TextStyle, View } from 'react-native';
+import { type StyleProp, StyleSheet, type TextStyle, View, useWindowDimensions } from 'react-native';
+import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
 import { parse } from '@rocket.chat/message-parser';
 import type { Root } from '@rocket.chat/message-parser';
 import isEmpty from 'lodash/isEmpty';
 
 import { type IUserMention, type IUserChannel, type TOnLinkPress } from './interfaces';
-import MarkdownContext from './contexts/MarkdownContext';
-import LineBreak from './components/LineBreak';
-import { KaTeX } from './components/Katex';
-import { BigEmoji } from './components/emoji';
-import UnorderedList from './components/list/UnorderedList';
-import OrderedList from './components/list/OrderedList';
-import TaskList from './components/list/TaskList';
-import Quote from './components/Quote';
-import Paragraph from './components/Paragraph';
-import { Code } from './components/code';
-import Heading from './components/Heading';
+import { buildRenderSegments, isBigEmojiOnly } from './serialize';
+import { buildMarkdownStyle } from './buildMarkdownStyle';
+import { useMarkdownLinkPress } from './hooks/useMarkdownLinkPress';
+import { useParseOptions } from './hooks/useParseOptions';
+import { useTheme } from '~/theme';
+import { useAppSelector } from '~/lib/hooks/useAppSelector';
+import { useCustomEmoji } from '~/lib/hooks/useCustomEmoji';
+import useShortnameToUnicode from '~/lib/hooks/useShortnameToUnicode';
+import { useUserPreferences } from '~/lib/methods/userPreferences';
+import { USER_MENTIONS_PREFERENCES_KEY, ROOM_MENTIONS_PREFERENCES_KEY } from '~/lib/constants/keys';
+import { getUserSelector } from '~/selectors/login';
 import log from '~/lib/methods/helpers/log';
 import styles from './styles';
 
@@ -34,69 +35,6 @@ interface IMarkdownProps {
 	textStyle?: StyleProp<TextStyle>;
 }
 
-type MarkdownBlock = Root[number];
-
-const PARSE_CACHE_MAX = 200;
-const parseCache = new Map<string, Root>();
-
-const parseMessage = (msg: string): Root => {
-	const cached = parseCache.get(msg);
-	if (cached) {
-		return cached;
-	}
-
-	const result = parse(msg);
-
-	if (parseCache.size >= PARSE_CACHE_MAX) {
-		const oldestKey = parseCache.keys().next().value;
-		if (oldestKey !== undefined) {
-			parseCache.delete(oldestKey);
-		}
-	}
-
-	parseCache.set(msg, result);
-	return result;
-};
-
-const resolveTokens = (msg: string, md: Root | undefined, isTranslated?: boolean): Root => {
-	if (!isTranslated && md) {
-		return md;
-	}
-
-	return parseMessage(typeof msg === 'string' ? msg : String(msg || ''));
-};
-
-const MarkdownBlockView = ({ block }: { block: MarkdownBlock }) => {
-	switch (block.type) {
-		case 'BIG_EMOJI':
-			return <BigEmoji value={block.value} />;
-		case 'UNORDERED_LIST':
-			return <UnorderedList value={block.value} />;
-		case 'ORDERED_LIST':
-			return <OrderedList value={block.value} />;
-		case 'TASKS':
-			return <TaskList value={block.value} />;
-		case 'QUOTE':
-			return <Quote value={block.value} />;
-		case 'PARAGRAPH':
-			return <Paragraph value={block.value} />;
-		case 'CODE':
-			return <Code value={block.value} />;
-		case 'HEADING':
-			return <Heading value={block.value} level={block.level} />;
-		case 'LINE_BREAK':
-			return <LineBreak />;
-		// This prop exists, but not even on the web it is treated, so...
-		// https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/gazzodown/src/Markup.tsx
-		// case 'LIST_ITEM':
-		// 	return <View />;
-		case 'KATEX':
-			return <KaTeX value={block.value} />;
-		default:
-			return null;
-	}
-};
-
 const Markdown: FC<IMarkdownProps> = ({
 	msg,
 	md,
@@ -109,41 +47,93 @@ const Markdown: FC<IMarkdownProps> = ({
 	isTranslated,
 	textStyle
 }: IMarkdownProps) => {
-	let tokens: Root | null = null;
+	const { colors } = useTheme();
+	const { fontScale } = useWindowDimensions();
+	const baseUrl = useAppSelector(state => state.server.server);
+	const convertAsciiEmoji = useAppSelector(state => getUserSelector(state)?.settings?.preferences?.convertAsciiEmoji ?? false);
+	const getCustomEmoji = useCustomEmoji();
+	const { formatShortnameToUnicode } = useShortnameToUnicode();
+	const [mentionsWithAtSymbol] = useUserPreferences<boolean>(USER_MENTIONS_PREFERENCES_KEY, false);
+	const [roomsWithHashTagSymbol] = useUserPreferences<boolean>(ROOM_MENTIONS_PREFERENCES_KEY, false);
+	const { handleLinkPress, handleLinkLongPress } = useMarkdownLinkPress({ channels, navToRoomInfo, onLinkPress });
+	const parseOptions = useParseOptions();
+
+	const { tokens, segments } = useMemo(() => {
+		if (!msg) {
+			return { tokens: null, segments: [] };
+		}
 
-	if (msg) {
 		try {
-			const result = resolveTokens(msg, md, isTranslated);
-			tokens = isEmpty(result) ? null : result;
-		} catch (e) {
-			log(e);
+			const parsed = !isTranslated && md ? md : parse(msg, parseOptions);
+			if (isEmpty(parsed)) {
+				return { tokens: null, segments: [] };
+			}
+
+			return {
+				tokens: parsed,
+				segments: buildRenderSegments(parsed, {
+					mentions,
+					channels,
+					useRealName,
+					username,
+					mentionsWithAtSymbol: mentionsWithAtSymbol ?? false,
+					roomsWithHashTagSymbol: roomsWithHashTagSymbol ?? false,
+					getCustomEmoji,
+					baseUrl,
+					convertAsciiEmoji,
+					formatShortnameToUnicode
+				})
+			};
+		} catch (error) {
+			log(error);
+			return { tokens: null, segments: [] };
 		}
-	}
-
-	const contextValue = useMemo(
-		() => ({
-			mentions,
-			channels,
-			useRealName,
-			username,
-			navToRoomInfo,
-			onLinkPress,
-			textStyle
-		}),
-		[mentions, channels, useRealName, username, navToRoomInfo, onLinkPress, textStyle]
-	);
-
-	if (!tokens) {
+	}, [
+		msg,
+		md,
+		isTranslated,
+		parseOptions,
+		mentions,
+		channels,
+		useRealName,
+		username,
+		mentionsWithAtSymbol,
+		roomsWithHashTagSymbol,
+		getCustomEmoji,
+		baseUrl,
+		convertAsciiEmoji,
+		formatShortnameToUnicode
+	]);
+
+	const bigEmojiOnly = isBigEmojiOnly(tokens);
+	const markdownStyle = useMemo(() => buildMarkdownStyle(colors, bigEmojiOnly, fontScale), [colors, bigEmojiOnly, fontScale]);
+
+	if (segments.length === 0) {
 		return null;
 	}
 
 	return (
 		<View style={styles.blocks}>
-			<MarkdownContext.Provider value={contextValue}>
-				{tokens.map((block, index) => (
-					<MarkdownBlockView key={`${block.type}-${index}`} block={block} />
-				))}
-			</MarkdownContext.Provider>
+			{segments.map((segment, index) => {
+				if (segment.type === 'linebreak') {
+					return <View key={`linebreak-${index}`} style={styles.lineBreak} />;
+				}
+
+				return (
+					<EnrichedMarkdownText
+						key={`markdown-${index}`}
+						markdown={segment.content}
+						accessibilityLabel={segment.accessibilityLabel}
+						markdownStyle={markdownStyle}
+						containerStyle={StyleSheet.flatten(textStyle)}
+						flavor='github'
+						md4cFlags={{ latexMath: true }}
+						selectable={false}
+						onLinkPress={event => handleLinkPress(event.url)}
+						onLinkLongPress={event => handleLinkLongPress(event.url)}
+					/>
+				);
+			})}
 		</View>
 	);
 };
diff --git a/app/containers/markdown/linkSchemes.ts b/app/containers/markdown/linkSchemes.ts
new file mode 100644
index 00000000000..d932cdc6390
--- /dev/null
+++ b/app/containers/markdown/linkSchemes.ts
@@ -0,0 +1,6 @@
+export const USER_SCHEME = 'user://';
+export const CHANNEL_SCHEME = 'channel://';
+export const TIMESTAMP_SCHEME = 'timestamp://';
+export const ME_QUERY = '?me=1';
+export const TEAM_QUERY = '?team=1';
+export const TIMESTAMP_FULL_FORMAT = 'dddd, MMM DD, YYYY hh:mm A';
diff --git a/app/containers/markdown/serialize.ts b/app/containers/markdown/serialize.ts
new file mode 100644
index 00000000000..15cc3530101
--- /dev/null
+++ b/app/containers/markdown/serialize.ts
@@ -0,0 +1,341 @@
+import type {
+	Root,
+	BigEmoji,
+	Paragraph,
+	Blocks,
+	Inlines,
+	Emoji as EmojiBlock,
+	Link as LinkBlock,
+	Timestamp as TimestampBlock
+} from '@rocket.chat/message-parser';
+
+import dayjs from '~/lib/dayjs';
+import { type IUserMention, type IUserChannel } from './interfaces';
+import { type TGetCustomEmoji } from '~/definitions';
+import { CHANNEL_SCHEME, ME_QUERY, TEAM_QUERY, TIMESTAMP_FULL_FORMAT, TIMESTAMP_SCHEME, USER_SCHEME } from './linkSchemes';
+
+export interface ISerializeContext {
+	mentions?: IUserMention[];
+	channels?: IUserChannel[];
+	useRealName?: boolean;
+	username?: string;
+	mentionsWithAtSymbol: boolean;
+	roomsWithHashTagSymbol: boolean;
+	getCustomEmoji: TGetCustomEmoji;
+	baseUrl: string;
+	convertAsciiEmoji: boolean;
+	formatShortnameToUnicode: (shortname: string) => string;
+}
+
+export type TRenderSegment = { type: 'markdown'; content: string; accessibilityLabel: string } | { type: 'linebreak' };
+
+const ESCAPE_PATTERN = /[\\`*_{}[\]()#+\-.!|~^$=<>&]/g;
+
+export const escapePlainText = (value: string): string => value.replace(ESCAPE_PATTERN, '\\$&');
+
+const escapeUrl = (url: string): string => `<${url.replace(/\\/g, '\\\\').replace(/</g, '\\<').replace(/>/g, '\\>')}>`;
+
+const timestampToUnixSeconds = (timestamp: string): number => {
+	if (/^-?\d{10}$/.test(timestamp)) return Number(timestamp);
+	if (/^-?\d{13}$/.test(timestamp)) return Math.floor(Number(timestamp) / 1000);
+	return Math.floor(dayjs(timestamp).valueOf() / 1000);
+};
+
+export const isBigEmojiOnly = (tokens: Root | null): tokens is [BigEmoji] =>
+	!!tokens && tokens.length === 1 && tokens[0].type === 'BIG_EMOJI';
+
+const formatTimestampLabel = (value: TimestampBlock['value']): string => {
+	const timestampMs = timestampToUnixSeconds(value.timestamp) * 1000;
+	switch (value.format) {
+		case 't':
+			return dayjs(timestampMs).format('hh:mm A');
+		case 'T':
+			return dayjs(timestampMs).format('hh:mm:ss A');
+		case 'd':
+			return dayjs(timestampMs).format('MM/DD/YYYY');
+		case 'D':
+			return dayjs(timestampMs).format('dddd, MMM DD, YYYY');
+		case 'f':
+			return dayjs(timestampMs).format(TIMESTAMP_FULL_FORMAT);
+		case 'F':
+			return dayjs(timestampMs).format('dddd, MMM DD, YYYY hh:mm:ss A');
+		case 'R':
+			return dayjs(timestampMs).fromNow();
+		default:
+			return 'Invalid Date';
+	}
+};
+
+interface IUserMentionLabel {
+	label: string;
+	rid: string;
+	query: string;
+}
+
+const resolveUserMentionLabel = (mention: string, context: ISerializeContext): IUserMentionLabel | null => {
+	const found = context.mentions?.find(candidate => candidate && (candidate.username === mention || candidate.name === mention));
+	if (!found) {
+		return null;
+	}
+
+	const label = found.type === 'user' ? (context.useRealName && found.name ? found.name : found.username) : found.name;
+	const itsMe = mention === context.username;
+	const query = found.type === 'team' ? TEAM_QUERY : itsMe ? ME_QUERY : '';
+
+	return { label: label ?? mention, rid: found._id, query };
+};
+
+const findChannelRid = (hashtag: string, context: ISerializeContext): string | null => {
+	const found = context.channels?.find(channel => channel.name === hashtag);
+	return found?._id ?? null;
+};
+
+interface IResolvedMention {
+	text: string;
+	url?: string;
+}
+
+const resolveUserMention = (mention: string, context: ISerializeContext): IResolvedMention => {
+	const prefix = context.mentionsWithAtSymbol ? '@' : '';
+	if (mention === 'all' || mention === 'here') {
+		return { text: prefix + mention, url: `${USER_SCHEME}${mention}` };
+	}
+	const resolved = resolveUserMentionLabel(mention, context);
+	if (!resolved) {
+		return { text: `@${mention}` };
+	}
+	return { text: prefix + resolved.label, url: `${USER_SCHEME}${resolved.rid}${resolved.query}` };
+};
+
+const resolveChannelMention = (hashtag: string, context: ISerializeContext): IResolvedMention => {
+	const rid = findChannelRid(hashtag, context);
+	if (!rid) {
+		return { text: `#${hashtag}` };
+	}
+	const prefix = context.roomsWithHashTagSymbol ? '#' : '';
+	return { text: prefix + hashtag, url: `${CHANNEL_SCHEME}${rid}` };
+};
+
+const serializeMention = ({ text, url }: IResolvedMention): string =>
+	url ? `[**${escapePlainText(text)}**](${escapeUrl(url)})` : escapePlainText(text);
+
+const emojiDisplayText = (block: EmojiBlock, context: ISerializeContext): string => {
+	if ('unicode' in block) {
+		return block.unicode;
+	}
+
+	const emojiToken = `:${block.shortCode}:`;
+	const emojiUnicode = context.formatShortnameToUnicode(emojiToken);
+	const isAsciiEmoji = block.value.value !== block.shortCode;
+
+	if (!context.convertAsciiEmoji && isAsciiEmoji) {
+		return block.value.value;
+	}
+
+	return emojiUnicode;
+};
+
+const WORD_JOINER = '\u2060';
+
+const serializeEmoji = (block: EmojiBlock, context: ISerializeContext): string => {
+	const emojiName = 'unicode' in block ? '' : block.value.value.replace(/:/g, '');
+	const customEmoji = 'unicode' in block ? null : context.getCustomEmoji(emojiName);
+	if (customEmoji) {
+		return `${WORD_JOINER}![](${context.baseUrl}/emoji-custom/${encodeURIComponent(customEmoji.name)}.${customEmoji.extension})`;
+	}
+
+	return escapePlainText(emojiDisplayText(block, context));
+};
+
+const serializeInlineCode = (value: { value: string }): string => {
+	const text = value.value;
+	const longestTickRun = Math.max(0, ...(text.match(/`+/g) ?? []).map(run => run.length));
+	const fence = '`'.repeat(longestTickRun + 1);
+	const padded = text.startsWith('`') || text.endsWith('`') ? ` ${text} ` : text;
+	return `${fence}${padded}${fence}`;
+};
+
+const toLinkLabelValue = (label: LinkBlock['value']['label']): Inlines[] => (Array.isArray(label) ? label : [label]);
+
+const serializeInline = (nodes: Inlines[], context: ISerializeContext): string =>
+	nodes.map(node => serializeInlineNode(node, context)).join('');
+
+const serializeInlineNode = (node: Inlines, context: ISerializeContext): string => {
+	switch (node.type) {
+		case 'PLAIN_TEXT':
+			return escapePlainText(node.value);
+		case 'BOLD':
+			return `**${serializeInline(node.value, context)}**`;
+		case 'ITALIC':
+			return `_${serializeInline(node.value, context)}_`;
+		case 'STRIKE':
+			return `~~${serializeInline(node.value, context)}~~`;
+		case 'LINK': {
+			const label = serializeInline(toLinkLabelValue(node.value.label), context);
+			if (!node.value.src.value) {
+				return label;
+			}
+			return `[${label}](${escapeUrl(node.value.src.value)})`;
+		}
+		case 'MENTION_USER':
+			return serializeMention(resolveUserMention(node.value.value, context));
+		case 'MENTION_CHANNEL':
+			return serializeMention(resolveChannelMention(node.value.value, context));
+		case 'EMOJI':
+			return serializeEmoji(node, context);
+		case 'INLINE_CODE':
+			return serializeInlineCode(node.value);
+		case 'INLINE_KATEX':
+			return `$${node.value}$`;
+		case 'TIMESTAMP': {
+			const label = formatTimestampLabel(node.value);
+			const unixSeconds = timestampToUnixSeconds(node.value.timestamp);
+			return `[${escapePlainText(` ${label} `)}](${escapeUrl(`${TIMESTAMP_SCHEME}${unixSeconds}`)})`;
+		}
+		case 'IMAGE':
+			return `![](${escapeUrl(node.value.src.value)})`;
+		default:
+			return '';
+	}
+};
+
+const plainTextInline = (nodes: Inlines[], context: ISerializeContext): string =>
+	nodes.map(node => plainTextNode(node, context)).join('');
+
+const plainTextNode = (node: Inlines, context: ISerializeContext): string => {
+	switch (node.type) {
+		case 'PLAIN_TEXT':
+			return node.value;
+		case 'BOLD':
+		case 'ITALIC':
+		case 'STRIKE':
+			return plainTextInline(node.value, context);
+		case 'LINK':
+			return plainTextInline(toLinkLabelValue(node.value.label), context);
+		case 'MENTION_USER':
+			return resolveUserMention(node.value.value, context).text;
+		case 'MENTION_CHANNEL':
+			return resolveChannelMention(node.value.value, context).text;
+		case 'EMOJI':
+			return emojiDisplayText(node, context);
+		case 'INLINE_CODE':
+			return node.value.value;
+		case 'INLINE_KATEX':
+			return node.value;
+		case 'TIMESTAMP':
+			return formatTimestampLabel(node.value);
+		default:
+			return '';
+	}
+};
+
+const trimForceTrimNodes = (value: Paragraph['value']): Paragraph['value'] =>
+	value.map((node, index) =>
+		index === 1 && node.type === 'PLAIN_TEXT' ? { ...node, value: node.value.replace(/^\s+/, '') } : node
+	);
+
+const resolveParagraphNodes = (value: Paragraph['value']): Paragraph['value'] | null => {
+	if (value[0]?.type === 'LINK') {
+		const label = value[0].value.label;
+		const labelText = (Array.isArray(label) ? label[0] : label)?.value?.toString().trim() ?? '';
+		if (labelText === '') {
+			if (value.length === 1) {
+				return null;
+			}
+			if (value.length === 2 && value[1].type === 'PLAIN_TEXT' && value[1].value.trim() === '') {
+				return null;
+			}
+			return trimForceTrimNodes(value);
+		}
+	}
+
+	return value;
+};
+
+const serializeParagraphValue = (value: Paragraph['value'], context: ISerializeContext): string | null => {
+	const nodes = resolveParagraphNodes(value);
+	return nodes ? serializeInline(nodes, context) : null;
+};
+
+const plainTextParagraphValue = (value: Paragraph['value'], context: ISerializeContext): string | null => {
+	const nodes = resolveParagraphNodes(value);
+	return nodes ? plainTextInline(nodes, context) : null;
+};
+
+const serializeBlock = (block: Paragraph | Blocks, context: ISerializeContext): string => {
+	switch (block.type) {
+		case 'PARAGRAPH':
+			return serializeParagraphValue(block.value, context) ?? '';
+		case 'HEADING':
+			return `${'#'.repeat(block.level)} ${serializeInline(block.value, context)}`;
+		case 'QUOTE':
+			return block.value
+				.map(item => serializeParagraphValue(item.value, context) ?? '')
+				.map(line => `> ${line}`)
+				.join('\n>\n');
+		case 'UNORDERED_LIST':
+			return block.value.map(item => `- ${serializeInline(item.value, context)}`).join('\n');
+		case 'ORDERED_LIST':
+			return block.value.map(item => `${item.number}. ${serializeInline(item.value, context)}`).join('\n');
+		case 'TASKS':
+			return block.value.map(item => `- [${item.status ? 'x' : ' '}] ${serializeInline(item.value, context)}`).join('\n');
+		case 'CODE': {
+			const lines = block.value.map(line => line.value.value).join('\n');
+			let fence = '```';
+			while (lines.includes(fence)) {
+				fence += '`';
+			}
+			return `${fence}\n${lines}\n${fence}`;
+		}
+		default:
+			return '';
+	}
+};
+
+const plainTextBlock = (block: Paragraph | Blocks, context: ISerializeContext): string => {
+	switch (block.type) {
+		case 'PARAGRAPH':
+			return plainTextParagraphValue(block.value, context) ?? '';
+		case 'HEADING':
+			return plainTextInline(block.value, context);
+		case 'QUOTE':
+			return block.value.map(item => plainTextParagraphValue(item.value, context) ?? '').join('\n');
+		case 'UNORDERED_LIST':
+		case 'ORDERED_LIST':
+		case 'TASKS':
+			return block.value.map(item => plainTextInline(item.value, context)).join('\n');
+		case 'CODE':
+			return block.value.map(line => line.value.value).join('\n');
+		default:
+			return '';
+	}
+};
+
+export const buildRenderSegments = (tokens: Root, context: ISerializeContext): TRenderSegment[] => {
+	if (isBigEmojiOnly(tokens)) {
+		const content = tokens[0].value.map(emojiBlock => serializeEmoji(emojiBlock, context)).join('');
+		const accessibilityLabel = tokens[0].value.map(emojiBlock => emojiDisplayText(emojiBlock, context)).join(' ');
+		return [{ type: 'markdown', content, accessibilityLabel }];
+	}
+
+	const segments: TRenderSegment[] = [];
+
+	for (const block of tokens as Array<Paragraph | Blocks>) {
+		if (block.type === 'KATEX') {
+			segments.push({ type: 'markdown', content: `$$\n${block.value}\n$$`, accessibilityLabel: block.value });
+			continue;
+		}
+
+		if (block.type === 'LINE_BREAK') {
+			segments.push({ type: 'linebreak' });
+			continue;
+		}
+
+		const content = serializeBlock(block, context);
+		if (content) {
+			segments.push({ type: 'markdown', content, accessibilityLabel: plainTextBlock(block, context) });
+		}
+	}
+
+	return segments;
+};
diff --git a/app/containers/markdown/styles.ts b/app/containers/markdown/styles.ts
index 42f2d7c04f0..40c5fa99d62 100644
--- a/app/containers/markdown/styles.ts
+++ b/app/containers/markdown/styles.ts
@@ -1,34 +1,13 @@
-import { Platform, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import sharedStyles from '~/views/Styles';
 
-const codeFontFamily = Platform.select({
-	ios: { fontFamily: 'Courier New' },
-	android: { fontFamily: 'monospace' }
-});
-
 export default StyleSheet.create({
 	blocks: {
 		gap: 2
 	},
-	container: {
-		alignItems: 'flex-start',
-		flexDirection: 'row'
-	},
-	childContainer: {
-		flex: 1
-	},
-	block: {
-		alignItems: 'flex-start',
-		flexDirection: 'row',
-		flexWrap: 'wrap',
-		flex: 1
-	},
-	emph: {
-		fontStyle: 'italic'
-	},
-	del: {
-		textDecorationLine: 'line-through'
+	lineBreak: {
+		height: 8
 	},
 	plainText: {
 		fontSize: 16,
@@ -40,133 +19,9 @@ export default StyleSheet.create({
 		fontSize: 16,
 		...sharedStyles.textRegular
 	},
-	textInfo: {
-		fontStyle: 'italic',
-		fontSize: 16,
-		...sharedStyles.textRegular
-	},
 	textBig: {
 		lineHeight: 43,
 		fontSize: 30,
 		...sharedStyles.textRegular
-	},
-	temp: { opacity: 0.3 },
-	mention: {
-		fontSize: 16,
-		...sharedStyles.textSemibold
-	},
-	paragraph: {
-		marginTop: 0,
-		marginBottom: 0,
-		flexWrap: 'wrap',
-		flexDirection: 'row',
-		alignItems: 'flex-start',
-		justifyContent: 'flex-start'
-	},
-	inlineImage: {
-		width: 300,
-		height: 300
-	},
-	codeInline: {
-		fontSize: 16,
-		lineHeight: 22,
-		...sharedStyles.textRegular,
-		...codeFontFamily,
-		borderWidth: 1,
-		borderRadius: 4,
-		paddingLeft: 2,
-		paddingTop: 2
-	},
-	codeBlock: {
-		borderWidth: 1,
-		borderRadius: 4,
-		padding: 4
-	},
-	codeBlockText: {
-		fontSize: 16,
-		lineHeight: 22,
-		...sharedStyles.textRegular,
-		...codeFontFamily
-	},
-	link: {
-		fontSize: 16,
-		...sharedStyles.textRegular
-	},
-	heading1: {
-		...sharedStyles.textBold,
-		fontSize: 24,
-		lineHeight: 30
-	},
-	heading2: {
-		...sharedStyles.textBold,
-		fontSize: 22,
-		lineHeight: 28
-	},
-	heading3: {
-		...sharedStyles.textSemibold,
-		fontSize: 20,
-		lineHeight: 26
-	},
-	heading4: {
-		...sharedStyles.textSemibold,
-		fontSize: 18,
-		lineHeight: 24
-	},
-	heading5: {
-		...sharedStyles.textMedium,
-		fontSize: 16,
-		lineHeight: 22
-	},
-	heading6: {
-		...sharedStyles.textMedium,
-		fontSize: 14,
-		lineHeight: 20
-	},
-	quote: {
-		height: '100%',
-		width: 2,
-		marginRight: 5
-	},
-	touchableTable: {
-		justifyContent: 'center'
-	},
-	containerTable: {
-		borderBottomWidth: 1,
-		borderRightWidth: 1
-	},
-	table: {
-		borderLeftWidth: 1,
-		borderTopWidth: 1
-	},
-	tableExtraBorders: {
-		borderBottomWidth: 1,
-		borderRightWidth: 1
-	},
-	row: {
-		flexDirection: 'row'
-	},
-	rowBottomBorder: {
-		borderBottomWidth: 1
-	},
-	cell: {
-		justifyContent: 'flex-start',
-		paddingHorizontal: 13,
-		paddingVertical: 6
-	},
-	cellRightBorder: {
-		borderRightWidth: 1
-	},
-	alignCenter: {
-		textAlign: 'center'
-	},
-	alignRight: {
-		textAlign: 'right'
-	},
-	inline: {
-		flexShrink: 1,
-		...sharedStyles.textRegular
-	},
-	listPrefix: {
-		fontVariant: ['tabular-nums']
 	}
 });
diff --git a/app/containers/message/components/Attachments/CollapsibleQuote.tsx b/app/containers/message/components/Attachments/CollapsibleQuote.tsx
index 0490359bf3c..84a3cc3100a 100644
--- a/app/containers/message/components/Attachments/CollapsibleQuote.tsx
+++ b/app/containers/message/components/Attachments/CollapsibleQuote.tsx
@@ -1,6 +1,7 @@
 import { transparentize } from 'color2k';
 import { useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IAttachment } from '~/definitions/IAttachment';
 import { CustomIcon } from '~/containers/CustomIcon';
@@ -90,9 +91,9 @@ const Fields = ({ attachment }: IMessageFields) => {
 		<>
 			{attachment.fields.map(field => (
 				<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-					<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: colors.fontDefault }]}>
+					<PlainText testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: colors.fontDefault }]}>
 						{field.title}
-					</Text>
+					</PlainText>
 					<Markdown msg={field?.value || ''} username={user?.username} />
 				</View>
 			))}
@@ -145,7 +146,7 @@ const CollapsibleQuote = ({ attachment }: IMessageReply) => {
 			<View style={styles.touchableContainer}>
 				<View style={styles.attachmentContainer}>
 					<View style={styles.authorContainer}>
-						<Text style={[styles.title, { color: colors.fontSecondaryInfo }]}>{attachment.title}</Text>
+						<PlainText style={[styles.title, { color: colors.fontSecondaryInfo }]}>{attachment.title}</PlainText>
 					</View>
 					{!collapsed && <AttText text={attachment.text} />}
 					{!collapsed && <Fields attachment={attachment} />}
diff --git a/app/containers/message/components/Attachments/Image/ImageBadge.tsx b/app/containers/message/components/Attachments/Image/ImageBadge.tsx
index 802eb2d6ebd..e1364cc233f 100644
--- a/app/containers/message/components/Attachments/Image/ImageBadge.tsx
+++ b/app/containers/message/components/Attachments/Image/ImageBadge.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import sharedStyles from '~/views/Styles';
 import { useTheme } from '~/theme';
@@ -21,7 +22,7 @@ const ImageBadge = ({ title }: IImageBadge) => {
 	const { colors } = useTheme();
 	return (
 		<View style={[styles.container, { backgroundColor: colors.surfaceNeutral }]}>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</Text>
+			<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</PlainText>
 		</View>
 	);
 };
diff --git a/app/containers/message/components/Attachments/Reply.tsx b/app/containers/message/components/Attachments/Reply.tsx
index 264dff3de55..5183aa7c93f 100644
--- a/app/containers/message/components/Attachments/Reply.tsx
+++ b/app/containers/message/components/Attachments/Reply.tsx
@@ -1,5 +1,6 @@
 import { type ReactNode, useState } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Image } from 'expo-image';
 
 import { type IAttachment } from '~/definitions';
@@ -36,7 +37,7 @@ const styles = StyleSheet.create({
 		paddingLeft: 8
 	},
 	backdrop: {
-		...StyleSheet.absoluteFillObject
+		...StyleSheet.absoluteFill
 	},
 	authorContainer: {
 		flex: 1,
@@ -95,12 +96,12 @@ const Title = ({ attachment }: { attachment: IAttachment }) => {
 	return (
 		<View style={styles.authorContainer}>
 			{attachment.author_name ? (
-				<Text numberOfLines={1} style={[styles.author, { color: colors.fontHint }]}>
+				<PlainText numberOfLines={1} style={[styles.author, { color: colors.fontHint }]}>
 					{attachment.author_name}
-				</Text>
+				</PlainText>
 			) : null}
-			{time ? <Text style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</Text> : null}
-			{attachment.title ? <Text style={[styles.title, { color: colors.fontDefault }]}>{attachment.title}</Text> : null}
+			{time ? <PlainText style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</PlainText> : null}
+			{attachment.title ? <PlainText style={[styles.title, { color: colors.fontDefault }]}>{attachment.title}</PlainText> : null}
 		</View>
 	);
 };
@@ -150,7 +151,7 @@ const Fields = ({ attachment }: { attachment: IAttachment }) => {
 		<View style={styles.fieldsContainer}>
 			{attachment.fields.map(field => (
 				<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
-					<Text style={[styles.fieldTitle, { color: colors.fontDefault }]}>{field.title}</Text>
+					<PlainText style={[styles.fieldTitle, { color: colors.fontDefault }]}>{field.title}</PlainText>
 					<Markdown msg={field?.value || ''} username={user?.username} />
 				</View>
 			))}
diff --git a/app/containers/message/components/Attachments/Video.tsx b/app/containers/message/components/Attachments/Video.tsx
index 538d6b9f41e..9d8828f65be 100644
--- a/app/containers/message/components/Attachments/Video.tsx
+++ b/app/containers/message/components/Attachments/Video.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IUserMessage } from '~/definitions';
 import { type IAttachment } from '~/definitions/IAttachment';
@@ -45,7 +46,7 @@ const CancelIndicator = () => {
 	const { colors } = useTheme();
 	return (
 		<View style={styles.cancelContainer}>
-			<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{I18n.t('Cancel')}</Text>
+			<PlainText style={[styles.text, { color: colors.fontSecondaryInfo }]}>{I18n.t('Cancel')}</PlainText>
 		</View>
 	);
 };
diff --git a/app/containers/message/components/Broadcast.tsx b/app/containers/message/components/Broadcast.tsx
index e6b6a21ba12..c69e8eaa24a 100644
--- a/app/containers/message/components/Broadcast.tsx
+++ b/app/containers/message/components/Broadcast.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import MessageActionTouchable from './Touchable/MessageActionTouchable';
 import { CustomIcon } from '~/containers/CustomIcon';
@@ -26,7 +27,7 @@ const Broadcast = () => {
 					testID='message-broadcast-reply'>
 					<View style={styles.buttonInnerContainer}>
 						<CustomIcon name='arrow-back' size={20} color={colors.fontWhite} />
-						<Text style={[styles.buttonText, { color: colors.fontWhite }]}>{I18n.t('Reply')}</Text>
+						<PlainText style={[styles.buttonText, { color: colors.fontWhite }]}>{I18n.t('Reply')}</PlainText>
 					</View>
 				</MessageActionTouchable>
 			</View>
diff --git a/app/containers/message/components/CallButton.tsx b/app/containers/message/components/CallButton.tsx
index 774d96074f0..f01e6b1d5e8 100644
--- a/app/containers/message/components/CallButton.tsx
+++ b/app/containers/message/components/CallButton.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import MessageActionTouchable from './Touchable/MessageActionTouchable';
 import { BUTTON_HIT_SLOP } from '../utils';
@@ -19,7 +20,7 @@ const CallButton = () => {
 				hitSlop={BUTTON_HIT_SLOP}>
 				<View style={styles.buttonInnerContainer}>
 					<CustomIcon name='video' size={16} color={colors.fontWhite} />
-					<Text style={[styles.buttonText, { color: colors.fontWhite }]}>{I18n.t('Click_to_join')}</Text>
+					<PlainText style={[styles.buttonText, { color: colors.fontWhite }]}>{I18n.t('Click_to_join')}</PlainText>
 				</View>
 			</MessageActionTouchable>
 		</View>
diff --git a/app/containers/message/components/Content/EncryptedContent.tsx b/app/containers/message/components/Content/EncryptedContent.tsx
index f063cee95bc..186190d63bf 100644
--- a/app/containers/message/components/Content/EncryptedContent.tsx
+++ b/app/containers/message/components/Content/EncryptedContent.tsx
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '~/i18n';
 import styles from '~/containers/message/styles';
@@ -10,12 +10,12 @@ const EncryptedContent = () => {
 
 	return (
 		<ContentWrapper>
-			<Text
+			<PlainText
 				style={[styles.textInfo, { color: colors.fontSecondaryInfo }]}
 				accessibilityLabel={I18n.t('Encrypted_message')}
 				testID='message-encrypted'>
 				{I18n.t('Encrypted_message')}
-			</Text>
+			</PlainText>
 		</ContentWrapper>
 	);
 };
diff --git a/app/containers/message/components/Content/IgnoredContent.tsx b/app/containers/message/components/Content/IgnoredContent.tsx
index 6a4cf1e0f32..048b3c739ed 100644
--- a/app/containers/message/components/Content/IgnoredContent.tsx
+++ b/app/containers/message/components/Content/IgnoredContent.tsx
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '~/i18n';
 import styles from '~/containers/message/styles';
@@ -12,9 +12,9 @@ const IgnoredContent = () => {
 
 	return (
 		<ContentWrapper>
-			<Text style={[styles.textInfo, { color: colors.fontSecondaryInfo }]} testID={`message-ignored-${messageText}`}>
+			<PlainText style={[styles.textInfo, { color: colors.fontSecondaryInfo }]} testID={`message-ignored-${messageText}`}>
 				{I18n.t('Message_Ignored')}
-			</Text>
+			</PlainText>
 		</ContentWrapper>
 	);
 };
diff --git a/app/containers/message/components/Discussion.tsx b/app/containers/message/components/Discussion.tsx
index ef04f2196d8..d73867a690d 100644
--- a/app/containers/message/components/Discussion.tsx
+++ b/app/containers/message/components/Discussion.tsx
@@ -1,4 +1,5 @@
 import { Text, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import MessageActionTouchable from './Touchable/MessageActionTouchable';
 import { BUTTON_HIT_SLOP, formatMessageCount } from '../utils';
@@ -24,8 +25,10 @@ const Discussion = () => {
 	const onDiscussionPress = useOnDiscussionPress();
 	return (
 		<View style={{ gap: 4 }}>
-			<Text style={[styles.startedDiscussion, { color: colors.fontSecondaryInfo }]}>{I18n.t('Started_discussion')}</Text>
-			<Text style={[styles.discussionText, { color: colors.fontDefault }]}>{messageText}</Text>
+			<PlainText style={[styles.startedDiscussion, { color: colors.fontSecondaryInfo }]}>
+				{I18n.t('Started_discussion')}
+			</PlainText>
+			<PlainText style={[styles.discussionText, { color: colors.fontDefault }]}>{messageText}</PlainText>
 			<View style={[styles.buttonContainer, { gap: 8 }]}>
 				<MessageActionTouchable
 					onPress={() => onDiscussionPress?.(drid)}
@@ -36,7 +39,7 @@ const Discussion = () => {
 						<Text style={[styles.buttonText, { color: colors.fontWhite }]}>{buttonText}</Text>
 					</View>
 				</MessageActionTouchable>
-				<Text style={[styles.time, { color: colors.fontSecondaryInfo }]}>{time}</Text>
+				<PlainText style={[styles.time, { color: colors.fontSecondaryInfo }]}>{time}</PlainText>
 			</View>
 		</View>
 	);
diff --git a/app/containers/message/components/Emoji.tsx b/app/containers/message/components/Emoji.tsx
index 6dbde7a684c..c24d557b544 100644
--- a/app/containers/message/components/Emoji.tsx
+++ b/app/containers/message/components/Emoji.tsx
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import useShortnameToUnicode from '~/lib/hooks/useShortnameToUnicode';
 import { useCustomEmoji } from '~/lib/hooks/useCustomEmoji';
@@ -13,7 +13,7 @@ const Emoji = ({ content, standardEmojiStyle, customEmojiStyle }: IMessageEmoji)
 	if (emoji) {
 		return <CustomEmoji key={content} style={customEmojiStyle} emoji={emoji} />;
 	}
-	return <Text style={standardEmojiStyle}>{formatShortnameToUnicode(content)}</Text>;
+	return <PlainText style={standardEmojiStyle}>{formatShortnameToUnicode(content)}</PlainText>;
 };
 
 export default Emoji;
diff --git a/app/containers/message/components/MessageContextMenu.ios.tsx b/app/containers/message/components/MessageContextMenu.ios.tsx
new file mode 100644
index 00000000000..bf653db0d59
--- /dev/null
+++ b/app/containers/message/components/MessageContextMenu.ios.tsx
@@ -0,0 +1,60 @@
+import { type ReactElement } from 'react';
+import { Host } from '@expo/ui';
+import { ContextMenu, RNHostView, Text, VStack } from '@expo/ui/swift-ui';
+import { font, foregroundStyle, frame, lineLimit, padding } from '@expo/ui/swift-ui/modifiers';
+import { View } from 'react-native';
+
+import ContextMenuButton from '~/containers/ContextMenuButton/ContextMenuButton.ios';
+import { useTheme } from '~/theme';
+import { useMessageContextMenu } from '../hooks/useMessageContextMenu';
+
+const PREVIEW_WIDTH = 300;
+
+const MessageContextMenu = ({ children }: { children: ReactElement }) => {
+	const { colors, theme } = useTheme();
+	const { enabled, options, author, text, width } = useMessageContextMenu();
+
+	if (!enabled) {
+		return children;
+	}
+
+	return (
+		<Host style={{ width }} matchContents={{ vertical: true }} colorScheme={theme === 'light' ? 'light' : 'dark'}>
+			<ContextMenu>
+				<ContextMenu.Trigger>
+					<RNHostView matchContents>
+						<View style={{ width }}>{children}</View>
+					</RNHostView>
+				</ContextMenu.Trigger>
+				<ContextMenu.Preview>
+					<VStack
+						alignment='leading'
+						spacing={4}
+						modifiers={[frame({ width: PREVIEW_WIDTH, alignment: 'leading' }), padding({ all: 16 })]}>
+						<Text modifiers={[font({ textStyle: 'headline' }), foregroundStyle(colors.fontTitlesLabels), lineLimit(1)]}>
+							{author}
+						</Text>
+						{text ? (
+							<Text modifiers={[font({ textStyle: 'body' }), foregroundStyle(colors.fontDefault), lineLimit(8)]}>{text}</Text>
+						) : null}
+					</VStack>
+				</ContextMenu.Preview>
+				<ContextMenu.Items>
+					{options.map(option => (
+						<ContextMenuButton
+							key={option.testID ?? option.title}
+							testID={option.testID}
+							title={option.title}
+							icon={option.icon}
+							danger={option.danger}
+							enabled={option.enabled !== false}
+							onPress={option.onPress}
+						/>
+					))}
+				</ContextMenu.Items>
+			</ContextMenu>
+		</Host>
+	);
+};
+
+export default MessageContextMenu;
diff --git a/app/containers/message/components/MessageContextMenu.tsx b/app/containers/message/components/MessageContextMenu.tsx
new file mode 100644
index 00000000000..a5be5c2b79a
--- /dev/null
+++ b/app/containers/message/components/MessageContextMenu.tsx
@@ -0,0 +1,5 @@
+import { type ReactElement } from 'react';
+
+const MessageContextMenu = ({ children }: { children: ReactElement }) => children;
+
+export default MessageContextMenu;
diff --git a/app/containers/message/components/Thread.tsx b/app/containers/message/components/Thread.tsx
index 01965c8ae49..14a7ef67cba 100644
--- a/app/containers/message/components/Thread.tsx
+++ b/app/containers/message/components/Thread.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import styles from '../styles';
 import ThreadDetails from '~/containers/ThreadDetails';
@@ -35,7 +36,7 @@ const Thread = () => {
 				accessibilityLabel={I18n.t('View_Thread')}
 				style={[styles.button, { backgroundColor }]}
 				testID={`message-thread-button-${messageText}`}>
-				<Text style={[styles.buttonText, { color: textColor }]}>{I18n.t('View_Thread')}</Text>
+				<PlainText style={[styles.buttonText, { color: textColor }]}>{I18n.t('View_Thread')}</PlainText>
 			</MessageActionTouchable>
 			<ThreadDetails
 				item={{
diff --git a/app/containers/message/components/Time.tsx b/app/containers/message/components/Time.tsx
index ad1861e1eca..efdd815955d 100644
--- a/app/containers/message/components/Time.tsx
+++ b/app/containers/message/components/Time.tsx
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import dayjs from '~/lib/dayjs';
 import { useTheme } from '~/theme';
@@ -13,7 +13,7 @@ const MessageTime = () => {
 
 	const time = dayjs(ts).format(timeFormat);
 
-	return <Text style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</Text>;
+	return <PlainText style={[messageStyles.time, { color: colors.fontSecondaryInfo }]}>{time}</PlainText>;
 };
 
 export default MessageTime;
diff --git a/app/containers/message/components/Touchable/MessageActionTouchable.tsx b/app/containers/message/components/Touchable/MessageActionTouchable.tsx
index 37d4e543cfe..39bd2fa3e12 100644
--- a/app/containers/message/components/Touchable/MessageActionTouchable.tsx
+++ b/app/containers/message/components/Touchable/MessageActionTouchable.tsx
@@ -2,17 +2,20 @@ import { type ReactNode, type FC } from 'react';
 import { Pressable, type PressableProps } from 'react-native';
 
 import { useMessageLongPress } from '~/containers/message/stores/MessageStore';
+import { useIsMessageContextMenuEnabled } from '~/containers/message/hooks/useMessageContextMenu';
 
 interface IProps extends PressableProps {
 	children: ReactNode;
 	onLongPress?: () => void;
 }
 
-const MessageActionTouchable: FC<IProps> = ({ children, ...props }) => {
-	const onLongPress = useMessageLongPress();
+const MessageActionTouchable: FC<IProps> = ({ children, onLongPress, ...props }) => {
+	const onMessageLongPress = useMessageLongPress();
+	const isContextMenuEnabled = useIsMessageContextMenuEnabled();
+	const defaultLongPress = isContextMenuEnabled ? undefined : onMessageLongPress;
 
 	return (
-		<Pressable onLongPress={onLongPress} {...props}>
+		<Pressable onLongPress={onLongPress ?? defaultLongPress} {...props}>
 			{children}
 		</Pressable>
 	);
diff --git a/app/containers/message/components/Touchable/MessageTouchable.tsx b/app/containers/message/components/Touchable/MessageTouchable.tsx
index c7c684c8e25..e12125acf02 100644
--- a/app/containers/message/components/Touchable/MessageTouchable.tsx
+++ b/app/containers/message/components/Touchable/MessageTouchable.tsx
@@ -2,11 +2,13 @@ import { useTheme } from '~/theme';
 import MessageA11yOrder from '../MessageA11yOrder';
 import MessageA11yIndex from '../MessageA11yIndex';
 import Touch from './Touch';
+import MessageContextMenu from '../MessageContextMenu';
 import Message, { type TMessageProps } from '../Message/Message';
 import { useLastFocusedMessageRef } from '~/lib/a11y/useLastFocusedMessageRef';
 import { useMessageAccessibilityLabel } from '~/containers/message/hooks/useMessageAccessibilityLabel';
 import { useMessageAccessibilityActions } from '~/containers/message/hooks/useMessageAccessibilityActions';
 import { useMessageAccessibilityHint } from '~/containers/message/hooks/useMessageAccessibilityHint';
+import { useIsMessageContextMenuEnabled } from '~/containers/message/hooks/useMessageContextMenu';
 import { useIsBeingEdited } from '~/containers/message/stores/MessageActionStore';
 import {
 	useIsInfoMessage,
@@ -30,6 +32,7 @@ const MessageTouchable = (props: TMessageProps) => {
 	const accessibilityLabelValue = useMessageAccessibilityLabel();
 	const accessibilityActions = useMessageAccessibilityActions(!tappable);
 	const accessibilityHint = useMessageAccessibilityHint();
+	const isContextMenuEnabled = useIsMessageContextMenuEnabled();
 
 	let backgroundColor = undefined;
 	if (isBeingEdited) {
@@ -55,23 +58,25 @@ const MessageTouchable = (props: TMessageProps) => {
 	return (
 		<MessageA11yOrder>
 			<MessageA11yIndex index={1}>
-				<Touch
-					componentRef={touchRef}
-					onLongPress={handleLongPress}
-					onPress={onPressAction}
-					disabled={!tappable}
-					style={{ backgroundColor }}
-					testID={isBeingEdited ? `message-editing-${id}` : undefined}
-					accessible
-					accessibilityRole='button'
-					accessibilityLabel={accessibilityLabelValue}
-					accessibilityHint={accessibilityHint}
-					accessibilityActions={accessibilityActions}
-					onAccessibilityAction={e => {
-						if (e.nativeEvent.actionName === 'showActions') handleLongPress();
-					}}>
-					<Message isPreview={props.isPreview} />
-				</Touch>
+				<MessageContextMenu>
+					<Touch
+						componentRef={touchRef}
+						onLongPress={isContextMenuEnabled ? undefined : handleLongPress}
+						onPress={onPressAction}
+						disabled={!tappable}
+						style={{ backgroundColor }}
+						testID={isBeingEdited ? `message-editing-${id}` : undefined}
+						accessible
+						accessibilityRole='button'
+						accessibilityLabel={accessibilityLabelValue}
+						accessibilityHint={accessibilityHint}
+						accessibilityActions={accessibilityActions}
+						onAccessibilityAction={e => {
+							if (e.nativeEvent.actionName === 'showActions') handleLongPress();
+						}}>
+						<Message isPreview={props.isPreview} />
+					</Touch>
+				</MessageContextMenu>
 			</MessageA11yIndex>
 		</MessageA11yOrder>
 	);
diff --git a/app/containers/message/components/Urls.tsx b/app/containers/message/components/Urls.tsx
index d5fcb29003f..362112651d9 100644
--- a/app/containers/message/components/Urls.tsx
+++ b/app/containers/message/components/Urls.tsx
@@ -1,5 +1,6 @@
 import { useContext, useEffect, useLayoutEffect, useState, type ReactElement } from 'react';
-import { StyleSheet, Text, View, type ViewStyle } from 'react-native';
+import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { Image } from 'expo-image';
 import axios from 'axios';
@@ -49,14 +50,14 @@ const UrlContent = ({ title, description }: { title: string; description: string
 	return (
 		<View style={styles.textContainer}>
 			{title ? (
-				<Text style={[styles.title, { color: colors.fontInfo }]} numberOfLines={2}>
+				<PlainText style={[styles.title, { color: colors.fontInfo }]} numberOfLines={2}>
 					{title}
-				</Text>
+				</PlainText>
 			) : null}
 			{description ? (
-				<Text style={[styles.description, { color: colors.fontSecondaryInfo }]} numberOfLines={2}>
+				<PlainText style={[styles.description, { color: colors.fontSecondaryInfo }]} numberOfLines={2}>
 					{description}
-				</Text>
+				</PlainText>
 			) : null}
 		</View>
 	);
diff --git a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
index 771965e3b26..f2c9de2ced3 100644
--- a/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
+++ b/app/containers/message/components/__tests__/__snapshots__/Message.test.tsx.snap
@@ -147,60 +147,63 @@ exports[`Story Snapshots: Archived should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -224,6 +227,7 @@ exports[`Story Snapshots: Archived should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -241,11 +245,13 @@ exports[`Story Snapshots: Archived should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -340,6 +346,9 @@ exports[`Story Snapshots: Archived should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -389,57 +398,9 @@ exports[`Story Snapshots: Archived should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This message is inside an archived room"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <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>
+                          This message is inside an archived room
                         </Text>
                       </View>
                     </View>
@@ -602,60 +563,63 @@ exports[`Story Snapshots: ArchivedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -679,6 +643,7 @@ exports[`Story Snapshots: ArchivedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -696,11 +661,13 @@ exports[`Story Snapshots: ArchivedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -804,6 +771,9 @@ exports[`Story Snapshots: ArchivedLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -844,57 +814,9 @@ exports[`Story Snapshots: ArchivedLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This message is inside an archived room"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <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>
+                          This message is inside an archived room
                         </Text>
                       </View>
                     </View>
@@ -1064,134 +986,140 @@ exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] =
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
-                            }
-                          }
-                          transition={null}
-                          width={36}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={36}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 36,
+                              "width": 36,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={36}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -1258,6 +1186,9 @@ exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] =
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1387,6 +1318,9 @@ exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] =
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Rocket.Chat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -1417,114 +1351,9 @@ exports[`Story Snapshots: AttachmentWithTextAndLink should match snapshot 1`] =
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Rocket.Chat, the best open source chat"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      onLongPress={[Function]}
-                                      onPress={[Function]}
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#095AD2",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Rocket.Chat"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                              {
-                                                "color": "#095AD2",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Rocket.Chat
-                                        </Text>
-                                      </Text>
-                                    </Text>
-                                    <Text
-                                      accessibilityLabel=", the best open source chat"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      , the best open source chat
-                                    </Text>
-                                  </Text>
+                                  [Rocket\\.Chat](&lt;//Rocket.Chat&gt;), the best open source chat
                                 </Text>
                               </View>
                             </View>
@@ -1867,134 +1696,140 @@ exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapsh
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -2070,6 +1905,9 @@ exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapsh
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -2190,6 +2028,9 @@ exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapsh
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Rocket.Chat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -2220,114 +2061,9 @@ exports[`Story Snapshots: AttachmentWithTextAndLinkLargeFont should match snapsh
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Rocket.Chat, the best open source chat"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      onLongPress={[Function]}
-                                      onPress={[Function]}
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#095AD2",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Rocket.Chat"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                              {
-                                                "color": "#095AD2",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Rocket.Chat
-                                        </Text>
-                                      </Text>
-                                    </Text>
-                                    <Text
-                                      accessibilityLabel=", the best open source chat"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      , the best open source chat
-                                    </Text>
-                                  </Text>
+                                  [Rocket\\.Chat](&lt;//Rocket.Chat&gt;), the best open source chat
                                 </Text>
                               </View>
                             </View>
@@ -2670,134 +2406,140 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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="no.avatar's avatar"
-                        accessible={true}
-                        style={{}}
-                      >
-                        <ViewManagerAdapter_ExpoImage
-                          borderRadius={4}
-                          containerViewRef={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
-                            }
-                          }
-                          transition={null}
-                          width={36}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="no.avatar's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={36}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/no.avatar?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 36,
+                              "width": 36,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={36}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -2864,6 +2606,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         no.avatar
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2913,57 +2658,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This message has no avatar."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="This message has no avatar."
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              This message has no avatar.
-                            </Text>
-                          </Text>
+                          This message has no avatar\\.
                         </Text>
                       </View>
                     </View>
@@ -3121,60 +2818,63 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -3198,6 +2898,7 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -3215,11 +2916,13 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -3314,6 +3017,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3363,57 +3069,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This message uses the user's profile picture as the avatar."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <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>
+                          This message uses the user's profile picture as the avatar\\.
                         </Text>
                       </View>
                     </View>
@@ -3571,60 +3229,63 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -3664,7 +3325,7 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                           😄
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -3759,6 +3420,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3808,57 +3472,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This message uses a Unicode emoji as the avatar."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <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>
+                          This message uses a Unicode emoji as the avatar\\.
                         </Text>
                       </View>
                     </View>
@@ -4016,60 +3632,63 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -4103,6 +3722,7 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -4117,12 +3737,14 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                                 "width": 36,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={36}
                           />
                         </View>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -4217,6 +3839,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4266,57 +3891,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This message uses a custom animated emoji as the avatar."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <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>
+                          This message uses a custom animated emoji as the avatar\\.
                         </Text>
                       </View>
                     </View>
@@ -4474,60 +4051,63 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -4561,6 +4141,7 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -4575,12 +4156,14 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                                 "width": 36,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={36}
                           />
                         </View>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -4675,6 +4258,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4724,57 +4310,9 @@ exports[`Story Snapshots: Avatar should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This message uses a custom static emoji as the avatar."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <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>
+                          This message uses a custom static emoji as the avatar\\.
                         </Text>
                       </View>
                     </View>
@@ -4945,60 +4483,63 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -5022,6 +4563,7 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -5039,11 +4581,13 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -5138,6 +4682,9 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -5187,57 +4734,9 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -5395,60 +4894,63 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -5472,6 +4974,7 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -5489,11 +4992,13 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -5588,6 +5093,9 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -5637,57 +5145,9 @@ exports[`Story Snapshots: Basic should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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={
-                                [
-                                  {
-                                    "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>
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\\.
                         </Text>
                       </View>
                     </View>
@@ -5857,134 +5317,140 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -6060,6 +5526,9 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -6100,57 +5569,9 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -6308,60 +5729,63 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -6385,6 +5809,7 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -6402,11 +5827,13 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -6510,6 +5937,9 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -6550,57 +5980,9 @@ exports[`Story Snapshots: BasicLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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={
-                                [
-                                  {
-                                    "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>
+                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua\\.
                         </Text>
                       </View>
                     </View>
@@ -6771,60 +6153,63 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -6848,6 +6233,7 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -6865,11 +6251,13 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -6964,6 +6352,9 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -7012,90 +6403,11 @@ exports[`Story Snapshots: BlockQuote should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="Testing block quote"
                         >
-                          <View
-                            style={
-                              [
-                                {
-                                  "height": "100%",
-                                  "marginRight": 5,
-                                  "width": 2,
-                                },
-                                {
-                                  "backgroundColor": "#CBCED1",
-                                },
-                              ]
-                            }
-                          />
-                          <View
-                            style={
-                              {
-                                "flex": 1,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Testing block quote"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Testing block quote
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                          &gt; Testing block quote
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -7253,60 +6565,63 @@ Testing block quote."
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -7330,6 +6645,7 @@ Testing block quote."
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -7347,11 +6663,13 @@ Testing block quote."
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -7446,6 +6764,9 @@ Testing block quote."
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -7495,142 +6816,15 @@ Testing block quote"
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="Testing block quote"
                         >
-                          <View
-                            style={
-                              [
-                                {
-                                  "height": "100%",
-                                  "marginRight": 5,
-                                  "width": 2,
-                                },
-                                {
-                                  "backgroundColor": "#CBCED1",
-                                },
-                              ]
-                            }
-                          />
-                          <View
-                            style={
-                              {
-                                "flex": 1,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Testing block quote"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Testing block quote
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                          &gt; Testing block quote
+                        </Text>
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Testing block quote"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Testing block quote"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Testing block quote
-                            </Text>
-                          </Text>
+                          Testing block quote
                         </Text>
                       </View>
                     </View>
@@ -7801,60 +6995,63 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -7878,6 +7075,7 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -7895,11 +7093,13 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -8003,6 +7203,9 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -8042,90 +7245,11 @@ exports[`Story Snapshots: BlockQuoteLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="Testing block quote"
                         >
-                          <View
-                            style={
-                              [
-                                {
-                                  "height": "100%",
-                                  "marginRight": 5,
-                                  "width": 2,
-                                },
-                                {
-                                  "backgroundColor": "#CBCED1",
-                                },
-                              ]
-                            }
-                          />
-                          <View
-                            style={
-                              {
-                                "flex": 1,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Testing block quote"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Testing block quote
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                          &gt; Testing block quote
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -8283,60 +7407,63 @@ Testing block quote."
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -8360,6 +7487,7 @@ Testing block quote."
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -8377,11 +7505,13 @@ Testing block quote."
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -8485,6 +7615,9 @@ Testing block quote."
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -8525,142 +7658,15 @@ Testing block quote"
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "alignItems": "flex-start",
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="Testing block quote"
                         >
-                          <View
-                            style={
-                              [
-                                {
-                                  "height": "100%",
-                                  "marginRight": 5,
-                                  "width": 2,
-                                },
-                                {
-                                  "backgroundColor": "#CBCED1",
-                                },
-                              ]
-                            }
-                          />
-                          <View
-                            style={
-                              {
-                                "flex": 1,
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Testing block quote"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Testing block quote
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                          &gt; Testing block quote
+                        </Text>
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Testing block quote"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Testing block quote"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Testing block quote
-                            </Text>
-                          </Text>
+                          Testing block quote
                         </Text>
                       </View>
                     </View>
@@ -8831,60 +7837,63 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -8908,6 +7917,7 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -8925,11 +7935,13 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -9024,6 +8036,9 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -9073,57 +8088,9 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Broadcasted message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Broadcasted message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Broadcasted message
-                            </Text>
-                          </Text>
+                          Broadcasted message
                         </Text>
                       </View>
                     </View>
@@ -9226,6 +8193,9 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
                             
                           </Text>
                           <Text
+                            accessibilityLabel="Reply"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               [
                                 {
@@ -9417,60 +8387,63 @@ exports[`Story Snapshots: BroadcastLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -9494,6 +8467,7 @@ exports[`Story Snapshots: BroadcastLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -9511,11 +8485,13 @@ exports[`Story Snapshots: BroadcastLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -9619,6 +8595,9 @@ exports[`Story Snapshots: BroadcastLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -9659,57 +8638,9 @@ exports[`Story Snapshots: BroadcastLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Broadcasted message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Broadcasted message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Broadcasted message
-                            </Text>
-                          </Text>
+                          Broadcasted message
                         </Text>
                       </View>
                     </View>
@@ -9812,6 +8743,9 @@ exports[`Story Snapshots: BroadcastLargeFont should match snapshot 1`] = `
                             
                           </Text>
                           <Text
+                            accessibilityLabel="Reply"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               [
                                 {
@@ -10003,60 +8937,63 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -10080,6 +9017,7 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -10097,11 +9035,13 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -10196,6 +9136,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -10245,57 +9188,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -10390,6 +9285,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                               }
                             >
                               <Text
+                                accessibilityLabel="Title collapsed"
+                                accessibilityRole="text"
+                                accessible={true}
                                 style={
                                   [
                                     {
@@ -10608,60 +9506,63 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -10685,6 +9586,7 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -10702,11 +9604,13 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -10801,6 +9705,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -10930,6 +9837,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Title collapsed"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -10960,57 +9870,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Title collapsed"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Title collapsed"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Title collapsed
-                                    </Text>
-                                  </Text>
+                                  Title collapsed
                                 </Text>
                               </View>
                               <View
@@ -11036,6 +9898,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -11064,57 +9929,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -11131,6 +9948,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -11159,57 +9979,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -11231,57 +10003,9 @@ exports[`Story Snapshots: CollapsedAttachments should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -11452,60 +10176,63 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -11529,6 +10256,7 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -11546,11 +10274,13 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -11654,6 +10384,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -11694,57 +10427,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -11839,6 +10524,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                               }
                             >
                               <Text
+                                accessibilityLabel="Title collapsed"
+                                accessibilityRole="text"
+                                accessible={true}
                                 style={
                                   [
                                     {
@@ -12057,60 +10745,63 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -12134,6 +10825,7 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -12151,11 +10843,13 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -12259,6 +10953,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -12379,6 +11076,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Title collapsed"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -12409,57 +11109,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Title collapsed"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Title collapsed"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Title collapsed
-                                    </Text>
-                                  </Text>
+                                  Title collapsed
                                 </Text>
                               </View>
                               <View
@@ -12485,6 +11137,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -12513,57 +11168,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -12580,6 +11187,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -12608,57 +11218,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -12680,57 +11242,9 @@ exports[`Story Snapshots: CollapsedAttachmentsLargeFont should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -12901,60 +11415,63 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -12978,6 +11495,7 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -12995,11 +11513,13 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -13094,6 +11614,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -13143,57 +11666,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the main message body."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the main message body\\.
                         </Text>
                       </View>
                     </View>
@@ -13290,6 +11765,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                               }
                             >
                               <Text
+                                accessibilityLabel="Collapsed attachment block"
+                                accessibilityRole="text"
+                                accessible={true}
                                 style={
                                   [
                                     {
@@ -13508,60 +11986,63 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -13585,6 +12066,7 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -13602,11 +12084,13 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -13701,6 +12185,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -13830,6 +12317,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Collapsed attachment block"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -13860,57 +12350,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="This attachment text should NOT appear as plain text above the message or duplicate before the block."
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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>
+                                  This attachment text should NOT appear as plain text above the message or duplicate before the block\\.
                                 </Text>
                               </View>
                               <View
@@ -13936,6 +12378,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -13964,57 +12409,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -14031,6 +12428,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -14059,57 +12459,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -14126,6 +12478,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Long field"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -14154,57 +12509,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="This field value could also contribute to duplicate text when expanded."
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "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",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          This field value could also contribute to duplicate text when expanded.
-                                        </Text>
-                                      </Text>
+                                      This field value could also contribute to duplicate text when expanded\\.
                                     </Text>
                                   </View>
                                 </View>
@@ -14220,57 +12527,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="Attachment description that might also leak as duplicate plain text."
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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>
+                            Attachment description that might also leak as duplicate plain text\\.
                           </Text>
                         </View>
                       </View>
@@ -14287,57 +12546,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithText should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the main message body."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the main message body\\.
                         </Text>
                       </View>
                     </View>
@@ -14508,60 +12719,63 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -14585,6 +12799,7 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -14602,11 +12817,13 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -14710,6 +12927,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -14750,57 +12970,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the main message body."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the main message body\\.
                         </Text>
                       </View>
                     </View>
@@ -14897,6 +13069,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                               }
                             >
                               <Text
+                                accessibilityLabel="Collapsed attachment block"
+                                accessibilityRole="text"
+                                accessible={true}
                                 style={
                                   [
                                     {
@@ -15115,60 +13290,63 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -15192,6 +13370,7 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -15209,11 +13388,13 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -15317,6 +13498,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -15437,6 +13621,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Collapsed attachment block"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -15467,57 +13654,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="This attachment text should NOT appear as plain text above the message or duplicate before the block."
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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>
+                                  This attachment text should NOT appear as plain text above the message or duplicate before the block\\.
                                 </Text>
                               </View>
                               <View
@@ -15543,6 +13682,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -15571,57 +13713,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -15638,6 +13732,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -15666,57 +13763,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -15733,6 +13782,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Long field"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -15761,57 +13813,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="This field value could also contribute to duplicate text when expanded."
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "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",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          This field value could also contribute to duplicate text when expanded.
-                                        </Text>
-                                      </Text>
+                                      This field value could also contribute to duplicate text when expanded\\.
                                     </Text>
                                   </View>
                                 </View>
@@ -15827,57 +13831,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="Attachment description that might also leak as duplicate plain text."
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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>
+                            Attachment description that might also leak as duplicate plain text\\.
                           </Text>
                         </View>
                       </View>
@@ -15894,57 +13850,9 @@ exports[`Story Snapshots: CollapsibleAttachmentWithTextLargeFont should match sn
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the main message body."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the main message body\\.
                         </Text>
                       </View>
                     </View>
@@ -16115,60 +14023,63 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -16192,6 +14103,7 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -16209,11 +14121,13 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -16308,6 +14222,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -16459,6 +14376,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -16487,57 +14407,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -16554,6 +14426,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -16582,57 +14457,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -16748,6 +14575,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -16776,57 +14606,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -16843,6 +14625,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -16871,57 +14656,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -17037,6 +14774,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -17065,57 +14805,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -17132,6 +14824,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -17160,57 +14855,9 @@ exports[`Story Snapshots: ColoredAttachments should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -17387,60 +15034,63 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -17464,6 +15114,7 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -17481,11 +15132,13 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -17589,6 +15242,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -17731,6 +15387,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -17759,57 +15418,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -17826,6 +15437,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -17854,57 +15468,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -18020,6 +15586,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -18048,57 +15617,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -18115,6 +15636,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -18143,57 +15667,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -18309,6 +15785,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -18337,57 +15816,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -18404,6 +15835,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -18432,57 +15866,9 @@ exports[`Story Snapshots: ColoredAttachmentsLargeFont should match snapshot 1`]
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -18658,134 +16044,140 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
-                            }
-                          }
-                          transition={null}
-                          width={36}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={36}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 36,
+                              "width": 36,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={36}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -18852,6 +16244,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -18981,6 +16376,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -19012,57 +16410,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields
-                                    </Text>
-                                  </Text>
+                                  Custom fields
                                 </Text>
                               </View>
                               <View
@@ -19088,6 +16438,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -19116,57 +16469,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -19183,6 +16488,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -19211,57 +16519,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -19283,57 +16543,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -19491,60 +16703,63 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -19568,6 +16783,7 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -19585,11 +16801,13 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -19684,6 +16902,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -19813,6 +17034,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -19844,57 +17068,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields
-                                    </Text>
-                                  </Text>
+                                  Custom fields
                                 </Text>
                               </View>
                               <View
@@ -19920,6 +17096,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -19948,57 +17127,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -20015,6 +17146,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -20043,57 +17177,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -20110,6 +17196,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 3"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -20138,57 +17227,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 3"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 3"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 3
-                                        </Text>
-                                      </Text>
+                                      Value 3
                                     </Text>
                                   </View>
                                 </View>
@@ -20205,6 +17246,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 4"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -20233,57 +17277,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 4"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 4"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 4
-                                        </Text>
-                                      </Text>
+                                      Value 4
                                     </Text>
                                   </View>
                                 </View>
@@ -20300,6 +17296,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 5"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -20328,57 +17327,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 5"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 5"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 5
-                                        </Text>
-                                      </Text>
+                                      Value 5
                                     </Text>
                                   </View>
                                 </View>
@@ -20400,57 +17351,9 @@ exports[`Story Snapshots: CustomFields should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -20621,60 +17524,63 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -20698,6 +17604,7 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -20715,11 +17622,13 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -20823,6 +17732,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -20943,6 +17855,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -20974,57 +17889,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields
-                                    </Text>
-                                  </Text>
+                                  Custom fields
                                 </Text>
                               </View>
                               <View
@@ -21050,6 +17917,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -21078,57 +17948,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -21145,6 +17967,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -21173,57 +17998,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -21245,57 +18022,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -21452,134 +18181,140 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -21655,6 +18390,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -21775,6 +18513,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -21806,57 +18547,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields
-                                    </Text>
-                                  </Text>
+                                  Custom fields
                                 </Text>
                               </View>
                               <View
@@ -21882,6 +18575,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -21910,57 +18606,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -21977,6 +18625,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -22005,57 +18656,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 2"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 2
-                                        </Text>
-                                      </Text>
+                                      Value 2
                                     </Text>
                                   </View>
                                 </View>
@@ -22072,6 +18675,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 3"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -22100,57 +18706,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 3"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 3"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 3
-                                        </Text>
-                                      </Text>
+                                      Value 3
                                     </Text>
                                   </View>
                                 </View>
@@ -22167,6 +18725,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 4"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -22195,57 +18756,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 4"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 4"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 4
-                                        </Text>
-                                      </Text>
+                                      Value 4
                                     </Text>
                                   </View>
                                 </View>
@@ -22262,6 +18775,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 5"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -22290,57 +18806,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 5"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 5"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 5
-                                        </Text>
-                                      </Text>
+                                      Value 5
                                     </Text>
                                   </View>
                                 </View>
@@ -22362,57 +18830,9 @@ exports[`Story Snapshots: CustomFieldsLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -22583,60 +19003,63 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="rocket.cat's avatar"
                         accessible={true}
@@ -22660,6 +19083,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -22677,11 +19101,13 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -22776,6 +19202,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         rocket.cat
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -22825,57 +19254,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Fourth message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Fourth message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Fourth message
-                            </Text>
-                          </Text>
+                          Fourth message
                         </Text>
                       </View>
                     </View>
@@ -22897,6 +19278,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="unread"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -22934,6 +19318,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
         }
       />
       <Text
+        accessibilityLabel="November 10, 2017"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -23101,60 +19488,63 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -23178,6 +19568,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -23195,11 +19586,13 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -23294,6 +19687,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -23343,57 +19739,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Third message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Third message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Third message
-                            </Text>
-                          </Text>
+                          Third message
                         </Text>
                       </View>
                     </View>
@@ -23415,6 +19763,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="unread"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -23595,57 +19946,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Second message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Second message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Second message
-                            </Text>
-                          </Text>
+                          Second message
                         </Text>
                       </View>
                     </View>
@@ -23810,60 +20113,63 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="rocket.cat's avatar"
                         accessible={true}
@@ -23887,6 +20193,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -23904,11 +20211,13 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -24003,6 +20312,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         rocket.cat
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -24052,57 +20364,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Second message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Second message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Second message
-                            </Text>
-                          </Text>
+                          Second message
                         </Text>
                       </View>
                     </View>
@@ -24156,6 +20420,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="November 10, 2017"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -24337,60 +20604,63 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -24414,6 +20684,7 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -24431,11 +20702,13 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -24530,6 +20803,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -24579,57 +20855,9 @@ exports[`Story Snapshots: DateAndUnreadSeparators should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="First message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="First message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              First message
-                            </Text>
-                          </Text>
+                          First message
                         </Text>
                       </View>
                     </View>
@@ -24800,60 +21028,63 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="rocket.cat's avatar"
                         accessible={true}
@@ -24877,6 +21108,7 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -24894,11 +21126,13 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -25002,6 +21236,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -25042,57 +21279,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Fourth message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Fourth message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Fourth message
-                            </Text>
-                          </Text>
+                          Fourth message
                         </Text>
                       </View>
                     </View>
@@ -25114,6 +21303,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
       }
     >
       <Text
+        accessibilityLabel="unread"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -25151,6 +21343,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
         }
       />
       <Text
+        accessibilityLabel="November 10, 2017"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -25318,60 +21513,63 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -25395,6 +21593,7 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -25412,11 +21611,13 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -25520,6 +21721,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -25560,57 +21764,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Third message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Third message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Third message
-                            </Text>
-                          </Text>
+                          Third message
                         </Text>
                       </View>
                     </View>
@@ -25632,6 +21788,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
       }
     >
       <Text
+        accessibilityLabel="unread"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -25812,57 +21971,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Second message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Second message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Second message
-                            </Text>
-                          </Text>
+                          Second message
                         </Text>
                       </View>
                     </View>
@@ -26027,60 +22138,63 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="rocket.cat's avatar"
                         accessible={true}
@@ -26104,6 +22218,7 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -26121,11 +22236,13 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -26229,6 +22346,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -26269,57 +22389,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Second message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Second message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Second message
-                            </Text>
-                          </Text>
+                          Second message
                         </Text>
                       </View>
                     </View>
@@ -26373,6 +22445,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
         }
       >
         <Text
+          accessibilityLabel="November 10, 2017"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -26553,134 +22628,140 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -26756,6 +22837,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -26796,57 +22880,9 @@ exports[`Story Snapshots: DateAndUnreadSeparatorsLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="First message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="First message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              First message
-                            </Text>
-                          </Text>
+                          First message
                         </Text>
                       </View>
                     </View>
@@ -27017,60 +23053,63 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -27094,6 +23133,7 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -27111,11 +23151,13 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -27210,6 +23252,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -27248,6 +23293,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -27271,6 +23319,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="This is a discussion"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -27419,6 +23470,8 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -27593,60 +23646,63 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -27670,6 +23726,7 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -27687,11 +23744,13 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -27786,6 +23845,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -27824,6 +23886,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -27847,6 +23912,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="This is a discussion"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -27995,6 +24063,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityLabel="November 10, 2017"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -28171,60 +24242,63 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -28248,6 +24322,7 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -28265,11 +24340,13 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -28364,6 +24441,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -28402,6 +24482,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -28425,6 +24508,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -28573,6 +24659,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityLabel="November 10, 2017"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -28749,60 +24838,63 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -28826,6 +24918,7 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -28843,11 +24936,13 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -28942,6 +25037,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -28980,6 +25078,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -29003,6 +25104,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="This is a discussion"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -29151,6 +25255,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityLabel="November 10, 2017"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -29340,60 +25447,63 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -29417,6 +25527,7 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -29434,11 +25545,13 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -29542,6 +25655,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -29571,6 +25687,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -29594,6 +25713,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="This is a discussion"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -29742,6 +25864,8 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -29916,60 +26040,63 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -29993,6 +26120,7 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -30010,11 +26138,13 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -30118,6 +26248,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -30147,6 +26280,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -30170,6 +26306,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="This is a discussion"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -30318,6 +26457,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityLabel="November 10, 2017"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -30494,60 +26636,63 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -30571,6 +26716,7 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -30588,11 +26734,13 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -30696,6 +26844,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -30725,6 +26876,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -30748,6 +26902,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -30896,6 +27053,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityLabel="November 10, 2017"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -31072,60 +27232,63 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -31149,6 +27312,7 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -31166,11 +27330,13 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -31274,6 +27440,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -31303,6 +27472,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                     }
                   >
                     <Text
+                      accessibilityLabel="Started a discussion:"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -31326,6 +27498,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                       Started a discussion:
                     </Text>
                     <Text
+                      accessibilityLabel="This is a discussion"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -31474,6 +27649,9 @@ exports[`Story Snapshots: DiscussionLargeFont should match snapshot 1`] = `
                         </View>
                       </View>
                       <Text
+                        accessibilityLabel="November 10, 2017"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -31663,60 +27841,63 @@ exports[`Story Snapshots: Edited should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -31740,6 +27921,7 @@ exports[`Story Snapshots: Edited should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -31757,11 +27939,13 @@ exports[`Story Snapshots: Edited should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -31856,6 +28040,9 @@ exports[`Story Snapshots: Edited should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -31941,57 +28128,9 @@ exports[`Story Snapshots: Edited should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message header
-                            </Text>
-                          </Text>
+                          Message header
                         </Text>
                       </View>
                     </View>
@@ -32146,57 +28285,9 @@ exports[`Story Snapshots: Edited should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message without header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message without header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message without header
-                            </Text>
-                          </Text>
+                          Message without header
                         </Text>
                       </View>
                     </View>
@@ -32409,134 +28500,140 @@ exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -32648,6 +28745,9 @@ exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -32688,57 +28788,9 @@ exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message header
-                            </Text>
-                          </Text>
+                          Message header
                         </Text>
                       </View>
                     </View>
@@ -32893,57 +28945,9 @@ exports[`Story Snapshots: EditedLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message without header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message without header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message without header
-                            </Text>
-                          </Text>
+                          Message without header
                         </Text>
                       </View>
                     </View>
@@ -33157,134 +29161,140 @@ exports[`Story Snapshots: Editing should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
-                            }
-                          }
-                          transition={null}
-                          width={36}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={36}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 36,
+                              "width": 36,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={36}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -33351,6 +29361,9 @@ exports[`Story Snapshots: Editing should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -33400,57 +29413,9 @@ exports[`Story Snapshots: Editing should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message being edited"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message being edited"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message being edited
-                            </Text>
-                          </Text>
+                          Message being edited
                         </Text>
                       </View>
                     </View>
@@ -33622,60 +29587,63 @@ exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -33699,6 +29667,7 @@ exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -33716,11 +29685,13 @@ exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -33824,6 +29795,9 @@ exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -33864,57 +29838,9 @@ exports[`Story Snapshots: EditingLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message being edited"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message being edited"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message being edited
-                            </Text>
-                          </Text>
+                          Message being edited
                         </Text>
                       </View>
                     </View>
@@ -34085,60 +30011,63 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -34162,6 +30091,7 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -34179,11 +30109,13 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -34278,6 +30210,9 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -34326,58 +30261,11 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="👊 🤙👏"
                         >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            👊
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            🤙👏
-                          </Text>
-                        </View>
+                          👊🤙👏
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -34534,60 +30422,63 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -34611,6 +30502,7 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -34628,11 +30520,13 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -34727,6 +30621,9 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -34775,36 +30672,11 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="👏"
                         >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            👏
-                          </Text>
-                        </View>
+                          👏
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -34961,60 +30833,63 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -35038,6 +30913,7 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -35055,11 +30931,13 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -35154,6 +31032,9 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -35202,146 +31083,11 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel=":react_rocket: :nyan_rocket: :marioparty:"
                         >
-                          <View
-                            style={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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>
+                          ⁠![](https://open.rocket.chat/emoji-custom/react_rocket.png)⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)⁠![](https://open.rocket.chat/emoji-custom/marioparty.gif)
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -35498,60 +31244,63 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -35575,6 +31324,7 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -35592,11 +31342,13 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -35691,6 +31443,9 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -35739,58 +31494,11 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel=":react_rocket:"
                         >
-                          <View
-                            style={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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>
+                          ⁠![](https://open.rocket.chat/emoji-custom/react_rocket.png)
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -35947,60 +31655,63 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -36024,6 +31735,7 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -36041,11 +31753,13 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -36140,6 +31854,9 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -36188,80 +31905,11 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="🤙 :react_rocket:"
                         >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            🤙
-                          </Text>
-                          <View
-                            style={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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>
+                          🤙⁠![](https://open.rocket.chat/emoji-custom/react_rocket.png)
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -36418,60 +32066,63 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -36495,6 +32146,7 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -36512,11 +32164,13 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -36611,6 +32265,9 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -36660,123 +32317,9 @@ exports[`Story Snapshots: Emojis should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="🤙:react_rocket:🤙🤙"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                ]
-                              }
-                            >
-                              🤙
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                ]
-                              }
-                            >
-                              🤙
-                            </Text>
-                          </Text>
+                          🤙:react\\_rocket:🤙🤙
                         </Text>
                       </View>
                     </View>
@@ -36947,60 +32490,63 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -37024,6 +32570,7 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -37041,11 +32588,13 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -37149,6 +32698,9 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -37188,58 +32740,11 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="👊 🤙👏"
                         >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            👊
-                          </Text>
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            🤙👏
-                          </Text>
-                        </View>
+                          👊🤙👏
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -37396,60 +32901,63 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -37473,6 +32981,7 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -37490,11 +32999,13 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -37598,6 +33109,9 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -37637,36 +33151,11 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="👏"
                         >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            👏
-                          </Text>
-                        </View>
+                          👏
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -37823,60 +33312,63 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -37900,6 +33392,7 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -37917,11 +33410,13 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -38025,6 +33520,9 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -38064,146 +33562,11 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel=":react_rocket: :nyan_rocket: :marioparty:"
                         >
-                          <View
-                            style={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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>
+                          ⁠![](https://open.rocket.chat/emoji-custom/react_rocket.png)⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)⁠![](https://open.rocket.chat/emoji-custom/marioparty.gif)
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -38360,60 +33723,63 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -38437,6 +33803,7 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -38454,11 +33821,13 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -38562,6 +33931,9 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -38601,58 +33973,11 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel=":react_rocket:"
                         >
-                          <View
-                            style={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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>
+                          ⁠![](https://open.rocket.chat/emoji-custom/react_rocket.png)
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -38809,60 +34134,63 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -38886,6 +34214,7 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -38903,11 +34232,13 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -39011,6 +34342,9 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -39050,80 +34384,11 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View
-                          style={
-                            {
-                              "flexDirection": "row",
-                            }
-                          }
+                        <Text
+                          accessibilityLabel="🤙 :react_rocket:"
                         >
-                          <Text
-                            style={
-                              [
-                                {
-                                  "color": "#2F343D",
-                                },
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 30,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 43,
-                                  "textAlign": "left",
-                                },
-                              ]
-                            }
-                          >
-                            🤙
-                          </Text>
-                          <View
-                            style={
-                              {
-                                "transform": [
-                                  {
-                                    "translateY": 0,
-                                  },
-                                ],
-                              }
-                            }
-                          >
-                            <ViewManagerAdapter_ExpoImage
-                              containerViewRef={{"current":"Object"}}
-                              contentFit="contain"
-                              contentPosition={
-                                {
-                                  "left": "50%",
-                                  "top": "50%",
-                                }
-                              }
-                              height={30}
-                              nativeViewRef={{"current":"NativeComponent"}}
-                              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>
+                          🤙⁠![](https://open.rocket.chat/emoji-custom/react_rocket.png)
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -39280,60 +34545,63 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -39357,6 +34625,7 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -39374,11 +34643,13 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -39482,6 +34753,9 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -39522,123 +34796,9 @@ exports[`Story Snapshots: EmojisLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="🤙:react_rocket:🤙🤙"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                ]
-                              }
-                            >
-                              🤙
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                ]
-                              }
-                            >
-                              🤙
-                            </Text>
-                          </Text>
+                          🤙:react\\_rocket:🤙🤙
                         </Text>
                       </View>
                     </View>
@@ -39809,60 +34969,63 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -39886,6 +35049,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -39903,11 +35067,13 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -40002,6 +35168,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -40117,6 +35286,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -40284,6 +35455,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -40539,60 +35712,63 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -40616,6 +35792,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -40633,11 +35810,13 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -40732,6 +35911,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -40847,6 +36029,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -40951,6 +36135,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😂"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -41072,6 +36259,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -41085,6 +36273,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -41185,6 +36375,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🤔"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -41471,6 +36664,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Encrypted message"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -41601,60 +36796,63 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -41678,6 +36876,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -41695,11 +36894,13 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -41724,6 +36925,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="Encrypted message"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -41891,60 +37094,63 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -41968,6 +37174,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -41985,11 +37192,13 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -42084,6 +37293,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -42203,6 +37415,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -42379,60 +37593,63 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -42456,6 +37673,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -42473,11 +37691,13 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -42572,6 +37792,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -42687,6 +37910,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -42782,60 +38007,63 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -42859,6 +38087,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -42876,11 +38105,13 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -42975,6 +38206,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                   diego.mello
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -43166,6 +38400,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -43339,60 +38575,63 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -43416,6 +38655,7 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -43433,11 +38673,13 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -43532,6 +38774,9 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -43677,6 +38922,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -43844,6 +39091,8 @@ exports[`Story Snapshots: Encrypted should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -44142,60 +39391,63 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -44219,6 +39471,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -44236,11 +39489,13 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -44416,6 +39671,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -44450,6 +39708,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -44617,6 +39877,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -44872,60 +40134,63 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -44949,6 +40214,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -44966,11 +40232,13 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -45146,6 +40414,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -45180,6 +40451,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -45284,6 +40557,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😂"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -45405,6 +40681,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -45418,6 +40695,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -45518,6 +40797,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🤔"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -45804,6 +41086,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Encrypted message"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -45934,60 +41218,63 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -46011,6 +41298,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -46028,11 +41316,13 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -46057,6 +41347,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="Encrypted message"
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -46224,60 +41516,63 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -46301,6 +41596,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -46318,11 +41614,13 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -46498,6 +41796,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -46536,6 +41837,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -46712,60 +42015,63 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -46789,6 +42095,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -46806,11 +42113,13 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -46986,6 +42295,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -47020,6 +42332,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -47115,60 +42429,63 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -47192,6 +42509,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -47209,11 +42527,13 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                         "width": 46.800000000000004,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={46.800000000000004}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -47461,6 +42781,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
               </View>
             </View>
             <Text
+              accessibilityLabel="10:00 AM"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -47499,6 +42822,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -47672,60 +42997,63 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -47749,6 +43077,7 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -47766,11 +43095,13 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -47976,6 +43307,9 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -48010,6 +43344,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -48177,6 +43513,8 @@ exports[`Story Snapshots: EncryptedLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -48393,134 +43731,140 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                   undefined,
                 ]
               }
-            >
-              <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={
-                  [
-                    {
-                      "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={{"current":"Object"}}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={36}
-                    nativeViewRef={{"current":"NativeComponent"}}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                        },
-                      ]
-                    }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 36,
-                        "width": 36,
-                      }
-                    }
-                    transition={null}
-                    width={36}
-                  />
-                </View>
-              </RNGestureHandlerButton>
-            </ExternalKeyboardView>
-          </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}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    undefined,
+                  ]
+                }
+                underlayColor="#E4E7EA"
+              >
+                <View
+                  accessibilityLabel="diego.mello's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={{"current":"Object"}}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={36}
+                    nativeViewRef={{"current":"NativeComponent"}}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    sfEffect={null}
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 36,
+                        "width": 36,
+                      }
+                    }
+                    symbolSize={null}
+                    symbolWeight={null}
+                    transition={null}
+                    width={36}
+                  />
+                </View>
+              </View>
+            </ExternalKeyboardView>
+          </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={
@@ -48587,6 +43931,9 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                   diego.mello
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -48713,57 +44060,9 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                   }
                 >
                   <Text
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                      ]
-                    }
+                    accessibilityLabel="This message has error"
                   >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        accessibilityLabel="This message has error"
-                        style={
-                          [
-                            {
-                              "flexShrink": 1,
-                              "fontSize": 16,
-                              "lineHeight": 22,
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This message has error
-                      </Text>
-                    </Text>
+                    This message has error
                   </Text>
                 </View>
               </View>
@@ -48837,60 +44136,63 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -48914,6 +44216,7 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -48931,11 +44234,13 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -49030,6 +44335,9 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                   diego.mello
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -49156,57 +44464,9 @@ exports[`Story Snapshots: Error should match snapshot 1`] = `
                   }
                 >
                   <Text
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                      ]
-                    }
+                    accessibilityLabel="This message has error too"
                   >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        accessibilityLabel="This message has error too"
-                        style={
-                          [
-                            {
-                              "flexShrink": 1,
-                              "fontSize": 16,
-                              "lineHeight": 22,
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This message has error too
-                      </Text>
-                    </Text>
+                    This message has error too
                   </Text>
                 </View>
               </View>
@@ -49293,60 +44553,63 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -49370,6 +44633,7 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -49387,11 +44651,13 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                         "width": 46.800000000000004,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={46.800000000000004}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -49568,6 +44834,9 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
               </View>
             </View>
             <Text
+              accessibilityLabel="10:00 AM"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -49612,57 +44881,9 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                   }
                 >
                   <Text
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                      ]
-                    }
+                    accessibilityLabel="This message has error"
                   >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        accessibilityLabel="This message has error"
-                        style={
-                          [
-                            {
-                              "flexShrink": 1,
-                              "fontSize": 16,
-                              "lineHeight": 22,
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This message has error
-                      </Text>
-                    </Text>
+                    This message has error
                   </Text>
                 </View>
               </View>
@@ -49736,60 +44957,63 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -49813,6 +45037,7 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -49830,11 +45055,13 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                         "width": 46.800000000000004,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={46.800000000000004}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -50011,6 +45238,9 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
               </View>
             </View>
             <Text
+              accessibilityLabel="10:00 AM"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -50055,57 +45285,9 @@ exports[`Story Snapshots: ErrorLargeFont should match snapshot 1`] = `
                   }
                 >
                   <Text
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                      ]
-                    }
+                    accessibilityLabel="This message has error too"
                   >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        accessibilityLabel="This message has error too"
-                        style={
-                          [
-                            {
-                              "flexShrink": 1,
-                              "fontSize": 16,
-                              "lineHeight": 22,
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        This message has error too
-                      </Text>
-                    </Text>
+                    This message has error too
                   </Text>
                 </View>
               </View>
@@ -50272,134 +45454,140 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
-                            }
-                          }
-                          transition={null}
-                          width={36}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={36}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 36,
+                              "width": 36,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={36}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -50466,6 +45654,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -50595,6 +45786,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="test.py"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -50619,6 +45813,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               </View>
                               <Text
                                 accessibilityLabel="test.py"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -50660,57 +45856,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Check out this Python file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          Check out this Python file
                         </Text>
                       </View>
                     </View>
@@ -50868,60 +46016,63 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -50945,6 +46096,7 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -50962,11 +46114,13 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -51061,6 +46215,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -51190,6 +46347,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Component.tsx"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -51214,6 +46374,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               </View>
                               <Text
                                 accessibilityLabel="Component.tsx"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -51255,57 +46417,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="TypeScript component"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="TypeScript component"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              TypeScript component
-                            </Text>
-                          </Text>
+                          TypeScript component
                         </Text>
                       </View>
                     </View>
@@ -51463,60 +46577,63 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -51540,6 +46657,7 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -51557,11 +46675,13 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -51656,6 +46776,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -51785,6 +46908,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="config.json"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -51809,6 +46935,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               </View>
                               <Text
                                 accessibilityLabel="config.json"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -51850,57 +46978,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Configuration file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Configuration file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Configuration file
-                            </Text>
-                          </Text>
+                          Configuration file
                         </Text>
                       </View>
                     </View>
@@ -52058,60 +47138,63 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -52135,6 +47218,7 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -52152,11 +47236,13 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -52251,6 +47337,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -52380,6 +47469,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="main.go"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -52410,129 +47502,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="This is the main entry point for the application"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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",
-                                          "fontVariant": [
-                                            "tabular-nums",
-                                          ],
-                                          "fontWeight": "700",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="main"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "700",
-                                                "textAlign": "left",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          main
-                                        </Text>
-                                      </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>
+                                  This is the **main** entry point for the application
                                 </Text>
                               </View>
                             </View>
@@ -52552,57 +47524,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="File with description"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="File with description"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              File with description
-                            </Text>
-                          </Text>
+                          File with description
                         </Text>
                       </View>
                     </View>
@@ -52837,6 +47761,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="document.pdf"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -52861,6 +47788,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               </View>
                               <Text
                                 accessibilityLabel="document.pdf"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -52974,6 +47903,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="image.png"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -52998,6 +47930,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenames should match snapshot 1`]
                               </View>
                               <Text
                                 accessibilityLabel="image.png"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -53201,60 +48135,63 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -53278,6 +48215,7 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -53295,11 +48233,13 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -53403,6 +48343,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -53523,6 +48466,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="test.py"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -53547,6 +48493,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               </View>
                               <Text
                                 accessibilityLabel="test.py"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -53588,57 +48536,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Check out this Python file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          Check out this Python file
                         </Text>
                       </View>
                     </View>
@@ -53796,60 +48696,63 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -53873,6 +48776,7 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -53890,11 +48794,13 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -53998,6 +48904,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -54118,6 +49027,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Component.tsx"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -54142,6 +49054,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               </View>
                               <Text
                                 accessibilityLabel="Component.tsx"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -54183,57 +49097,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="TypeScript component"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="TypeScript component"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              TypeScript component
-                            </Text>
-                          </Text>
+                          TypeScript component
                         </Text>
                       </View>
                     </View>
@@ -54390,134 +49256,140 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -54593,6 +49465,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -54713,6 +49588,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="config.json"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -54737,6 +49615,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               </View>
                               <Text
                                 accessibilityLabel="config.json"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -54778,57 +49658,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Configuration file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Configuration file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Configuration file
-                            </Text>
-                          </Text>
+                          Configuration file
                         </Text>
                       </View>
                     </View>
@@ -54986,60 +49818,63 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -55063,6 +49898,7 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -55080,11 +49916,13 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -55188,6 +50026,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -55308,6 +50149,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="main.go"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -55338,129 +50182,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="This is the main entry point for the application"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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",
-                                          "fontVariant": [
-                                            "tabular-nums",
-                                          ],
-                                          "fontWeight": "700",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="main"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "700",
-                                                "textAlign": "left",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          main
-                                        </Text>
-                                      </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>
+                                  This is the **main** entry point for the application
                                 </Text>
                               </View>
                             </View>
@@ -55480,57 +50204,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="File with description"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="File with description"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              File with description
-                            </Text>
-                          </Text>
+                          File with description
                         </Text>
                       </View>
                     </View>
@@ -55765,6 +50441,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="document.pdf"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -55789,6 +50468,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               </View>
                               <Text
                                 accessibilityLabel="document.pdf"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -55902,6 +50583,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="image.png"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -55926,6 +50610,8 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               </View>
                               <Text
                                 accessibilityLabel="image.png"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -56116,60 +50802,63 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -56193,6 +50882,7 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -56210,11 +50900,13 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -56318,6 +51010,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -56445,57 +51140,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="File.pdf"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="File.pdf"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      File.pdf
-                                    </Text>
-                                  </Text>
+                                  File\\.pdf
                                 </Text>
                               </View>
                             </View>
@@ -56594,57 +51241,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="File.pdf"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="File.pdf"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      File.pdf
-                                    </Text>
-                                  </Text>
+                                  File\\.pdf
                                 </Text>
                               </View>
                             </View>
@@ -56664,57 +51263,9 @@ exports[`Story Snapshots: FileAttachmentsWithFilenamesLargeFont should match sna
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="multi file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="multi file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              multi file
-                            </Text>
-                          </Text>
+                          multi file
                         </Text>
                       </View>
                     </View>
@@ -56884,134 +51435,140 @@ exports[`Story Snapshots: FullName should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
-                            }
-                          }
-                          transition={null}
-                          width={36}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={36}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 36,
+                              "width": 36,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={36}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -57078,6 +51635,9 @@ exports[`Story Snapshots: FullName should match snapshot 1`] = `
                         Diego Mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -57127,57 +51687,9 @@ exports[`Story Snapshots: FullName should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -57348,60 +51860,63 @@ exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -57425,6 +51940,7 @@ exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -57442,11 +51958,13 @@ exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -57550,6 +52068,9 @@ exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -57590,57 +52111,9 @@ exports[`Story Snapshots: FullNameLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -57811,60 +52284,63 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -57888,6 +52364,7 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -57905,11 +52382,13 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -58004,6 +52483,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -58053,57 +52535,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="..."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="..."
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              ...
-                            </Text>
-                          </Text>
+                          \\.\\.\\.
                         </Text>
                       </View>
                     </View>
@@ -58261,60 +52695,63 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -58338,6 +52775,7 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -58355,11 +52793,13 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -58454,6 +52894,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -58503,57 +52946,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Different user"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Different user"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Different user
-                            </Text>
-                          </Text>
+                          Different user
                         </Text>
                       </View>
                     </View>
@@ -58708,57 +53103,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the third message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the third message
                         </Text>
                       </View>
                     </View>
@@ -58920,57 +53267,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the second message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the second message
                         </Text>
                       </View>
                     </View>
@@ -59135,60 +53434,63 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -59212,6 +53514,7 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -59229,11 +53532,13 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -59328,6 +53633,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -59377,57 +53685,9 @@ exports[`Story Snapshots: GroupedMessages should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the first message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the first message
                         </Text>
                       </View>
                     </View>
@@ -59598,60 +53858,63 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -59675,6 +53938,7 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -59692,11 +53956,13 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -59800,6 +54066,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -59840,57 +54109,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="..."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="..."
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              ...
-                            </Text>
-                          </Text>
+                          \\.\\.\\.
                         </Text>
                       </View>
                     </View>
@@ -60048,60 +54269,63 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -60125,6 +54349,7 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -60142,11 +54367,13 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -60250,6 +54477,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -60290,57 +54520,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Different user"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Different user"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Different user
-                            </Text>
-                          </Text>
+                          Different user
                         </Text>
                       </View>
                     </View>
@@ -60495,57 +54677,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the third message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the third message
                         </Text>
                       </View>
                     </View>
@@ -60707,57 +54841,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the second message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the second message
                         </Text>
                       </View>
                     </View>
@@ -60922,60 +55008,63 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -60999,6 +55088,7 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -61016,11 +55106,13 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -61124,6 +55216,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -61164,57 +55259,9 @@ exports[`Story Snapshots: GroupedMessagesLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is the first message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          This is the first message
                         </Text>
                       </View>
                     </View>
@@ -61390,60 +55437,63 @@ exports[`Story Snapshots: Ignored should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -61467,6 +55517,7 @@ exports[`Story Snapshots: Ignored should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -61484,11 +55535,13 @@ exports[`Story Snapshots: Ignored should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -61512,6 +55565,9 @@ exports[`Story Snapshots: Ignored should match snapshot 1`] = `
                     testID="message-content-"
                   >
                     <Text
+                      accessibilityLabel="Message ignored. Tap to display it."
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -61705,60 +55761,63 @@ exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -61782,6 +55841,7 @@ exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -61799,11 +55859,13 @@ exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -61827,6 +55889,9 @@ exports[`Story Snapshots: IgnoredLargeFont should match snapshot 1`] = `
                     testID="message-content-"
                   >
                     <Text
+                      accessibilityLabel="Message ignored. Tap to display it."
+                      accessibilityRole="text"
+                      accessible={true}
                       style={
                         [
                           {
@@ -62015,60 +56080,63 @@ exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -62092,6 +56160,7 @@ exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -62109,11 +56178,13 @@ exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -62208,6 +56279,9 @@ exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -62257,43 +56331,9 @@ exports[`Story Snapshots: InlineKatex should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="xˆ2 + yˆ2 - zˆ2"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text>
-                              xˆ2 + yˆ2 - zˆ2
-                            </Text>
-                          </Text>
+                          $xˆ2 + yˆ2 - zˆ2$
                         </Text>
                       </View>
                     </View>
@@ -62464,60 +56504,63 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -62541,6 +56584,7 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -62558,11 +56602,13 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -62666,6 +56712,9 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -62706,43 +56755,9 @@ exports[`Story Snapshots: InlineKatexLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="xˆ2 + yˆ2 - zˆ2"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text>
-                              xˆ2 + yˆ2 - zˆ2
-                            </Text>
-                          </Text>
+                          $xˆ2 + yˆ2 - zˆ2$
                         </Text>
                       </View>
                     </View>
@@ -62905,60 +56920,63 @@ exports[`Story Snapshots: JitsiCall should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -62982,6 +57000,7 @@ exports[`Story Snapshots: JitsiCall should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -62999,11 +57018,13 @@ exports[`Story Snapshots: JitsiCall should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -63098,6 +57119,9 @@ exports[`Story Snapshots: JitsiCall should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -63248,6 +57272,9 @@ exports[`Story Snapshots: JitsiCall should match snapshot 1`] = `
                           
                         </Text>
                         <Text
+                          accessibilityLabel="Click to join!"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -63429,134 +57456,140 @@ exports[`Story Snapshots: JitsiCallLargeFont should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -63751,6 +57784,9 @@ exports[`Story Snapshots: JitsiCallLargeFont should match snapshot 1`] = `
                           
                         </Text>
                         <Text
+                          accessibilityLabel="Click to join!"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -63776,6 +57812,9 @@ exports[`Story Snapshots: JitsiCallLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -63963,60 +58002,63 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -64040,6 +58082,7 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -64057,11 +58100,13 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -64156,6 +58201,9 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -64204,7 +58252,13 @@ exports[`Story Snapshots: Katex should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View />
+                        <Text
+                          accessibilityLabel=" \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }"
+                        >
+                          $$
+ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }
+$$
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -64373,134 +58427,140 @@ exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={36}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 36,
-                              "width": 36,
-                            }
-                          }
-                          transition={null}
-                          width={36}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={36}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 36,
+                              "width": 36,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={36}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -64567,6 +58627,9 @@ exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -64615,7 +58678,13 @@ exports[`Story Snapshots: KatexArray should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View />
+                        <Text
+                          accessibilityLabel=" \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{testing} & \\text{testingII} & \\text{testing III} & \\text{testing IV} & \\text{testV} & \\text{testVI} \\\\ \\hline \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} \\\\ \\hline\\text{TEST} & \\text{✅} & \\text{test} & \\text{test} & \\text{test} & \\text{✅} \\\\ \\hline \\end{array} "
+                        >
+                          $$
+ \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{testing} & \\text{testingII} & \\text{testing III} & \\text{testing IV} & \\text{testV} & \\text{testVI} \\\\ \\hline \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} \\\\ \\hline\\text{TEST} & \\text{✅} & \\text{test} & \\text{test} & \\text{test} & \\text{✅} \\\\ \\hline \\end{array} 
+$$
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -64785,60 +58854,63 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -64862,6 +58934,7 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -64879,11 +58952,13 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -64987,6 +59062,9 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -65026,7 +59104,13 @@ exports[`Story Snapshots: KatexArrayLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View />
+                        <Text
+                          accessibilityLabel=" \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{testing} & \\text{testingII} & \\text{testing III} & \\text{testing IV} & \\text{testV} & \\text{testVI} \\\\ \\hline \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} \\\\ \\hline\\text{TEST} & \\text{✅} & \\text{test} & \\text{test} & \\text{test} & \\text{✅} \\\\ \\hline \\end{array} "
+                        >
+                          $$
+ \\begin{array}{|c|c|c|c|c|c|} \\hline \\text{testing} & \\text{testingII} & \\text{testing III} & \\text{testing IV} & \\text{testV} & \\text{testVI} \\\\ \\hline \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} & \\text{TEST} \\\\ \\hline\\text{TEST} & \\text{✅} & \\text{test} & \\text{test} & \\text{test} & \\text{✅} \\\\ \\hline \\end{array} 
+$$
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -65195,134 +59279,140 @@ exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          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&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="diego.mello's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/diego.mello?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -65398,6 +59488,9 @@ exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -65437,7 +59530,13 @@ exports[`Story Snapshots: KatexLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View />
+                        <Text
+                          accessibilityLabel=" \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }"
+                        >
+                          $$
+ \\color{black} \\colorbox{white}{ \\boxed{ \\begin{matrix} \\;\\;\\;\\; \\overlinesegment {\\underlinesegment{ \\Huge Test\\; Test \\; in \\; Test} } & \\\\ \\;\\;\\textit{develop}\\end{matrix} } }
+$$
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -65609,60 +59708,63 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -65686,6 +59788,7 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -65703,11 +59806,13 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -65802,6 +59907,9 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -65852,256 +59960,18 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              • 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              • 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              • 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="cats"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  cats
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Dogs
+cats"
+                        >
+                          - Dogs
+- cats
+                        </Text>
+                        <Text
+                          accessibilityLabel="cats"
+                        >
+                          - cats
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -66259,60 +60129,63 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -66336,6 +60209,7 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -66353,11 +60227,13 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -66452,6 +60328,9 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -66501,206 +60380,13 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              2
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Cats"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Cats
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Dogs 
+Cats"
+                        >
+                          1. Dogs 
+2. Cats
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -66857,60 +60543,63 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -66934,6 +60623,7 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -66951,11 +60641,13 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -67050,6 +60742,9 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -67098,107 +60793,11 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Dogs"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Dogs
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Dogs"
+                        >
+                          1. Dogs
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -67351,107 +60950,11 @@ exports[`Story Snapshots: Lists should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              2
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Cats"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Cats
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Cats"
+                        >
+                          2. Cats
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -67630,60 +61133,63 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -67707,6 +61213,7 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -67724,11 +61231,13 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -67832,6 +61341,9 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -67873,256 +61385,18 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              • 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              • 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              • 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="cats"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  cats
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Dogs
+cats"
+                        >
+                          - Dogs
+- cats
+                        </Text>
+                        <Text
+                          accessibilityLabel="cats"
+                        >
+                          - cats
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -68280,60 +61554,63 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -68357,6 +61634,7 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -68374,11 +61652,13 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -68482,6 +61762,9 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -68522,206 +61805,13 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              2
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Cats"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Cats
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Dogs 
+Cats"
+                        >
+                          1. Dogs 
+2. Cats
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -68878,60 +61968,63 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -68955,6 +62048,7 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -68972,11 +62066,13 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -69080,6 +62176,9 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -69119,107 +62218,11 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              1
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Dogs"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Dogs
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Dogs"
+                        >
+                          1. Dogs
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -69372,107 +62375,11 @@ exports[`Story Snapshots: ListsLargeFont should match snapshot 1`] = `
                           }
                         }
                       >
-                        <View>
-                          <View
-                            style={
-                              {
-                                "flexDirection": "row",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              2
-                              . 
-                            </Text>
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Cats"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Cats
-                                </Text>
-                              </Text>
-                            </Text>
-                          </View>
-                        </View>
+                        <Text
+                          accessibilityLabel="Cats"
+                        >
+                          2. Cats
+                        </Text>
                       </View>
                     </View>
                   </View>
@@ -69649,60 +62556,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -69726,6 +62636,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -69743,11 +62654,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -69842,6 +62755,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -69891,57 +62807,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="this is a normal message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          this is a normal message
                         </Text>
                       </View>
                     </View>
@@ -70099,60 +62967,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -70176,6 +63047,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -70193,11 +63065,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -70292,6 +63166,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -70377,57 +63254,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Edited message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Edited message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Edited message
-                            </Text>
-                          </Text>
+                          Edited message
                         </Text>
                       </View>
                     </View>
@@ -70585,60 +63414,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -70662,6 +63494,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -70679,11 +63512,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -70778,6 +63613,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -70862,57 +63700,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Translated message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Translated message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Translated message
-                            </Text>
-                          </Text>
+                          Translated message
                         </Text>
                       </View>
                     </View>
@@ -71070,60 +63860,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -71147,6 +63940,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -71164,11 +63958,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -71263,6 +64059,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -71378,6 +64177,8 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -71472,134 +64273,140 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                   undefined,
                 ]
               }
-            >
-              <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={
-                  [
-                    {
-                      "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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
-                  accessible={true}
-                  style={{}}
-                >
-                  <ViewManagerAdapter_ExpoImage
-                    borderRadius={4}
-                    containerViewRef={{"current":"Object"}}
-                    contentFit="cover"
-                    contentPosition={
-                      {
-                        "left": "50%",
-                        "top": "50%",
-                      }
-                    }
-                    height={36}
-                    nativeViewRef={{"current":"NativeComponent"}}
-                    onError={[Function]}
-                    onLoad={[Function]}
-                    onLoadStart={[Function]}
-                    onProgress={[Function]}
-                    placeholder={[]}
-                    priority="high"
-                    source={
-                      [
-                        {
-                          "headers": {
-                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                          },
-                          "uri": "https://open.rocket.chat/avatar/johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                        },
-                      ]
-                    }
-                    style={
-                      {
-                        "borderRadius": 4,
-                        "height": 36,
-                        "width": 36,
-                      }
-                    }
-                    transition={null}
-                    width={36}
-                  />
-                </View>
-              </RNGestureHandlerButton>
-            </ExternalKeyboardView>
-          </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}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
+                collapsable={false}
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  [
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    undefined,
+                  ]
+                }
+                underlayColor="#E4E7EA"
+              >
+                <View
+                  accessibilityLabel="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
+                  accessible={true}
+                  style={{}}
+                >
+                  <ViewManagerAdapter_ExpoImage
+                    borderRadius={4}
+                    containerViewRef={{"current":"Object"}}
+                    contentFit="cover"
+                    contentPosition={
+                      {
+                        "left": "50%",
+                        "top": "50%",
+                      }
+                    }
+                    height={36}
+                    nativeViewRef={{"current":"NativeComponent"}}
+                    onError={[Function]}
+                    onLoad={[Function]}
+                    onLoadStart={[Function]}
+                    onProgress={[Function]}
+                    placeholder={[]}
+                    priority="high"
+                    sfEffect={null}
+                    source={
+                      [
+                        {
+                          "headers": {
+                            "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                          },
+                          "uri": "https://open.rocket.chat/avatar/johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername?format=png&size=72&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                        },
+                      ]
+                    }
+                    style={
+                      {
+                        "borderRadius": 4,
+                        "height": 36,
+                        "width": 36,
+                      }
+                    }
+                    symbolSize={null}
+                    symbolWeight={null}
+                    transition={null}
+                    width={36}
+                  />
+                </View>
+              </View>
+            </ExternalKeyboardView>
+          </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={
@@ -71666,6 +64473,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                   johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -71792,57 +64602,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                   }
                 >
                   <Text
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                      ]
-                    }
+                    accessibilityLabel="Error message"
                   >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        accessibilityLabel="Error message"
-                        style={
-                          [
-                            {
-                              "flexShrink": 1,
-                              "fontSize": 16,
-                              "lineHeight": 22,
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        Error message
-                      </Text>
-                    </Text>
+                    Error message
                   </Text>
                 </View>
               </View>
@@ -71997,60 +64759,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -72074,6 +64839,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -72091,11 +64857,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -72190,6 +64958,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -72270,57 +65041,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message with read receipt"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          Message with read receipt
                         </Text>
                       </View>
                     </View>
@@ -72478,60 +65201,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -72555,6 +65281,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -72572,11 +65299,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -72671,6 +65400,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -72816,6 +65548,8 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -72911,60 +65645,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -72988,6 +65725,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -73005,11 +65743,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -73104,6 +65844,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                   johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -73394,6 +66137,8 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -73486,60 +66231,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -73563,6 +66311,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -73580,11 +66329,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -73679,6 +66430,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                   johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -73969,6 +66723,8 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -74061,60 +66817,63 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -74138,6 +66897,7 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -74155,11 +66915,13 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -74254,6 +67016,9 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
                   johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -74544,6 +67309,8 @@ exports[`Story Snapshots: LongNameUser should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -74729,134 +67496,140 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
-                        accessible={true}
-                        style={{}}
-                      >
-                        <ViewManagerAdapter_ExpoImage
-                          borderRadius={4}
-                          containerViewRef={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          placeholder={[]}
-                          priority="high"
-                          source={
-                            [
-                              {
-                                "headers": {
-                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                                },
-                                "uri": "https://open.rocket.chat/avatar/johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -74932,6 +67705,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -74972,57 +67748,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="this is a normal message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          this is a normal message
                         </Text>
                       </View>
                     </View>
@@ -75180,60 +67908,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -75257,6 +67988,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -75274,11 +68006,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -75418,6 +68152,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -75458,57 +68195,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Edited message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Edited message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Edited message
-                            </Text>
-                          </Text>
+                          Edited message
                         </Text>
                       </View>
                     </View>
@@ -75666,60 +68355,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -75743,6 +68435,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -75760,11 +68453,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -75903,6 +68598,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -75943,57 +68641,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Translated message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Translated message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Translated message
-                            </Text>
-                          </Text>
+                          Translated message
                         </Text>
                       </View>
                     </View>
@@ -76151,60 +68801,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -76228,6 +68881,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -76245,11 +68899,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -76425,6 +69081,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -76459,6 +69118,8 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -76554,60 +69215,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -76631,6 +69295,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -76648,11 +69313,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         "width": 46.800000000000004,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={46.800000000000004}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -76829,6 +69496,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               </View>
             </View>
             <Text
+              accessibilityLabel="10:00 AM"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -76873,57 +69543,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                   }
                 >
                   <Text
-                    style={
-                      [
-                        {
-                          "backgroundColor": "transparent",
-                          "fontFamily": "Inter",
-                          "fontSize": 16,
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "lineHeight": 22,
-                          "textAlign": "left",
-                        },
-                        {
-                          "color": "#2F343D",
-                        },
-                      ]
-                    }
+                    accessibilityLabel="Error message"
                   >
-                    <Text
-                      style={
-                        {
-                          "backgroundColor": "transparent",
-                          "flexShrink": 1,
-                          "fontFamily": "Inter",
-                          "fontVariant": [
-                            "tabular-nums",
-                          ],
-                          "fontWeight": "400",
-                          "textAlign": "left",
-                        }
-                      }
-                    >
-                      <Text
-                        accessibilityLabel="Error message"
-                        style={
-                          [
-                            {
-                              "flexShrink": 1,
-                              "fontSize": 16,
-                              "lineHeight": 22,
-                            },
-                            {
-                              "color": "#2F343D",
-                            },
-                          ]
-                        }
-                      >
-                        Error message
-                      </Text>
-                    </Text>
+                    Error message
                   </Text>
                 </View>
               </View>
@@ -77077,134 +69699,140 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         undefined,
                       ]
                     }
-                  >
-                    <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={
-                        [
-                          {
-                            "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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
-                        accessible={true}
-                        style={{}}
-                      >
-                        <ViewManagerAdapter_ExpoImage
-                          borderRadius={4}
-                          containerViewRef={{"current":"Object"}}
-                          contentFit="cover"
-                          contentPosition={
-                            {
-                              "left": "50%",
-                              "top": "50%",
-                            }
-                          }
-                          height={46.800000000000004}
-                          nativeViewRef={{"current":"NativeComponent"}}
-                          onError={[Function]}
-                          onLoad={[Function]}
-                          onLoadStart={[Function]}
-                          onProgress={[Function]}
-                          placeholder={[]}
-                          priority="high"
-                          source={
-                            [
-                              {
-                                "headers": {
-                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
-                                },
-                                "uri": "https://open.rocket.chat/avatar/johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
-                              },
-                            ]
-                          }
-                          style={
-                            {
-                              "borderRadius": 4,
-                              "height": 46.800000000000004,
-                              "width": 46.800000000000004,
-                            }
-                          }
-                          transition={null}
-                          width={46.800000000000004}
-                        />
-                      </View>
-                    </RNGestureHandlerButton>
-                  </ExternalKeyboardView>
-                </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}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
+                      collapsable={false}
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        [
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          undefined,
+                        ]
+                      }
+                      underlayColor="#E4E7EA"
+                    >
+                      <View
+                        accessibilityLabel="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
+                        accessible={true}
+                        style={{}}
+                      >
+                        <ViewManagerAdapter_ExpoImage
+                          borderRadius={4}
+                          containerViewRef={{"current":"Object"}}
+                          contentFit="cover"
+                          contentPosition={
+                            {
+                              "left": "50%",
+                              "top": "50%",
+                            }
+                          }
+                          height={46.800000000000004}
+                          nativeViewRef={{"current":"NativeComponent"}}
+                          onError={[Function]}
+                          onLoad={[Function]}
+                          onLoadStart={[Function]}
+                          onProgress={[Function]}
+                          placeholder={[]}
+                          priority="high"
+                          sfEffect={null}
+                          source={
+                            [
+                              {
+                                "headers": {
+                                  "User-Agent": "RC Mobile; ios unknown; vunknown (unknown)",
+                                },
+                                "uri": "https://open.rocket.chat/avatar/johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername?format=png&size=93.60000000000001&rc_token=abc&rc_uid=y8bd77ptZswPj3EW8",
+                              },
+                            ]
+                          }
+                          style={
+                            {
+                              "borderRadius": 4,
+                              "height": 46.800000000000004,
+                              "width": 46.800000000000004,
+                            }
+                          }
+                          symbolSize={null}
+                          symbolWeight={null}
+                          transition={null}
+                          width={46.800000000000004}
+                        />
+                      </View>
+                    </View>
+                  </ExternalKeyboardView>
+                </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={
@@ -77311,6 +69939,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -77351,57 +69982,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message with read receipt"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          Message with read receipt
                         </Text>
                       </View>
                     </View>
@@ -77559,60 +70142,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -77636,6 +70222,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -77653,11 +70240,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -77863,6 +70452,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -77897,6 +70489,8 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     >
                       <Text
                         accessibilityLabel="Encrypted message"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -77992,60 +70586,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -78069,6 +70666,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -78086,11 +70684,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         "width": 46.800000000000004,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={46.800000000000004}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -78437,6 +71037,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               </View>
             </View>
             <Text
+              accessibilityLabel="10:00 AM"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -78475,6 +71078,8 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -78567,60 +71172,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -78644,6 +71252,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -78661,11 +71270,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         "width": 46.800000000000004,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={46.800000000000004}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -79012,6 +71623,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               </View>
             </View>
             <Text
+              accessibilityLabel="10:00 AM"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -79050,6 +71664,8 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -79142,60 +71758,63 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -79219,6 +71838,7 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -79236,11 +71856,13 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
                         "width": 46.800000000000004,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={46.800000000000004}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -79587,6 +72209,9 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               </View>
             </View>
             <Text
+              accessibilityLabel="10:00 AM"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -79625,6 +72250,8 @@ exports[`Story Snapshots: LongNameUserLargeFont should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -79811,60 +72438,63 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -79888,6 +72518,7 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -79905,11 +72536,13 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -80004,6 +72637,9 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -80053,254 +72689,9 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="rocket.cat diego.mello all here #general team"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              onPress={[Function]}
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "600",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#8E6300",
-                                  },
-                                ]
-                              }
-                            >
-                              team
-                            </Text>
-                          </Text>
+                          [**rocket\\.cat**](&lt;user://random&gt;) [**diego\\.mello**](&lt;user://random2?me=1&gt;) [**all**](&lt;user://all&gt;) [**here**](&lt;user://here&gt;) \\#general [**team**](&lt;user://team?team=1&gt;)
                         </Text>
                       </View>
                     </View>
@@ -80458,60 +72849,63 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -80535,6 +72929,7 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -80552,11 +72947,13 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -80651,6 +73048,9 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -80700,233 +73100,9 @@ exports[`Story Snapshots: Mentions should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          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."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              onPress={[Function]}
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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>
+                          [**rocket\\.cat**](&lt;user://random&gt;) Lorem ipsum dolor [**diego\\.mello**](&lt;user://random2?me=1&gt;) sit amet, [**all**](&lt;user://all&gt;) consectetur adipiscing [**here**](&lt;user://here&gt;) elit, sed do eiusmod tempor \\#general incididunt ut labore et dolore magna aliqua\\.
                         </Text>
                       </View>
                     </View>
@@ -81097,60 +73273,63 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -81174,6 +73353,7 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -81191,11 +73371,13 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -81299,6 +73481,9 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -81339,254 +73524,9 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="rocket.cat diego.mello all here #general team"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              onPress={[Function]}
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "600",
-                                    "textAlign": "left",
-                                  },
-                                  {
-                                    "color": "#8E6300",
-                                  },
-                                ]
-                              }
-                            >
-                              team
-                            </Text>
-                          </Text>
+                          [**rocket\\.cat**](&lt;user://random&gt;) [**diego\\.mello**](&lt;user://random2?me=1&gt;) [**all**](&lt;user://all&gt;) [**here**](&lt;user://here&gt;) \\#general [**team**](&lt;user://team?team=1&gt;)
                         </Text>
                       </View>
                     </View>
@@ -81744,60 +73684,63 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -81821,6 +73764,7 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -81838,11 +73782,13 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -81946,6 +73892,9 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -81986,233 +73935,9 @@ exports[`Story Snapshots: MentionsLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          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."
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              onPress={[Function]}
-                              style={
-                                [
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "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>
+                          [**rocket\\.cat**](&lt;user://random&gt;) Lorem ipsum dolor [**diego\\.mello**](&lt;user://random2?me=1&gt;) sit amet, [**all**](&lt;user://all&gt;) consectetur adipiscing [**here**](&lt;user://here&gt;) elit, sed do eiusmod tempor \\#general incididunt ut labore et dolore magna aliqua\\.
                         </Text>
                       </View>
                     </View>
@@ -82383,60 +74108,63 @@ exports[`Story Snapshots: Message should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -82460,6 +74188,7 @@ exports[`Story Snapshots: Message should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -82477,11 +74206,13 @@ exports[`Story Snapshots: Message should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -82576,6 +74307,9 @@ exports[`Story Snapshots: Message should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -82779,60 +74513,63 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -82856,6 +74593,7 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -82873,11 +74611,13 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -82972,6 +74712,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -83021,57 +74764,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Forwarded message with file inside"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Forwarded message with file inside"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Forwarded message with file inside
-                            </Text>
-                          </Text>
+                          Forwarded message with file inside
                         </Text>
                       </View>
                     </View>
@@ -83167,6 +74862,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -83190,6 +74888,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="10:00 AM"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -83304,6 +75005,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                           }
                                         >
                                           <Text
+                                            accessibilityLabel="user"
+                                            accessibilityRole="text"
+                                            accessible={true}
                                             numberOfLines={1}
                                             style={
                                               [
@@ -83327,6 +75031,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                             user
                                           </Text>
                                           <Text
+                                            accessibilityLabel="document.pdf"
+                                            accessibilityRole="text"
+                                            accessible={true}
                                             style={
                                               [
                                                 {
@@ -83351,6 +75058,8 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                         </View>
                                         <Text
                                           accessibilityLabel="document.pdf"
+                                          accessibilityRole="text"
+                                          accessible={true}
                                           numberOfLines={0}
                                           style={
                                             [
@@ -83539,60 +75248,63 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -83616,6 +75328,7 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -83633,11 +75346,13 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -83732,6 +75447,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -83781,57 +75499,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Forwarded message with nested image"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Forwarded message with nested image"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Forwarded message with nested image
-                            </Text>
-                          </Text>
+                          Forwarded message with nested image
                         </Text>
                       </View>
                     </View>
@@ -83927,6 +75597,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -83972,57 +75645,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Nested image from forwarded message"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "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>
+                                      Nested image from forwarded message
                                     </Text>
                                   </View>
                                   <View
@@ -84347,60 +75972,63 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -84424,6 +76052,7 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -84441,11 +76070,13 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -84540,6 +76171,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -84589,57 +76223,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Forwarded message with nested audio"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Forwarded message with nested audio"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Forwarded message with nested audio
-                            </Text>
-                          </Text>
+                          Forwarded message with nested audio
                         </Text>
                       </View>
                     </View>
@@ -84735,6 +76321,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -84973,30 +76562,47 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                           />
                                         </View>
                                         <View
-                                          collapsable={false}
-                                          hitSlop={
+                                          handlerTags={
+                                            [
+                                              1,
+                                            ]
+                                          }
+                                          onGestureHandlerEvent={[Function]}
+                                          onGestureHandlerStateChange={[Function]}
+                                          onGestureHandlerTouchEvent={[Function]}
+                                          onStartShouldSetResponder={[Function]}
+                                          pointerEvents="box-none"
+                                          style={
                                             {
-                                              "bottom": 12,
-                                              "left": 8,
-                                              "right": 8,
-                                              "top": 12,
+                                              "display": "contents",
                                             }
                                           }
-                                          style={
-                                            [
-                                              {
-                                                "borderRadius": 6,
-                                                "height": 12,
-                                                "position": "absolute",
-                                                "width": 12,
-                                              },
+                                        >
+                                          <View
+                                            hitSlop={
                                               {
-                                                "backgroundColor": "#D1EBFE",
-                                              },
-                                              [Function],
-                                            ]
-                                          }
-                                        />
+                                                "bottom": 12,
+                                                "left": 8,
+                                                "right": 8,
+                                                "top": 12,
+                                              }
+                                            }
+                                            style={
+                                              [
+                                                {
+                                                  "borderRadius": 6,
+                                                  "height": 12,
+                                                  "position": "absolute",
+                                                  "width": 12,
+                                                },
+                                                {
+                                                  "backgroundColor": "#D1EBFE",
+                                                },
+                                                [Function],
+                                              ]
+                                            }
+                                          />
+                                        </View>
                                       </View>
                                     </View>
                                   </View>
@@ -85161,60 +76767,63 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -85238,6 +76847,7 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -85255,11 +76865,13 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -85354,6 +76966,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -85403,57 +77018,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Forwarded message with nested video"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Forwarded message with nested video"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Forwarded message with nested video
-                            </Text>
-                          </Text>
+                          Forwarded message with nested video
                         </Text>
                       </View>
                     </View>
@@ -85549,6 +77116,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -85866,60 +77436,63 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -85943,6 +77516,7 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -85960,11 +77534,13 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -86059,6 +77635,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -86108,57 +77687,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message forwarded twice with file inside"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message forwarded twice with file inside"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message forwarded twice with file inside
-                            </Text>
-                          </Text>
+                          Message forwarded twice with file inside
                         </Text>
                       </View>
                     </View>
@@ -86254,6 +77785,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -86277,6 +77811,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="10:00 AM"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -86391,6 +77928,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                           }
                                         >
                                           <Text
+                                            accessibilityLabel="rocket.cat"
+                                            accessibilityRole="text"
+                                            accessible={true}
                                             numberOfLines={1}
                                             style={
                                               [
@@ -86414,6 +77954,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                             rocket.cat
                                           </Text>
                                           <Text
+                                            accessibilityLabel="10:00 AM"
+                                            accessibilityRole="text"
+                                            accessible={true}
                                             style={
                                               [
                                                 {
@@ -86528,6 +78071,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                                     }
                                                   >
                                                     <Text
+                                                      accessibilityLabel="user"
+                                                      accessibilityRole="text"
+                                                      accessible={true}
                                                       numberOfLines={1}
                                                       style={
                                                         [
@@ -86551,6 +78097,9 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                                       user
                                                     </Text>
                                                     <Text
+                                                      accessibilityLabel="document.pdf"
+                                                      accessibilityRole="text"
+                                                      accessible={true}
                                                       style={
                                                         [
                                                           {
@@ -86575,6 +78124,8 @@ exports[`Story Snapshots: MessageWithNestedReplyAndFile should match snapshot 1`
                                                   </View>
                                                   <Text
                                                     accessibilityLabel="document.pdf"
+                                                    accessibilityRole="text"
+                                                    accessible={true}
                                                     numberOfLines={0}
                                                     style={
                                                       [
@@ -86781,60 +78332,63 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -86858,6 +78412,7 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -86875,11 +78430,13 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -86974,6 +78531,9 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -87054,57 +78614,9 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -87259,57 +78771,9 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -87505,60 +78969,63 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -87582,6 +79049,7 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -87599,11 +79067,13 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -87698,6 +79168,9 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -87778,57 +79251,9 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -87983,57 +79408,9 @@ exports[`Story Snapshots: MessageWithReadReceipt should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -88242,60 +79619,63 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -88319,6 +79699,7 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -88336,11 +79717,13 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -88475,6 +79858,9 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -88515,57 +79901,9 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -88720,57 +80058,9 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -88966,60 +80256,63 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -89043,6 +80336,7 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -89060,11 +80354,13 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -89199,6 +80495,9 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -89239,57 +80538,9 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -89444,57 +80695,9 @@ exports[`Story Snapshots: MessageWithReadReceiptLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -89703,60 +80906,63 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -89780,6 +80986,7 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -89797,11 +81004,13 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -89896,6 +81105,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -90025,6 +81237,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="I'm a very long long title and I'll break"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -90056,57 +81271,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="How are you?"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="How are you?"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      How are you?
-                                    </Text>
-                                  </Text>
+                                  How are you?
                                 </Text>
                               </View>
                             </View>
@@ -90126,57 +81293,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -90334,60 +81453,63 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -90411,6 +81533,7 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -90428,11 +81551,13 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -90527,6 +81652,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -90656,6 +81784,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -90687,101 +81818,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="How are you? :nyan_rocket:"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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={{"current":"Object"}}
-                                        contentFit="contain"
-                                        contentPosition={
-                                          {
-                                            "left": "50%",
-                                            "top": "50%",
-                                          }
-                                        }
-                                        height={15}
-                                        nativeViewRef={{"current":"NativeComponent"}}
-                                        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>
+                                  How are you? ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                                 </Text>
                               </View>
                             </View>
@@ -90873,6 +81912,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -90904,101 +81946,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="How are you? :nyan_rocket:"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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={{"current":"Object"}}
-                                        contentFit="contain"
-                                        contentPosition={
-                                          {
-                                            "left": "50%",
-                                            "top": "50%",
-                                          }
-                                        }
-                                        height={15}
-                                        nativeViewRef={{"current":"NativeComponent"}}
-                                        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>
+                                  How are you? ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                                 </Text>
                               </View>
                             </View>
@@ -91012,57 +81962,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="Reply attachment can have a description"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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>
+                            Reply attachment can have a description
                           </Text>
                         </View>
                       </View>
@@ -91079,57 +81981,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -91287,60 +82141,63 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -91364,6 +82221,7 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -91381,11 +82239,13 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -91480,6 +82340,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -91529,57 +82392,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Looks cool!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Looks cool!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Looks cool!
-                            </Text>
-                          </Text>
+                          Looks cool\\!
                         </Text>
                       </View>
                     </View>
@@ -91675,6 +82490,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -91720,57 +82538,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="What you think about this one?"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "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>
+                                      What you think about this one?
                                     </Text>
                                   </View>
                                   <View
@@ -92095,60 +82865,63 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -92172,6 +82945,7 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -92189,11 +82963,13 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -92288,6 +83064,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -92337,57 +83116,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Yes, I am"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Yes, I am"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Yes, I am
-                            </Text>
-                          </Text>
+                          Yes, I am
                         </Text>
                       </View>
                     </View>
@@ -92483,6 +83214,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -92528,118 +83262,9 @@ exports[`Story Snapshots: MessageWithReply should match snapshot 1`] = `
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Are you seeing this mario :marioparty: ?"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "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={{"current":"Object"}}
-                                            contentFit="contain"
-                                            contentPosition={
-                                              {
-                                                "left": "50%",
-                                                "top": "50%",
-                                              }
-                                            }
-                                            height={15}
-                                            nativeViewRef={{"current":"NativeComponent"}}
-                                            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>
+                                      Are you seeing this mario ⁠![](https://open.rocket.chat/emoji-custom/marioparty.gif) ?
                                     </Text>
                                   </View>
                                   <View
@@ -92977,60 +83602,63 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -93054,6 +83682,7 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -93071,11 +83700,13 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -93170,6 +83801,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -93299,6 +83933,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -93322,6 +83959,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="script.sh"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -93346,6 +83986,8 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                               </View>
                               <Text
                                 accessibilityLabel="script.sh"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -93387,57 +84029,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Here is the file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          Here is the file
                         </Text>
                       </View>
                     </View>
@@ -93595,60 +84189,63 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -93672,6 +84269,7 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -93689,11 +84287,13 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -93788,6 +84388,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -93917,6 +84520,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -93940,6 +84546,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="config.yaml"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -93970,129 +84579,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="This is a configuration file with important settings"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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",
-                                          "fontFamily": "Inter",
-                                          "fontVariant": [
-                                            "tabular-nums",
-                                          ],
-                                          "fontWeight": "700",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="important"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "700",
-                                                "textAlign": "left",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          important
-                                        </Text>
-                                      </Text>
-                                    </Text>
-                                    <Text
-                                      accessibilityLabel=" settings"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                       settings
-                                    </Text>
-                                  </Text>
+                                  This is a configuration file with **important** settings
                                 </Text>
                               </View>
                             </View>
@@ -94112,57 +84601,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Got it!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Got it!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Got it!
-                            </Text>
-                          </Text>
+                          Got it\\!
                         </Text>
                       </View>
                     </View>
@@ -94320,60 +84761,63 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -94397,6 +84841,7 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -94414,11 +84859,13 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -94513,6 +84960,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -94642,6 +85092,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -94665,6 +85118,9 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="index.ts"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -94684,171 +85140,13 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                     ]
                                   }
                                 >
-                                  index.ts
-                                </Text>
-                              </View>
-                              <Text
-                                accessibilityLabel="index.ts"
-                                numberOfLines={0}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "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}
-                          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,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#6C727A",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  rocket.cat
-                                </Text>
-                                <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flex": 1,
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  styles.css
+                                  index.ts
                                 </Text>
                               </View>
                               <Text
-                                accessibilityLabel="styles.css"
+                                accessibilityLabel="index.ts"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -94869,78 +85167,198 @@ exports[`Story Snapshots: MessageWithReplyAndFile should match snapshot 1`] = `
                                     },
                                   ]
                                 }
-                                testID="markdown-preview-styles.css"
+                                testID="markdown-preview-index.ts"
                               >
-                                styles.css
+                                index.ts
                               </Text>
                             </View>
                           </View>
                         </View>
                       </View>
-                    </View>
-                    <View
-                      style={false}
-                      testID="message-content-Multiple files"
-                    >
                       <View
                         style={
                           {
-                            "gap": 2,
+                            "gap": 4,
                           }
                         }
                       >
-                        <Text
+                        <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={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "alignItems": "center",
+                                "alignSelf": "flex-start",
+                                "borderLeftWidth": 2,
+                                "flex": 1,
+                                "flexDirection": "row",
                               },
                               {
-                                "color": "#2F343D",
+                                "borderColor": "#CBCED1",
                               },
                             ]
                           }
+                          testID="reply-rocket.cat-undefined"
                         >
-                          <Text
+                          <View
                             style={
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
+                                "borderRadius": 4,
+                                "flex": 1,
+                                "flexDirection": "row",
+                                "paddingLeft": 8,
+                                "paddingVertical": 4,
                               }
                             }
                           >
-                            <Text
-                              accessibilityLabel="Multiple files"
+                            <View
                               style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                  "flexDirection": "column",
+                                  "gap": 4,
+                                  "width": 200,
+                                }
                               }
                             >
-                              Multiple files
-                            </Text>
-                          </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "500",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  rocket.cat
+                                </Text>
+                                <Text
+                                  accessibilityLabel="styles.css"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flex": 1,
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "500",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  styles.css
+                                </Text>
+                              </View>
+                              <Text
+                                accessibilityLabel="styles.css"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={0}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                  ]
+                                }
+                                testID="markdown-preview-styles.css"
+                              >
+                                styles.css
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                    <View
+                      style={false}
+                      testID="message-content-Multiple files"
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 2,
+                          }
+                        }
+                      >
+                        <Text
+                          accessibilityLabel="Multiple files"
+                        >
+                          Multiple files
                         </Text>
                       </View>
                     </View>
@@ -95111,60 +85529,63 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -95188,6 +85609,7 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -95205,11 +85627,13 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -95313,6 +85737,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -95433,6 +85860,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -95456,6 +85886,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="script.sh"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -95480,6 +85913,8 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                               </View>
                               <Text
                                 accessibilityLabel="script.sh"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -95521,57 +85956,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Here is the file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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>
+                          Here is the file
                         </Text>
                       </View>
                     </View>
@@ -95729,60 +86116,63 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -95806,6 +86196,7 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -95823,11 +86214,13 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -95931,6 +86324,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -96051,6 +86447,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -96074,6 +86473,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="config.yaml"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -96104,129 +86506,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="This is a configuration file with important settings"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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",
-                                          "fontFamily": "Inter",
-                                          "fontVariant": [
-                                            "tabular-nums",
-                                          ],
-                                          "fontWeight": "700",
-                                          "textAlign": "left",
-                                        }
-                                      }
-                                    >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="important"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "700",
-                                                "textAlign": "left",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          important
-                                        </Text>
-                                      </Text>
-                                    </Text>
-                                    <Text
-                                      accessibilityLabel=" settings"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                       settings
-                                    </Text>
-                                  </Text>
+                                  This is a configuration file with **important** settings
                                 </Text>
                               </View>
                             </View>
@@ -96246,57 +86528,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Got it!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Got it!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Got it!
-                            </Text>
-                          </Text>
+                          Got it\\!
                         </Text>
                       </View>
                     </View>
@@ -96454,60 +86688,63 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -96531,6 +86768,7 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -96548,11 +86786,13 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -96656,6 +86896,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -96776,6 +87019,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -96799,6 +87045,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="index.ts"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -96818,171 +87067,13 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                     ]
                                   }
                                 >
-                                  index.ts
-                                </Text>
-                              </View>
-                              <Text
-                                accessibilityLabel="index.ts"
-                                numberOfLines={0}
-                                style={
-                                  [
-                                    {
-                                      "backgroundColor": "transparent",
-                                      "fontFamily": "Inter",
-                                      "fontSize": 16,
-                                      "fontVariant": [
-                                        "tabular-nums",
-                                      ],
-                                      "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}
-                          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,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#6C727A",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  rocket.cat
-                                </Text>
-                                <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flex": 1,
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "500",
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  styles.css
+                                  index.ts
                                 </Text>
                               </View>
                               <Text
-                                accessibilityLabel="styles.css"
+                                accessibilityLabel="index.ts"
+                                accessibilityRole="text"
+                                accessible={true}
                                 numberOfLines={0}
                                 style={
                                   [
@@ -97003,78 +87094,198 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                     },
                                   ]
                                 }
-                                testID="markdown-preview-styles.css"
+                                testID="markdown-preview-index.ts"
                               >
-                                styles.css
+                                index.ts
                               </Text>
                             </View>
                           </View>
                         </View>
                       </View>
-                    </View>
-                    <View
-                      style={false}
-                      testID="message-content-Multiple files"
-                    >
                       <View
                         style={
                           {
-                            "gap": 2,
+                            "gap": 4,
                           }
                         }
                       >
-                        <Text
+                        <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={
                             [
                               {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
+                                "alignItems": "center",
+                                "alignSelf": "flex-start",
+                                "borderLeftWidth": 2,
+                                "flex": 1,
+                                "flexDirection": "row",
                               },
                               {
-                                "color": "#2F343D",
+                                "borderColor": "#CBCED1",
                               },
                             ]
                           }
+                          testID="reply-rocket.cat-undefined"
                         >
-                          <Text
+                          <View
                             style={
                               {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
+                                "borderRadius": 4,
+                                "flex": 1,
+                                "flexDirection": "row",
+                                "paddingLeft": 8,
+                                "paddingVertical": 4,
                               }
                             }
                           >
-                            <Text
-                              accessibilityLabel="Multiple files"
+                            <View
                               style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
+                                {
+                                  "flex": 1,
+                                  "flexDirection": "column",
+                                  "gap": 4,
+                                  "width": 200,
+                                }
                               }
                             >
-                              Multiple files
-                            </Text>
-                          </Text>
+                              <View
+                                style={
+                                  {
+                                    "alignItems": "center",
+                                    "flex": 1,
+                                    "flexDirection": "row",
+                                    "gap": 4,
+                                  }
+                                }
+                              >
+                                <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  numberOfLines={1}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flexShrink": 1,
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "500",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#6C727A",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  rocket.cat
+                                </Text>
+                                <Text
+                                  accessibilityLabel="styles.css"
+                                  accessibilityRole="text"
+                                  accessible={true}
+                                  style={
+                                    [
+                                      {
+                                        "backgroundColor": "transparent",
+                                        "flex": 1,
+                                        "fontFamily": "Inter",
+                                        "fontSize": 16,
+                                        "fontVariant": [
+                                          "tabular-nums",
+                                        ],
+                                        "fontWeight": "500",
+                                        "textAlign": "left",
+                                      },
+                                      {
+                                        "color": "#2F343D",
+                                      },
+                                    ]
+                                  }
+                                >
+                                  styles.css
+                                </Text>
+                              </View>
+                              <Text
+                                accessibilityLabel="styles.css"
+                                accessibilityRole="text"
+                                accessible={true}
+                                numberOfLines={0}
+                                style={
+                                  [
+                                    {
+                                      "backgroundColor": "transparent",
+                                      "fontFamily": "Inter",
+                                      "fontSize": 16,
+                                      "fontVariant": [
+                                        "tabular-nums",
+                                      ],
+                                      "fontWeight": "400",
+                                      "lineHeight": 22,
+                                      "textAlign": "left",
+                                    },
+                                    {
+                                      "color": "#2F343D",
+                                      "lineHeight": undefined,
+                                    },
+                                  ]
+                                }
+                                testID="markdown-preview-styles.css"
+                              >
+                                styles.css
+                              </Text>
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                    <View
+                      style={false}
+                      testID="message-content-Multiple files"
+                    >
+                      <View
+                        style={
+                          {
+                            "gap": 2,
+                          }
+                        }
+                      >
+                        <Text
+                          accessibilityLabel="Multiple files"
+                        >
+                          Multiple files
                         </Text>
                       </View>
                     </View>
@@ -97232,60 +87443,63 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -97309,6 +87523,7 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -97326,11 +87541,13 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -97434,6 +87651,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -97474,57 +87694,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Forwarded message with nested audio"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Forwarded message with nested audio"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Forwarded message with nested audio
-                            </Text>
-                          </Text>
+                          Forwarded message with nested audio
                         </Text>
                       </View>
                     </View>
@@ -97620,6 +87792,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -97858,30 +88033,47 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                           />
                                         </View>
                                         <View
-                                          collapsable={false}
-                                          hitSlop={
+                                          handlerTags={
+                                            [
+                                              2,
+                                            ]
+                                          }
+                                          onGestureHandlerEvent={[Function]}
+                                          onGestureHandlerStateChange={[Function]}
+                                          onGestureHandlerTouchEvent={[Function]}
+                                          onStartShouldSetResponder={[Function]}
+                                          pointerEvents="box-none"
+                                          style={
                                             {
-                                              "bottom": 12,
-                                              "left": 8,
-                                              "right": 8,
-                                              "top": 12,
+                                              "display": "contents",
                                             }
                                           }
-                                          style={
-                                            [
-                                              {
-                                                "borderRadius": 6,
-                                                "height": 12,
-                                                "position": "absolute",
-                                                "width": 12,
-                                              },
+                                        >
+                                          <View
+                                            hitSlop={
                                               {
-                                                "backgroundColor": "#D1EBFE",
-                                              },
-                                              [Function],
-                                            ]
-                                          }
-                                        />
+                                                "bottom": 12,
+                                                "left": 8,
+                                                "right": 8,
+                                                "top": 12,
+                                              }
+                                            }
+                                            style={
+                                              [
+                                                {
+                                                  "borderRadius": 6,
+                                                  "height": 12,
+                                                  "position": "absolute",
+                                                  "width": 12,
+                                                },
+                                                {
+                                                  "backgroundColor": "#D1EBFE",
+                                                },
+                                                [Function],
+                                              ]
+                                            }
+                                          />
+                                        </View>
                                       </View>
                                     </View>
                                   </View>
@@ -98046,60 +88238,63 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -98123,6 +88318,7 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -98140,11 +88336,13 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -98248,6 +88446,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -98288,57 +88489,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Forwarded message with nested video"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Forwarded message with nested video"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Forwarded message with nested video
-                            </Text>
-                          </Text>
+                          Forwarded message with nested video
                         </Text>
                       </View>
                     </View>
@@ -98434,6 +88587,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -98751,60 +88907,63 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -98828,6 +88987,7 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -98845,11 +89005,13 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -98953,6 +89115,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -98993,57 +89158,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message forwarded twice with file inside"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message forwarded twice with file inside"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message forwarded twice with file inside
-                            </Text>
-                          </Text>
+                          Message forwarded twice with file inside
                         </Text>
                       </View>
                     </View>
@@ -99139,6 +89256,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -99162,6 +89282,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                   rocket.cat
                                 </Text>
                                 <Text
+                                  accessibilityLabel="10:00 AM"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -99276,6 +89399,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                           }
                                         >
                                           <Text
+                                            accessibilityLabel="rocket.cat"
+                                            accessibilityRole="text"
+                                            accessible={true}
                                             numberOfLines={1}
                                             style={
                                               [
@@ -99299,6 +89425,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                             rocket.cat
                                           </Text>
                                           <Text
+                                            accessibilityLabel="10:00 AM"
+                                            accessibilityRole="text"
+                                            accessible={true}
                                             style={
                                               [
                                                 {
@@ -99413,6 +89542,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                                     }
                                                   >
                                                     <Text
+                                                      accessibilityLabel="user"
+                                                      accessibilityRole="text"
+                                                      accessible={true}
                                                       numberOfLines={1}
                                                       style={
                                                         [
@@ -99436,6 +89568,9 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                                       user
                                                     </Text>
                                                     <Text
+                                                      accessibilityLabel="document.pdf"
+                                                      accessibilityRole="text"
+                                                      accessible={true}
                                                       style={
                                                         [
                                                           {
@@ -99460,6 +89595,8 @@ exports[`Story Snapshots: MessageWithReplyAndFileLargeFont should match snapshot
                                                   </View>
                                                   <Text
                                                     accessibilityLabel="document.pdf"
+                                                    accessibilityRole="text"
+                                                    accessible={true}
                                                     numberOfLines={0}
                                                     style={
                                                       [
@@ -99666,60 +89803,63 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -99743,6 +89883,7 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -99760,11 +89901,13 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -99868,6 +90011,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -99988,6 +90134,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="I'm a very long long title and I'll break"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -100019,57 +90168,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="How are you?"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="How are you?"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      How are you?
-                                    </Text>
-                                  </Text>
+                                  How are you?
                                 </Text>
                               </View>
                             </View>
@@ -100089,57 +90190,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -100297,60 +90350,63 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -100374,6 +90430,7 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -100391,11 +90448,13 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -100499,6 +90558,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -100619,6 +90681,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -100650,101 +90715,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="How are you? :nyan_rocket:"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "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={{"current":"Object"}}
-                                        contentFit="contain"
-                                        contentPosition={
-                                          {
-                                            "left": "50%",
-                                            "top": "50%",
-                                          }
-                                        }
-                                        height={15}
-                                        nativeViewRef={{"current":"NativeComponent"}}
-                                        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>
+                                  How are you? ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                                 </Text>
                               </View>
                             </View>
@@ -100764,57 +90737,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="I'm fine!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="I'm fine!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              I'm fine!
-                            </Text>
-                          </Text>
+                          I'm fine\\!
                         </Text>
                       </View>
                     </View>
@@ -100972,60 +90897,63 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -101049,6 +90977,7 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -101066,11 +90995,13 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -101174,6 +91105,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -101214,57 +91148,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Looks cool!"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Looks cool!"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Looks cool!
-                            </Text>
-                          </Text>
+                          Looks cool\\!
                         </Text>
                       </View>
                     </View>
@@ -101360,6 +91246,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -101405,57 +91294,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="What you think about this one?"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "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>
+                                      What you think about this one?
                                     </Text>
                                   </View>
                                   <View
@@ -101780,60 +91621,63 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -101857,6 +91701,7 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -101874,11 +91719,13 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -101982,6 +91829,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -102022,57 +91872,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Yes, I am"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Yes, I am"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Yes, I am
-                            </Text>
-                          </Text>
+                          Yes, I am
                         </Text>
                       </View>
                     </View>
@@ -102168,6 +91970,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -102213,118 +92018,9 @@ exports[`Story Snapshots: MessageWithReplyLargeFont should match snapshot 1`] =
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Are you seeing this mario :marioparty: ?"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "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={{"current":"Object"}}
-                                            contentFit="contain"
-                                            contentPosition={
-                                              {
-                                                "left": "50%",
-                                                "top": "50%",
-                                              }
-                                            }
-                                            height={15}
-                                            nativeViewRef={{"current":"NativeComponent"}}
-                                            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>
+                                      Are you seeing this mario ⁠![](https://open.rocket.chat/emoji-custom/marioparty.gif) ?
                                     </Text>
                                   </View>
                                   <View
@@ -102663,60 +92359,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -102740,6 +92439,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -102757,11 +92457,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -102856,6 +92558,9 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -102905,57 +92610,9 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="How are you?"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="How are you?"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              How are you?
-                            </Text>
-                          </Text>
+                          How are you?
                         </Text>
                       </View>
                     </View>
@@ -103017,6 +92674,9 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                         testID="message-thread-button-How are you?"
                       >
                         <Text
+                          accessibilityLabel="View thread"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -103227,60 +92887,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               ]
                             }
                           >
-                            <RNGestureHandlerButton
-                              activeOpacity={1}
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              activeUnderlayOpacity={1}
+                              animationDuration={0}
                               collapsable={false}
-                              delayLongPress={600}
-                              enabled={true}
-                              handlerTag={-1}
-                              handlerType="NativeViewGestureHandler"
-                              innerRef={null}
-                              onActiveStateChange={[Function]}
-                              onGestureHandlerEvent={[Function]}
-                              onGestureHandlerStateChange={[Function]}
-                              onPress={[Function]}
-                              rippleColor="#E4E7EA"
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[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,
-                                  },
-                                  {
-                                    "cursor": undefined,
-                                  },
+                                  [
+                                    undefined,
+                                    {
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                    },
+                                  ],
+                                  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={{}}
@@ -103312,7 +92975,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                                   
                                 </Text>
                               </View>
-                            </RNGestureHandlerButton>
+                            </View>
                           </ExternalKeyboardView>
                         </View>
                       </View>
@@ -103469,6 +93132,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="How are you?"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -103599,60 +93264,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -103676,6 +93344,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -103693,11 +93362,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -103722,6 +93393,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -103898,6 +93571,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Thread with emoji :) 😂"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -104028,60 +93703,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -104105,6 +93783,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -104122,11 +93801,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -104151,6 +93832,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -104327,6 +94010,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -104457,60 +94142,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -104534,6 +94222,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -104551,11 +94240,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -104580,6 +94271,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -104756,6 +94449,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="How are you?"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -104886,60 +94581,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -104963,6 +94661,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -104980,11 +94679,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -105009,6 +94710,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -105185,6 +94888,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -105315,60 +95020,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -105392,6 +95100,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -105409,11 +95118,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -105438,6 +95149,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -105614,6 +95327,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Thread with attachment"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -105744,60 +95459,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -105821,6 +95539,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -105838,11 +95557,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -105867,6 +95588,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="This is a description :nyan_rocket:"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -106043,6 +95766,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Thread with image attachment"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -106173,60 +95898,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -106250,6 +95978,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -106267,11 +95996,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -106296,6 +96027,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="example.png"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -106472,6 +96205,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Thread with file attachment"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -106602,60 +96337,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -106679,6 +96417,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -106696,11 +96435,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -106725,6 +96466,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="presentation.pptx"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -106901,6 +96644,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
               </View>
               <Text
                 accessibilityLabel="Thread with multiple attachments"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -107031,60 +96776,63 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -107108,6 +96856,7 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -107125,11 +96874,13 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -107154,6 +96905,8 @@ exports[`Story Snapshots: MessageWithThread should match snapshot 1`] = `
                   >
                     <Text
                       accessibilityLabel="first-file.pdf"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -107346,60 +97099,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -107423,6 +97179,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -107440,11 +97197,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -107548,6 +97307,9 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -107588,57 +97350,9 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="How are you?"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="How are you?"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              How are you?
-                            </Text>
-                          </Text>
+                          How are you?
                         </Text>
                       </View>
                     </View>
@@ -107700,6 +97414,9 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                         testID="message-thread-button-How are you?"
                       >
                         <Text
+                          accessibilityLabel="View thread"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -107910,60 +97627,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               ]
                             }
                           >
-                            <RNGestureHandlerButton
-                              activeOpacity={1}
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              activeUnderlayOpacity={1}
+                              animationDuration={0}
                               collapsable={false}
-                              delayLongPress={600}
-                              enabled={true}
-                              handlerTag={-1}
-                              handlerType="NativeViewGestureHandler"
-                              innerRef={null}
-                              onActiveStateChange={[Function]}
-                              onGestureHandlerEvent={[Function]}
-                              onGestureHandlerStateChange={[Function]}
-                              onPress={[Function]}
-                              rippleColor="#E4E7EA"
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[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,
-                                  },
-                                  {
-                                    "cursor": undefined,
-                                  },
+                                  [
+                                    undefined,
+                                    {
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                    },
+                                  ],
+                                  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={{}}
@@ -107995,7 +97715,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                                   
                                 </Text>
                               </View>
-                            </RNGestureHandlerButton>
+                            </View>
                           </ExternalKeyboardView>
                         </View>
                       </View>
@@ -108152,6 +97872,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="How are you?"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -108282,60 +98004,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -108359,6 +98084,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -108376,11 +98102,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -108405,6 +98133,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -108581,6 +98311,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="Thread with emoji :) 😂"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -108711,60 +98443,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -108788,6 +98523,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -108805,11 +98541,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -108834,6 +98572,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -109010,6 +98750,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -109140,60 +98882,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -109217,6 +98962,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -109234,11 +98980,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -109263,6 +99011,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -109439,6 +99189,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="How are you?"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -109569,60 +99321,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -109646,6 +99401,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -109663,11 +99419,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -109692,6 +99450,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -109868,6 +99628,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -109998,60 +99760,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -110075,6 +99840,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -110092,11 +99858,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -110121,6 +99889,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -110297,6 +100067,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="Thread with attachment"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -110427,60 +100199,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -110504,6 +100279,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -110521,11 +100297,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -110550,6 +100328,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="This is a description :nyan_rocket:"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -110726,6 +100506,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="Thread with image attachment"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -110856,60 +100638,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -110933,6 +100718,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -110950,11 +100736,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -110979,6 +100767,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="example.png"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -111155,6 +100945,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="Thread with file attachment"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -111285,60 +101077,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -111362,6 +101157,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -111379,11 +101175,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -111408,6 +101206,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="presentation.pptx"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -111584,6 +101384,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
               </View>
               <Text
                 accessibilityLabel="Thread with multiple attachments"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -111714,60 +101516,63 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -111791,6 +101596,7 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -111808,11 +101614,13 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -111837,6 +101645,8 @@ exports[`Story Snapshots: MessageWithThreadLargeFont should match snapshot 1`] =
                   >
                     <Text
                       accessibilityLabel="first-file.pdf"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -112028,60 +101838,63 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="jd's avatar"
                         accessible={true}
@@ -112105,6 +101918,7 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -112122,11 +101936,13 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -112221,6 +102037,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         JD
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -112270,57 +102089,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Small name (2 chars)"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Small name (2 chars)"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Small name (2 chars)
-                            </Text>
-                          </Text>
+                          Small name \\(2 chars\\)
                         </Text>
                       </View>
                     </View>
@@ -112397,60 +102168,63 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="jd's avatar"
                   accessible={true}
@@ -112474,6 +102248,7 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -112491,11 +102266,13 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -112590,6 +102367,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                   JD
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -112909,6 +102689,8 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -113082,60 +102864,63 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="john.doe's avatar"
                         accessible={true}
@@ -113159,6 +102944,7 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -113176,11 +102962,13 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -113275,6 +103063,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         John Doe
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -113324,57 +103115,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Medium name (8 chars)"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Medium name (8 chars)"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Medium name (8 chars)
-                            </Text>
-                          </Text>
+                          Medium name \\(8 chars\\)
                         </Text>
                       </View>
                     </View>
@@ -113451,60 +103194,63 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="john.doe's avatar"
                   accessible={true}
@@ -113528,6 +103274,7 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -113545,11 +103292,13 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -113644,6 +103393,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                   John Doe
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -113963,6 +103715,8 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -114136,60 +103890,63 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -114213,6 +103970,7 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -114230,11 +103988,13 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -114329,6 +104089,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         John Doe With An Extremely Long Display Name That Should Definitely Be Truncated In Any Reasonable User Interface Layout
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -114378,57 +104141,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Long name (22 chars) - should truncate"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Long name (22 chars) - should truncate"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Long name (22 chars) - should truncate
-                            </Text>
-                          </Text>
+                          Long name \\(22 chars\\) \\- should truncate
                         </Text>
                       </View>
                     </View>
@@ -114505,60 +104220,63 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -114582,6 +104300,7 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -114599,11 +104318,13 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -114698,6 +104419,9 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
                   John Doe With An Extremely Long Display Name That Should Definitely Be Truncated In Any Reasonable User Interface Layout
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -115017,6 +104741,8 @@ exports[`Story Snapshots: Names should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -115203,60 +104929,63 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -115280,6 +105009,7 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -115297,11 +105027,13 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -115396,6 +105128,9 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -115475,57 +105210,9 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message header
-                            </Text>
-                          </Text>
+                          Message header
                         </Text>
                       </View>
                     </View>
@@ -115680,57 +105367,9 @@ exports[`Story Snapshots: Pinned should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message without header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message without header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message without header
-                            </Text>
-                          </Text>
+                          Message without header
                         </Text>
                       </View>
                     </View>
@@ -115938,60 +105577,63 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -116015,6 +105657,7 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -116032,11 +105675,13 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -116170,6 +105815,9 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -116210,57 +105858,9 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message header
-                            </Text>
-                          </Text>
+                          Message header
                         </Text>
                       </View>
                     </View>
@@ -116415,57 +106015,9 @@ exports[`Story Snapshots: PinnedLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message without header"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message without header"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message without header
-                            </Text>
-                          </Text>
+                          Message without header
                         </Text>
                       </View>
                     </View>
@@ -116673,60 +106225,63 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -116750,6 +106305,7 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -116767,11 +106323,13 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -116866,6 +106424,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -116915,57 +106476,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Reactions"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Reactions"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Reactions
-                            </Text>
-                          </Text>
+                          Reactions
                         </Text>
                       </View>
                     </View>
@@ -117051,6 +106564,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😂"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -117172,6 +106688,7 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -117185,6 +106702,8 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -117285,6 +106804,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🤔"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -117391,6 +106913,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🤔"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -117679,60 +107204,63 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -117756,6 +107284,7 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -117773,11 +107302,13 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -117872,6 +107403,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -117921,57 +107455,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Multiple Reactions"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Multiple Reactions"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Multiple Reactions
-                            </Text>
-                          </Text>
+                          Multiple Reactions
                         </Text>
                       </View>
                     </View>
@@ -118072,6 +107558,7 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -118085,6 +107572,8 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -118200,6 +107689,7 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -118213,6 +107703,8 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -118328,6 +107820,7 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -118341,6 +107834,8 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -118441,6 +107936,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="❤️"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -118547,6 +108045,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🐶"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -118653,6 +108154,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😀"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -118759,6 +108263,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😬"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -118865,6 +108372,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😁"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -119166,60 +108676,63 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -119243,6 +108756,7 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -119260,11 +108774,13 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -119368,6 +108884,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -119408,57 +108927,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Reactions"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Reactions"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Reactions
-                            </Text>
-                          </Text>
+                          Reactions
                         </Text>
                       </View>
                     </View>
@@ -119544,6 +109015,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😂"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -119665,6 +109139,7 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -119678,6 +109153,8 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -119778,6 +109255,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🤔"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -119884,6 +109364,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🤔"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -120172,60 +109655,63 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -120249,6 +109735,7 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -120266,11 +109753,13 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -120374,6 +109863,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -120414,57 +109906,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Multiple Reactions"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Multiple Reactions"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Multiple Reactions
-                            </Text>
-                          </Text>
+                          Multiple Reactions
                         </Text>
                       </View>
                     </View>
@@ -120565,6 +110009,7 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -120578,6 +110023,8 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -120693,6 +110140,7 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -120706,6 +110154,8 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -120821,6 +110271,7 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                             onLoadStart={[Function]}
                             onProgress={[Function]}
                             placeholder={[]}
+                            sfEffect={null}
                             source={
                               [
                                 {
@@ -120834,6 +110285,8 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                                 "width": 19,
                               }
                             }
+                            symbolSize={null}
+                            symbolWeight={null}
                             transition={null}
                             width={19}
                           />
@@ -120934,6 +110387,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="❤️"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -121040,6 +110496,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="🐶"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -121146,6 +110605,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😀"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -121252,6 +110714,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😬"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -121358,6 +110823,9 @@ exports[`Story Snapshots: ReactionsLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
+                            accessibilityLabel="😁"
+                            accessibilityRole="text"
+                            accessible={true}
                             style={
                               {
                                 "color": "#ffffff",
@@ -121660,60 +111128,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -121737,6 +111208,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -121754,11 +111226,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -121853,6 +111327,9 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -121902,57 +111379,9 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="How are you?"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="How are you?"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              How are you?
-                            </Text>
-                          </Text>
+                          How are you?
                         </Text>
                       </View>
                     </View>
@@ -122014,6 +111443,9 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                         testID="message-thread-button-How are you?"
                       >
                         <Text
+                          accessibilityLabel="View thread"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -122224,60 +111656,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                               ]
                             }
                           >
-                            <RNGestureHandlerButton
-                              activeOpacity={1}
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              activeUnderlayOpacity={1}
+                              animationDuration={0}
                               collapsable={false}
-                              delayLongPress={600}
-                              enabled={true}
-                              handlerTag={-1}
-                              handlerType="NativeViewGestureHandler"
-                              innerRef={null}
-                              onActiveStateChange={[Function]}
-                              onGestureHandlerEvent={[Function]}
-                              onGestureHandlerStateChange={[Function]}
-                              onPress={[Function]}
-                              rippleColor="#E4E7EA"
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[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,
-                                  },
-                                  {
-                                    "cursor": undefined,
-                                  },
+                                  [
+                                    undefined,
+                                    {
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                    },
+                                  ],
+                                  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={{}}
@@ -122309,7 +111744,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                                   
                                 </Text>
                               </View>
-                            </RNGestureHandlerButton>
+                            </View>
                           </ExternalKeyboardView>
                         </View>
                       </View>
@@ -122473,60 +111908,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -122550,6 +111988,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -122567,11 +112006,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -122596,6 +112037,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -122779,60 +112222,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -122856,6 +112302,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -122873,11 +112320,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -122902,6 +112351,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -123085,60 +112536,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -123162,6 +112616,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -123179,11 +112634,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -123208,6 +112665,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButton should m
                   >
                     <Text
                       accessibilityLabel="This is a description"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -123400,60 +112859,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -123477,6 +112939,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -123494,11 +112957,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -123602,6 +113067,9 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -123642,57 +113110,9 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="How are you?"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="How are you?"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              How are you?
-                            </Text>
-                          </Text>
+                          How are you?
                         </Text>
                       </View>
                     </View>
@@ -123754,6 +113174,9 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                         testID="message-thread-button-How are you?"
                       >
                         <Text
+                          accessibilityLabel="View thread"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -123964,60 +113387,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                               ]
                             }
                           >
-                            <RNGestureHandlerButton
-                              activeOpacity={1}
+                            <View
+                              accessibilityState={
+                                {
+                                  "busy": undefined,
+                                  "checked": undefined,
+                                  "disabled": undefined,
+                                  "expanded": undefined,
+                                  "selected": undefined,
+                                }
+                              }
+                              accessibilityValue={
+                                {
+                                  "max": undefined,
+                                  "min": undefined,
+                                  "now": undefined,
+                                  "text": undefined,
+                                }
+                              }
+                              accessible={true}
+                              activeUnderlayOpacity={1}
+                              animationDuration={0}
                               collapsable={false}
-                              delayLongPress={600}
-                              enabled={true}
-                              handlerTag={-1}
-                              handlerType="NativeViewGestureHandler"
-                              innerRef={null}
-                              onActiveStateChange={[Function]}
-                              onGestureHandlerEvent={[Function]}
-                              onGestureHandlerStateChange={[Function]}
-                              onPress={[Function]}
-                              rippleColor="#E4E7EA"
+                              focusable={true}
+                              onBlur={[Function]}
+                              onClick={[Function]}
+                              onFocus={[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,
-                                  },
-                                  {
-                                    "cursor": undefined,
-                                  },
+                                  [
+                                    undefined,
+                                    {
+                                      "margin": undefined,
+                                      "marginBottom": undefined,
+                                      "marginEnd": undefined,
+                                      "marginHorizontal": undefined,
+                                      "marginLeft": undefined,
+                                      "marginRight": undefined,
+                                      "marginStart": undefined,
+                                      "marginTop": undefined,
+                                      "marginVertical": undefined,
+                                    },
+                                    {
+                                      "backgroundColor": undefined,
+                                      "borderRadius": undefined,
+                                    },
+                                  ],
+                                  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={{}}
@@ -124049,7 +113475,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                                   
                                 </Text>
                               </View>
-                            </RNGestureHandlerButton>
+                            </View>
                           </ExternalKeyboardView>
                         </View>
                       </View>
@@ -124213,60 +113639,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -124290,6 +113719,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -124307,11 +113737,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -124336,6 +113768,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -124519,60 +113953,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -124596,6 +114033,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -124613,11 +114051,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -124642,6 +114082,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -124825,60 +114267,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -124902,6 +114347,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -124919,11 +114365,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -124948,6 +114396,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadButtonLargeFont
                   >
                     <Text
                       accessibilityLabel="This is a description"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -125137,6 +114587,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
               </View>
               <Text
                 accessibilityLabel="How are you?"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -125267,60 +114719,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -125344,6 +114799,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -125361,11 +114817,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -125390,6 +114848,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -125573,60 +115033,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -125650,6 +115113,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -125667,11 +115131,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -125696,6 +115162,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                   >
                     <Text
                       accessibilityLabel="Cool!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -125879,60 +115347,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -125956,6 +115427,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -125973,11 +115445,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -126002,6 +115476,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -126185,60 +115661,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -126262,6 +115741,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -126279,11 +115759,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                               "width": 20,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={20}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -126308,6 +115790,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReply should ma
                   >
                     <Text
                       accessibilityLabel="This is a description"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -126497,6 +115981,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
               </View>
               <Text
                 accessibilityLabel="How are you?"
+                accessibilityRole="text"
+                accessible={true}
                 numberOfLines={1}
                 style={
                   [
@@ -126627,60 +116113,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -126704,6 +116193,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -126721,11 +116211,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -126750,6 +116242,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                   >
                     <Text
                       accessibilityLabel="I'm fine!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -126933,60 +116427,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -127010,6 +116507,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -127027,11 +116525,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -127056,6 +116556,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                   >
                     <Text
                       accessibilityLabel="Cool!"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -127239,60 +116741,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -127316,6 +116821,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -127333,11 +116839,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -127362,6 +116870,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                   >
                     <Text
                       accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -127545,60 +117055,63 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -127622,6 +117135,7 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -127639,11 +117153,13 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                               "width": 26,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={26}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -127668,6 +117184,8 @@ exports[`Story Snapshots: SequentialThreadMessagesFollowingThreadReplyLargeFont
                   >
                     <Text
                       accessibilityLabel="This is a description"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -127859,60 +117377,63 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -127936,6 +117457,7 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -127953,11 +117475,13 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -128052,6 +117576,9 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -128104,110 +117631,69 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Test Button"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Test Button"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Test Button
-                            </Text>
-                          </Text>
+                          Test Button
                         </Text>
                       </View>
-                      <RNGestureHandlerButton
+                      <View
                         accessibilityLabel="Text button"
                         accessibilityRole="button"
-                        activeOpacity={0.105}
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": undefined,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessibilityValue={
+                          {
+                            "max": undefined,
+                            "min": undefined,
+                            "now": undefined,
+                            "text": undefined,
+                          }
+                        }
+                        accessible={true}
+                        activeUnderlayOpacity={0.105}
+                        animationDuration={0}
                         collapsable={false}
-                        delayLongPress={600}
-                        enabled={true}
-                        handlerTag={-1}
-                        handlerType="NativeViewGestureHandler"
-                        innerRef={null}
-                        onActiveStateChange={[Function]}
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        onPress={[Function]}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           [
                             {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
                               "justifyContent": "center",
-                              "marginBottom": 12,
                               "paddingHorizontal": 16,
                               "paddingVertical": 14,
                             },
                             {
-                              "cursor": undefined,
+                              "borderRadius": 4,
+                              "marginBottom": 12,
                             },
+                            {
+                              "backgroundColor": "#156FF5",
+                            },
+                            {},
+                            undefined,
                           ]
                         }
                         underlayColor="black"
                       >
-                        <View
-                          collapsable={false}
-                          style={
-                            {
-                              "backgroundColor": "black",
-                              "borderBottomLeftRadius": undefined,
-                              "borderBottomRightRadius": undefined,
-                              "borderRadius": 4,
-                              "borderTopLeftRadius": undefined,
-                              "borderTopRightRadius": undefined,
-                              "bottom": 0,
-                              "left": 0,
-                              "opacity": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                            }
-                          }
-                        />
                         <Text
+                          accessibilityLabel="Text button"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -128229,7 +117715,7 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         >
                           Text button
                         </Text>
-                      </RNGestureHandlerButton>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -128385,60 +117871,63 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -128462,6 +117951,7 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -128479,11 +117969,13 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -128578,6 +118070,9 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -128630,136 +118125,9 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="🥑 Message with markdown"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {},
-                                  false,
-                                ]
-                              }
-                            >
-                              🥑
-                            </Text>
-                            <Text
-                              accessibilityLabel=" "
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                               
-                            </Text>
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "700",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Message with markdown"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "700",
-                                        "textAlign": "left",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Message with markdown
-                                </Text>
-                              </Text>
-                            </Text>
-                          </Text>
+                          🥑 **Message with markdown**
                         </Text>
                         <View
                           style={
@@ -128769,83 +118137,9 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                           }
                         />
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Some text"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "fontStyle": "italic",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Some text"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                      {
-                                        "fontStyle": "italic",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Some text
-                                </Text>
-                              </Text>
-                            </Text>
-                          </Text>
+                          _Some text_
                         </Text>
                         <View
                           style={
@@ -128855,110 +118149,69 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                           }
                         />
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is a test"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="This is a test"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              This is a test
-                            </Text>
-                          </Text>
+                          This is a test
                         </Text>
                       </View>
-                      <RNGestureHandlerButton
+                      <View
                         accessibilityLabel="Text button"
                         accessibilityRole="button"
-                        activeOpacity={0.105}
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": undefined,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessibilityValue={
+                          {
+                            "max": undefined,
+                            "min": undefined,
+                            "now": undefined,
+                            "text": undefined,
+                          }
+                        }
+                        accessible={true}
+                        activeUnderlayOpacity={0.105}
+                        animationDuration={0}
                         collapsable={false}
-                        delayLongPress={600}
-                        enabled={true}
-                        handlerTag={-1}
-                        handlerType="NativeViewGestureHandler"
-                        innerRef={null}
-                        onActiveStateChange={[Function]}
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        onPress={[Function]}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           [
                             {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
                               "justifyContent": "center",
-                              "marginBottom": 12,
                               "paddingHorizontal": 16,
                               "paddingVertical": 14,
                             },
                             {
-                              "cursor": undefined,
+                              "borderRadius": 4,
+                              "marginBottom": 12,
+                            },
+                            {
+                              "backgroundColor": "#156FF5",
                             },
+                            {},
+                            undefined,
                           ]
                         }
                         underlayColor="black"
                       >
-                        <View
-                          collapsable={false}
-                          style={
-                            {
-                              "backgroundColor": "black",
-                              "borderBottomLeftRadius": undefined,
-                              "borderBottomRightRadius": undefined,
-                              "borderRadius": 4,
-                              "borderTopLeftRadius": undefined,
-                              "borderTopRightRadius": undefined,
-                              "bottom": 0,
-                              "left": 0,
-                              "opacity": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                            }
-                          }
-                        />
                         <Text
+                          accessibilityLabel="Text button"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -128980,7 +118233,7 @@ exports[`Story Snapshots: ShowButtonAsAttachment should match snapshot 1`] = `
                         >
                           Text button
                         </Text>
-                      </RNGestureHandlerButton>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -129149,60 +118402,63 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -129226,6 +118482,7 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -129243,11 +118500,13 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -129351,6 +118610,9 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -129394,110 +118656,69 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Test Button"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Test Button"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Test Button
-                            </Text>
-                          </Text>
+                          Test Button
                         </Text>
                       </View>
-                      <RNGestureHandlerButton
+                      <View
                         accessibilityLabel="Text button"
                         accessibilityRole="button"
-                        activeOpacity={0.105}
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": undefined,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessibilityValue={
+                          {
+                            "max": undefined,
+                            "min": undefined,
+                            "now": undefined,
+                            "text": undefined,
+                          }
+                        }
+                        accessible={true}
+                        activeUnderlayOpacity={0.105}
+                        animationDuration={0}
                         collapsable={false}
-                        delayLongPress={600}
-                        enabled={true}
-                        handlerTag={-1}
-                        handlerType="NativeViewGestureHandler"
-                        innerRef={null}
-                        onActiveStateChange={[Function]}
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        onPress={[Function]}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           [
                             {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
                               "justifyContent": "center",
-                              "marginBottom": 12,
                               "paddingHorizontal": 16,
                               "paddingVertical": 14,
                             },
                             {
-                              "cursor": undefined,
+                              "borderRadius": 4,
+                              "marginBottom": 12,
+                            },
+                            {
+                              "backgroundColor": "#156FF5",
                             },
+                            {},
+                            undefined,
                           ]
                         }
                         underlayColor="black"
                       >
-                        <View
-                          collapsable={false}
-                          style={
-                            {
-                              "backgroundColor": "black",
-                              "borderBottomLeftRadius": undefined,
-                              "borderBottomRightRadius": undefined,
-                              "borderRadius": 4,
-                              "borderTopLeftRadius": undefined,
-                              "borderTopRightRadius": undefined,
-                              "bottom": 0,
-                              "left": 0,
-                              "opacity": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                            }
-                          }
-                        />
                         <Text
+                          accessibilityLabel="Text button"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -129519,7 +118740,7 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                         >
                           Text button
                         </Text>
-                      </RNGestureHandlerButton>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -129675,60 +118896,63 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -129752,6 +118976,7 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -129769,11 +118994,13 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -129877,6 +119104,9 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -129920,136 +119150,9 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="🥑 Message with markdown"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                [
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "fontFamily": "Inter",
-                                    "fontSize": 16,
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "lineHeight": 22,
-                                    "textAlign": "left",
-                                  },
-                                  {},
-                                  false,
-                                ]
-                              }
-                            >
-                              🥑
-                            </Text>
-                            <Text
-                              accessibilityLabel=" "
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                               
-                            </Text>
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "700",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Message with markdown"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "700",
-                                        "textAlign": "left",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Message with markdown
-                                </Text>
-                              </Text>
-                            </Text>
-                          </Text>
+                          🥑 **Message with markdown**
                         </Text>
                         <View
                           style={
@@ -130059,83 +119162,9 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                           }
                         />
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Some text"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              style={
-                                {
-                                  "fontStyle": "italic",
-                                }
-                              }
-                            >
-                              <Text
-                                style={
-                                  {
-                                    "backgroundColor": "transparent",
-                                    "flexShrink": 1,
-                                    "fontFamily": "Inter",
-                                    "fontVariant": [
-                                      "tabular-nums",
-                                    ],
-                                    "fontWeight": "400",
-                                    "textAlign": "left",
-                                  }
-                                }
-                              >
-                                <Text
-                                  accessibilityLabel="Some text"
-                                  style={
-                                    [
-                                      {
-                                        "flexShrink": 1,
-                                        "fontSize": 16,
-                                        "lineHeight": 22,
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                      {
-                                        "fontStyle": "italic",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  Some text
-                                </Text>
-                              </Text>
-                            </Text>
-                          </Text>
+                          _Some text_
                         </Text>
                         <View
                           style={
@@ -130145,110 +119174,69 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                           }
                         />
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="This is a test"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="This is a test"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              This is a test
-                            </Text>
-                          </Text>
+                          This is a test
                         </Text>
                       </View>
-                      <RNGestureHandlerButton
+                      <View
                         accessibilityLabel="Text button"
                         accessibilityRole="button"
-                        activeOpacity={0.105}
+                        accessibilityState={
+                          {
+                            "busy": undefined,
+                            "checked": undefined,
+                            "disabled": undefined,
+                            "expanded": undefined,
+                            "selected": undefined,
+                          }
+                        }
+                        accessibilityValue={
+                          {
+                            "max": undefined,
+                            "min": undefined,
+                            "now": undefined,
+                            "text": undefined,
+                          }
+                        }
+                        accessible={true}
+                        activeUnderlayOpacity={0.105}
+                        animationDuration={0}
                         collapsable={false}
-                        delayLongPress={600}
-                        enabled={true}
-                        handlerTag={-1}
-                        handlerType="NativeViewGestureHandler"
-                        innerRef={null}
-                        onActiveStateChange={[Function]}
-                        onGestureHandlerEvent={[Function]}
-                        onGestureHandlerStateChange={[Function]}
-                        onPress={[Function]}
+                        focusable={true}
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onResponderGrant={[Function]}
+                        onResponderMove={[Function]}
+                        onResponderRelease={[Function]}
+                        onResponderTerminate={[Function]}
+                        onResponderTerminationRequest={[Function]}
+                        onStartShouldSetResponder={[Function]}
                         style={
                           [
                             {
-                              "backgroundColor": "#156FF5",
-                              "borderRadius": 4,
                               "justifyContent": "center",
-                              "marginBottom": 12,
                               "paddingHorizontal": 16,
                               "paddingVertical": 14,
                             },
                             {
-                              "cursor": undefined,
+                              "borderRadius": 4,
+                              "marginBottom": 12,
                             },
+                            {
+                              "backgroundColor": "#156FF5",
+                            },
+                            {},
+                            undefined,
                           ]
                         }
                         underlayColor="black"
                       >
-                        <View
-                          collapsable={false}
-                          style={
-                            {
-                              "backgroundColor": "black",
-                              "borderBottomLeftRadius": undefined,
-                              "borderBottomRightRadius": undefined,
-                              "borderRadius": 4,
-                              "borderTopLeftRadius": undefined,
-                              "borderTopRightRadius": undefined,
-                              "bottom": 0,
-                              "left": 0,
-                              "opacity": 0,
-                              "position": "absolute",
-                              "right": 0,
-                              "top": 0,
-                            }
-                          }
-                        />
                         <Text
+                          accessibilityLabel="Text button"
+                          accessibilityRole="text"
+                          accessible={true}
                           style={
                             [
                               {
@@ -130270,7 +119258,7 @@ exports[`Story Snapshots: ShowButtonAsAttachmentLargeFont should match snapshot
                         >
                           Text button
                         </Text>
-                      </RNGestureHandlerButton>
+                      </View>
                     </View>
                   </View>
                 </View>
@@ -130439,60 +119427,63 @@ exports[`Story Snapshots: StaticAvatar should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="'s avatar"
                         accessible={true}
@@ -130516,6 +119507,7 @@ exports[`Story Snapshots: StaticAvatar should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -130533,11 +119525,13 @@ exports[`Story Snapshots: StaticAvatar should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -130632,6 +119626,9 @@ exports[`Story Snapshots: StaticAvatar should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -130681,57 +119678,9 @@ exports[`Story Snapshots: StaticAvatar should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -130902,60 +119851,63 @@ exports[`Story Snapshots: StaticAvatarLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="'s avatar"
                         accessible={true}
@@ -130979,6 +119931,7 @@ exports[`Story Snapshots: StaticAvatarLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -130996,11 +119949,13 @@ exports[`Story Snapshots: StaticAvatarLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -131104,6 +120059,9 @@ exports[`Story Snapshots: StaticAvatarLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -131144,57 +120102,9 @@ exports[`Story Snapshots: StaticAvatarLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -131291,60 +120201,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -131368,6 +120281,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -131385,11 +120299,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -131531,60 +120447,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -131608,6 +120527,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -131625,11 +120545,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -131771,60 +120693,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -131848,6 +120773,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -131865,11 +120791,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -132014,60 +120942,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -132091,6 +121022,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -132108,11 +121040,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -132254,60 +121188,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -132331,6 +121268,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -132348,11 +121286,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -132494,60 +121434,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -132571,6 +121514,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -132588,11 +121532,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -132734,60 +121680,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -132811,6 +121760,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -132828,11 +121778,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -132974,60 +121926,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -133051,6 +122006,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -133068,11 +122024,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -133214,60 +122172,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -133291,6 +122252,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -133308,11 +122270,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -133454,60 +122418,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -133531,6 +122498,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -133548,11 +122516,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -133694,60 +122664,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -133771,6 +122744,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -133788,11 +122762,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -133934,60 +122910,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -134011,6 +122990,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -134028,11 +123008,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -134174,60 +123156,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -134251,6 +123236,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -134268,11 +123254,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -134414,60 +123402,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -134491,6 +123482,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -134508,11 +123500,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -134654,60 +123648,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -134731,6 +123728,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -134748,11 +123746,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -134894,60 +123894,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -134971,6 +123974,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -134988,11 +123992,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -135134,60 +124140,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -135211,6 +124220,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -135228,11 +124238,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -135374,60 +124386,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -135451,6 +124466,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -135468,11 +124484,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -135614,60 +124632,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -135691,6 +124712,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -135708,11 +124730,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -135854,60 +124878,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -135931,6 +124958,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -135948,11 +124976,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -136094,60 +125124,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -136171,6 +125204,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -136188,11 +125222,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -136334,60 +125370,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -136411,6 +125450,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -136428,11 +125468,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -136574,60 +125616,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -136651,6 +125696,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -136668,11 +125714,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -136814,60 +125862,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -136891,6 +125942,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -136908,11 +125960,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -137054,60 +126108,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -137131,6 +126188,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -137148,11 +126206,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -137294,60 +126354,63 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -137371,6 +126434,7 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -137388,11 +126452,13 @@ exports[`Story Snapshots: SystemMessages should match snapshot 1`] = `
                         "width": 20,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={20}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -137522,60 +126588,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -137599,6 +126668,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -137616,11 +126686,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -137762,60 +126834,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -137839,6 +126914,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -137856,11 +126932,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -138002,60 +127080,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -138079,6 +127160,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -138096,11 +127178,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -138245,60 +127329,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -138322,6 +127409,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -138339,11 +127427,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -138485,60 +127575,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -138562,6 +127655,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -138579,11 +127673,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -138725,60 +127821,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -138802,6 +127901,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -138819,11 +127919,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -138965,60 +128067,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -139042,6 +128147,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -139059,11 +128165,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -139205,60 +128313,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -139282,6 +128393,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -139299,11 +128411,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -139445,60 +128559,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -139522,6 +128639,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -139539,11 +128657,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -139685,60 +128805,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -139762,6 +128885,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -139779,11 +128903,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -139925,60 +129051,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -140002,6 +129131,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -140019,11 +129149,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -140165,60 +129297,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -140242,6 +129377,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -140259,11 +129395,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -140405,60 +129543,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -140482,6 +129623,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -140499,11 +129641,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -140645,60 +129789,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -140722,6 +129869,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -140739,11 +129887,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -140885,60 +130035,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -140962,6 +130115,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -140979,11 +130133,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -141125,60 +130281,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -141202,6 +130361,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -141219,11 +130379,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -141365,60 +130527,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -141442,6 +130607,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -141459,11 +130625,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -141605,60 +130773,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -141682,6 +130853,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -141699,11 +130871,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -141845,60 +131019,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -141922,6 +131099,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -141939,11 +131117,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -142085,60 +131265,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -142162,6 +131345,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -142179,11 +131363,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -142325,60 +131511,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -142402,6 +131591,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -142419,11 +131609,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -142565,60 +131757,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -142642,6 +131837,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -142659,11 +131855,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -142805,60 +132003,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -142882,6 +132083,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -142899,11 +132101,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -143045,60 +132249,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -143122,6 +132329,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -143139,11 +132347,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -143285,60 +132495,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -143362,6 +132575,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -143379,11 +132593,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -143525,60 +132741,63 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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}
@@ -143602,6 +132821,7 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -143619,11 +132839,13 @@ exports[`Story Snapshots: SystemMessagesLargeFont should match snapshot 1`] = `
                         "width": 26,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={26}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -143819,60 +133041,63 @@ exports[`Story Snapshots: Temp should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -143896,6 +133121,7 @@ exports[`Story Snapshots: Temp should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -143913,11 +133139,13 @@ exports[`Story Snapshots: Temp should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -144012,6 +133240,9 @@ exports[`Story Snapshots: Temp should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -144065,57 +133296,9 @@ exports[`Story Snapshots: Temp should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Temp message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Temp message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Temp message
-                            </Text>
-                          </Text>
+                          Temp message
                         </Text>
                       </View>
                     </View>
@@ -144278,60 +133461,63 @@ exports[`Story Snapshots: TempLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -144355,6 +133541,7 @@ exports[`Story Snapshots: TempLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -144372,11 +133559,13 @@ exports[`Story Snapshots: TempLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -144480,6 +133669,9 @@ exports[`Story Snapshots: TempLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -144524,57 +133716,9 @@ exports[`Story Snapshots: TempLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Temp message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Temp message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Temp message
-                            </Text>
-                          </Text>
+                          Temp message
                         </Text>
                       </View>
                     </View>
@@ -144745,60 +133889,63 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -144822,6 +133969,7 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -144839,11 +133987,13 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -144938,6 +134088,9 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -145067,6 +134220,9 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Title"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -145097,57 +134253,9 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Image text"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Image text"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Image text
-                                    </Text>
-                                  </Text>
+                                  Image text
                                 </Text>
                               </View>
                             </View>
@@ -145171,6 +134279,7 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                               onLoadStart={[Function]}
                               onProgress={[Function]}
                               placeholder={[]}
+                              sfEffect={null}
                               source={
                                 [
                                   {
@@ -145188,6 +134297,8 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                                   "width": 80,
                                 }
                               }
+                              symbolSize={null}
+                              symbolWeight={null}
                               transition={null}
                               width={80}
                             />
@@ -145207,57 +134318,9 @@ exports[`Story Snapshots: ThumbnailFromServer should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="this is a thumbnail"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="this is a thumbnail"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              this is a thumbnail
-                            </Text>
-                          </Text>
+                          this is a thumbnail
                         </Text>
                       </View>
                     </View>
@@ -145428,60 +134491,63 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -145505,6 +134571,7 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -145522,11 +134589,13 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -145630,6 +134699,9 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -145750,6 +134822,9 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="Title"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   style={
                                     [
                                       {
@@ -145780,57 +134855,9 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Image text"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Image text"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Image text
-                                    </Text>
-                                  </Text>
+                                  Image text
                                 </Text>
                               </View>
                             </View>
@@ -145854,6 +134881,7 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                               onLoadStart={[Function]}
                               onProgress={[Function]}
                               placeholder={[]}
+                              sfEffect={null}
                               source={
                                 [
                                   {
@@ -145871,6 +134899,8 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                                   "width": 80,
                                 }
                               }
+                              symbolSize={null}
+                              symbolWeight={null}
                               transition={null}
                               width={80}
                             />
@@ -145890,57 +134920,9 @@ exports[`Story Snapshots: ThumbnailFromServerLargeFont should match snapshot 1`]
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="this is a thumbnail"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="this is a thumbnail"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              this is a thumbnail
-                            </Text>
-                          </Text>
+                          this is a thumbnail
                         </Text>
                       </View>
                     </View>
@@ -146111,60 +135093,63 @@ exports[`Story Snapshots: TimeFormat should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -146188,6 +135173,7 @@ exports[`Story Snapshots: TimeFormat should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -146205,11 +135191,13 @@ exports[`Story Snapshots: TimeFormat should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -146304,6 +135292,9 @@ exports[`Story Snapshots: TimeFormat should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10 November 2017"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -146353,57 +135344,9 @@ exports[`Story Snapshots: TimeFormat should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Testing"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Testing"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Testing
-                            </Text>
-                          </Text>
+                          Testing
                         </Text>
                       </View>
                     </View>
@@ -146574,60 +135517,63 @@ exports[`Story Snapshots: TimeFormatLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -146651,6 +135597,7 @@ exports[`Story Snapshots: TimeFormatLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -146668,11 +135615,13 @@ exports[`Story Snapshots: TimeFormatLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -146776,6 +135725,9 @@ exports[`Story Snapshots: TimeFormatLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10 November 2017"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -146816,57 +135768,9 @@ exports[`Story Snapshots: TimeFormatLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Testing"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Testing"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Testing
-                            </Text>
-                          </Text>
+                          Testing
                         </Text>
                       </View>
                     </View>
@@ -147037,60 +135941,63 @@ exports[`Story Snapshots: Translated should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="other.user's avatar"
                         accessible={true}
@@ -147114,6 +136021,7 @@ exports[`Story Snapshots: Translated should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -147131,11 +136039,13 @@ exports[`Story Snapshots: Translated should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -147230,6 +136140,9 @@ exports[`Story Snapshots: Translated should match snapshot 1`] = `
                         other.user
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -147314,57 +136227,9 @@ exports[`Story Snapshots: Translated should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message translated"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message translated"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message translated
-                            </Text>
-                          </Text>
+                          Message translated
                         </Text>
                       </View>
                     </View>
@@ -147535,60 +136400,63 @@ exports[`Story Snapshots: TranslatedLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="other.user's avatar"
                         accessible={true}
@@ -147612,6 +136480,7 @@ exports[`Story Snapshots: TranslatedLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -147629,11 +136498,13 @@ exports[`Story Snapshots: TranslatedLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -147772,6 +136643,9 @@ exports[`Story Snapshots: TranslatedLargeFont should match snapshot 1`] = `
                     </View>
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -147812,57 +136686,9 @@ exports[`Story Snapshots: TranslatedLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message translated"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message translated"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message translated
-                            </Text>
-                          </Text>
+                          Message translated
                         </Text>
                       </View>
                     </View>
@@ -148033,60 +136859,63 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -148110,6 +136939,7 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -148127,11 +136957,13 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -148226,6 +137058,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -148355,6 +137190,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -148386,57 +137224,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields
-                                    </Text>
-                                  </Text>
+                                  Custom fields
                                 </Text>
                               </View>
                               <View
@@ -148462,6 +137252,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -148490,57 +137283,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -148557,6 +137302,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -148585,97 +137333,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          onLongPress={[Function]}
-                                          onPress={[Function]}
-                                          style={
-                                            [
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "fontFamily": "Inter",
-                                                "fontSize": 16,
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "400",
-                                                "textAlign": "left",
-                                              },
-                                              {
-                                                "color": "#095AD2",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <Text
-                                            style={
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "flexShrink": 1,
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "400",
-                                                "textAlign": "left",
-                                              }
-                                            }
-                                          >
-                                            <Text
-                                              accessibilityLabel="Value 2"
-                                              style={
-                                                [
-                                                  {
-                                                    "flexShrink": 1,
-                                                    "fontSize": 16,
-                                                    "lineHeight": 22,
-                                                  },
-                                                  {
-                                                    "color": "#2F343D",
-                                                  },
-                                                  {
-                                                    "color": "#095AD2",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              Value 2
-                                            </Text>
-                                          </Text>
-                                        </Text>
-                                      </Text>
+                                      [Value 2](&lt;https://google.com/&gt;)
                                     </Text>
                                   </View>
                                 </View>
@@ -148769,6 +137429,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -148800,57 +137463,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields 2"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields 2"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields 2
-                                    </Text>
-                                  </Text>
+                                  Custom fields 2
                                 </Text>
                               </View>
                               <View
@@ -148876,6 +137491,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -148904,57 +137522,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -148971,6 +137541,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -148999,95 +137572,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontVariant": [
-                                                "tabular-nums",
-                                              ],
-                                              "fontWeight": "700",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            style={
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "flexShrink": 1,
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "400",
-                                                "textAlign": "left",
-                                              }
-                                            }
-                                          >
-                                            <Text
-                                              accessibilityLabel="Value 2"
-                                              style={
-                                                [
-                                                  {
-                                                    "flexShrink": 1,
-                                                    "fontSize": 16,
-                                                    "lineHeight": 22,
-                                                  },
-                                                  {
-                                                    "color": "#2F343D",
-                                                  },
-                                                  {
-                                                    "backgroundColor": "transparent",
-                                                    "fontFamily": "Inter",
-                                                    "fontVariant": [
-                                                      "tabular-nums",
-                                                    ],
-                                                    "fontWeight": "700",
-                                                    "textAlign": "left",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              Value 2
-                                            </Text>
-                                          </Text>
-                                        </Text>
-                                      </Text>
+                                      **Value 2**
                                     </Text>
                                   </View>
                                 </View>
@@ -149109,57 +137596,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdown should match snapshot
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -149330,60 +137769,63 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -149407,6 +137849,7 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -149424,11 +137867,13 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -149532,6 +137977,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -149652,6 +138100,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -149683,57 +138134,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields
-                                    </Text>
-                                  </Text>
+                                  Custom fields
                                 </Text>
                               </View>
                               <View
@@ -149759,6 +138162,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -149787,57 +138193,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -149854,6 +138212,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -149882,97 +138243,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          onLongPress={[Function]}
-                                          onPress={[Function]}
-                                          style={
-                                            [
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "fontFamily": "Inter",
-                                                "fontSize": 16,
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "400",
-                                                "textAlign": "left",
-                                              },
-                                              {
-                                                "color": "#095AD2",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <Text
-                                            style={
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "flexShrink": 1,
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "400",
-                                                "textAlign": "left",
-                                              }
-                                            }
-                                          >
-                                            <Text
-                                              accessibilityLabel="Value 2"
-                                              style={
-                                                [
-                                                  {
-                                                    "flexShrink": 1,
-                                                    "fontSize": 16,
-                                                    "lineHeight": 22,
-                                                  },
-                                                  {
-                                                    "color": "#2F343D",
-                                                  },
-                                                  {
-                                                    "color": "#095AD2",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              Value 2
-                                            </Text>
-                                          </Text>
-                                        </Text>
-                                      </Text>
+                                      [Value 2](&lt;https://google.com/&gt;)
                                     </Text>
                                   </View>
                                 </View>
@@ -150066,6 +138339,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                 }
                               >
                                 <Text
+                                  accessibilityLabel="rocket.cat"
+                                  accessibilityRole="text"
+                                  accessible={true}
                                   numberOfLines={1}
                                   style={
                                     [
@@ -150097,57 +138373,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="Custom fields 2"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="Custom fields 2"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      Custom fields 2
-                                    </Text>
-                                  </Text>
+                                  Custom fields 2
                                 </Text>
                               </View>
                               <View
@@ -150173,6 +138401,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 1"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -150201,57 +138432,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 1"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          accessibilityLabel="Value 1"
-                                          style={
-                                            [
-                                              {
-                                                "flexShrink": 1,
-                                                "fontSize": 16,
-                                                "lineHeight": 22,
-                                              },
-                                              {
-                                                "color": "#2F343D",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          Value 1
-                                        </Text>
-                                      </Text>
+                                      Value 1
                                     </Text>
                                   </View>
                                 </View>
@@ -150268,6 +138451,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                   }
                                 >
                                   <Text
+                                    accessibilityLabel="Field 2"
+                                    accessibilityRole="text"
+                                    accessible={true}
                                     style={
                                       [
                                         {
@@ -150296,95 +138482,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                                     }
                                   >
                                     <Text
-                                      style={
-                                        [
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "fontFamily": "Inter",
-                                            "fontSize": 16,
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "lineHeight": 22,
-                                            "textAlign": "left",
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
+                                      accessibilityLabel="Value 2"
                                     >
-                                      <Text
-                                        style={
-                                          {
-                                            "backgroundColor": "transparent",
-                                            "flexShrink": 1,
-                                            "fontFamily": "Inter",
-                                            "fontVariant": [
-                                              "tabular-nums",
-                                            ],
-                                            "fontWeight": "400",
-                                            "textAlign": "left",
-                                          }
-                                        }
-                                      >
-                                        <Text
-                                          style={
-                                            {
-                                              "backgroundColor": "transparent",
-                                              "fontFamily": "Inter",
-                                              "fontVariant": [
-                                                "tabular-nums",
-                                              ],
-                                              "fontWeight": "700",
-                                              "textAlign": "left",
-                                            }
-                                          }
-                                        >
-                                          <Text
-                                            style={
-                                              {
-                                                "backgroundColor": "transparent",
-                                                "flexShrink": 1,
-                                                "fontFamily": "Inter",
-                                                "fontVariant": [
-                                                  "tabular-nums",
-                                                ],
-                                                "fontWeight": "400",
-                                                "textAlign": "left",
-                                              }
-                                            }
-                                          >
-                                            <Text
-                                              accessibilityLabel="Value 2"
-                                              style={
-                                                [
-                                                  {
-                                                    "flexShrink": 1,
-                                                    "fontSize": 16,
-                                                    "lineHeight": 22,
-                                                  },
-                                                  {
-                                                    "color": "#2F343D",
-                                                  },
-                                                  {
-                                                    "backgroundColor": "transparent",
-                                                    "fontFamily": "Inter",
-                                                    "fontVariant": [
-                                                      "tabular-nums",
-                                                    ],
-                                                    "fontWeight": "700",
-                                                    "textAlign": "left",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              Value 2
-                                            </Text>
-                                          </Text>
-                                        </Text>
-                                      </Text>
+                                      **Value 2**
                                     </Text>
                                   </View>
                                 </View>
@@ -150406,57 +138506,9 @@ exports[`Story Snapshots: TwoShortCustomFieldsWithMarkdownLargeFont should match
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -150627,60 +138679,63 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -150704,6 +138759,7 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -150721,11 +138777,13 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -150820,6 +138878,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -150916,6 +138977,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Rocket.Chat - Free, Open Source, Enterprise Team Chat"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -150938,6 +139002,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                           Rocket.Chat - Free, Open Source, Enterprise Team Chat
                         </Text>
                         <Text
+                          accessibilityLabel="Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -151020,6 +139087,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -151042,6 +139112,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -151219,60 +139292,63 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -151296,6 +139372,7 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -151313,11 +139390,13 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -151412,6 +139491,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -151461,101 +139543,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message :nyan_rocket:"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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={{"current":"Object"}}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={15}
-                                nativeViewRef={{"current":"NativeComponent"}}
-                                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>
+                          Message ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                         </Text>
                       </View>
                     </View>
@@ -151618,6 +139608,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -151640,6 +139633,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -151861,6 +139857,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -151883,6 +139882,9 @@ exports[`Story Snapshots: URL should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -152080,60 +140082,63 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -152157,6 +140162,7 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -152174,11 +140180,13 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -152273,6 +140281,9 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -152369,6 +140380,9 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -152391,6 +140405,9 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -152568,60 +140585,63 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -152645,6 +140665,7 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -152662,11 +140683,13 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -152761,6 +140784,9 @@ exports[`Story Snapshots: URLImagePreview should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -153006,60 +141032,63 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -153083,6 +141112,7 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -153100,11 +141130,13 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -153208,6 +141240,9 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -153295,6 +141330,9 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -153317,6 +141355,9 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -153494,60 +141535,63 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -153571,6 +141615,7 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -153588,11 +141633,13 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -153696,6 +141743,9 @@ exports[`Story Snapshots: URLImagePreviewLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -153932,60 +141982,63 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -154009,6 +142062,7 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -154026,11 +142080,13 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -154134,6 +142190,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -154221,6 +142280,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Rocket.Chat - Free, Open Source, Enterprise Team Chat"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -154243,6 +142305,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                           Rocket.Chat - Free, Open Source, Enterprise Team Chat
                         </Text>
                         <Text
+                          accessibilityLabel="Rocket.Chat is the leading open source team chat software solution. Free, unlimited and completely customizable with on-premises and SaaS cloud hosting."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -154325,6 +142390,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -154347,6 +142415,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -154524,60 +142595,63 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -154601,6 +142675,7 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -154618,11 +142693,13 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -154726,6 +142803,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -154766,101 +142846,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message :nyan_rocket:"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "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={{"current":"Object"}}
-                                contentFit="contain"
-                                contentPosition={
-                                  {
-                                    "left": "50%",
-                                    "top": "50%",
-                                  }
-                                }
-                                height={15}
-                                nativeViewRef={{"current":"NativeComponent"}}
-                                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>
+                          Message ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                         </Text>
                       </View>
                     </View>
@@ -154923,6 +142911,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -154945,6 +142936,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -155166,6 +143160,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
+                          accessibilityLabel="Google"
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -155188,6 +143185,9 @@ exports[`Story Snapshots: URLLargeFont should match snapshot 1`] = `
                           Google
                         </Text>
                         <Text
+                          accessibilityLabel="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."
+                          accessibilityRole="text"
+                          accessible={true}
                           numberOfLines={2}
                           style={
                             [
@@ -155385,60 +143385,63 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="jd's avatar"
                         accessible={true}
@@ -155462,6 +143465,7 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -155479,11 +143483,13 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -155578,6 +143584,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         jd
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -155627,57 +143636,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Small username (2 chars)"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Small username (2 chars)"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Small username (2 chars)
-                            </Text>
-                          </Text>
+                          Small username \\(2 chars\\)
                         </Text>
                       </View>
                     </View>
@@ -155754,60 +143715,63 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="jd's avatar"
                   accessible={true}
@@ -155831,6 +143795,7 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -155848,11 +143813,13 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -155947,6 +143914,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                   jd
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -156266,6 +144236,8 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -156439,60 +144411,63 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="john.doe's avatar"
                         accessible={true}
@@ -156516,6 +144491,7 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -156533,11 +144509,13 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -156632,6 +144610,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         john.doe
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -156681,57 +144662,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Medium username (8 chars)"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Medium username (8 chars)"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Medium username (8 chars)
-                            </Text>
-                          </Text>
+                          Medium username \\(8 chars\\)
                         </Text>
                       </View>
                     </View>
@@ -156808,60 +144741,63 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="john.doe's avatar"
                   accessible={true}
@@ -156885,6 +144821,7 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -156902,11 +144839,13 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -157001,6 +144940,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                   john.doe
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -157320,6 +145262,8 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -157493,60 +145437,63 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                         accessible={true}
@@ -157570,6 +145517,7 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -157587,11 +145535,13 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -157686,6 +145636,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -157735,57 +145688,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Long username (22 chars) - should truncate"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Long username (22 chars) - should truncate"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Long username (22 chars) - should truncate
-                            </Text>
-                          </Text>
+                          Long username \\(22 chars\\) \\- should truncate
                         </Text>
                       </View>
                     </View>
@@ -157862,60 +145767,63 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                 ]
               }
             >
-              <RNGestureHandlerButton
-                activeOpacity={1}
+              <View
+                accessibilityState={
+                  {
+                    "busy": undefined,
+                    "checked": undefined,
+                    "disabled": undefined,
+                    "expanded": undefined,
+                    "selected": undefined,
+                  }
+                }
+                accessibilityValue={
+                  {
+                    "max": undefined,
+                    "min": undefined,
+                    "now": undefined,
+                    "text": undefined,
+                  }
+                }
+                accessible={true}
+                activeUnderlayOpacity={1}
+                animationDuration={0}
                 collapsable={false}
-                delayLongPress={600}
-                enabled={true}
-                handlerTag={-1}
-                handlerType="NativeViewGestureHandler"
-                innerRef={null}
-                onActiveStateChange={[Function]}
-                onGestureHandlerEvent={[Function]}
-                onGestureHandlerStateChange={[Function]}
-                onPress={[Function]}
-                rippleColor="#E4E7EA"
+                focusable={true}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[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,
-                    },
-                    {
-                      "cursor": undefined,
-                    },
+                    [
+                      undefined,
+                      {
+                        "margin": undefined,
+                        "marginBottom": undefined,
+                        "marginEnd": undefined,
+                        "marginHorizontal": undefined,
+                        "marginLeft": undefined,
+                        "marginRight": undefined,
+                        "marginStart": undefined,
+                        "marginTop": undefined,
+                        "marginVertical": undefined,
+                      },
+                      {
+                        "backgroundColor": undefined,
+                        "borderRadius": undefined,
+                      },
+                    ],
+                    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="johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername's avatar"
                   accessible={true}
@@ -157939,6 +145847,7 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                     onProgress={[Function]}
                     placeholder={[]}
                     priority="high"
+                    sfEffect={null}
                     source={
                       [
                         {
@@ -157956,11 +145865,13 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                         "width": 36,
                       }
                     }
+                    symbolSize={null}
+                    symbolWeight={null}
                     transition={null}
                     width={36}
                   />
                 </View>
-              </RNGestureHandlerButton>
+              </View>
             </ExternalKeyboardView>
           </View>
         </View>
@@ -158055,6 +145966,9 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
                   johndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusernamejohndoeverylongusername
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -158374,6 +146288,8 @@ exports[`Story Snapshots: Usernames should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Encrypted message"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -158560,60 +146476,63 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -158637,6 +146556,7 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -158654,11 +146574,13 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -158775,6 +146697,9 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                         </Text>
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -158824,57 +146749,9 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -159032,60 +146909,63 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -159109,6 +146989,7 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -159126,11 +147007,13 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -159247,6 +147130,9 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                         </Text>
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -159296,57 +147182,9 @@ exports[`Story Snapshots: WithAlias should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -159517,60 +147355,63 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -159594,6 +147435,7 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -159611,11 +147453,13 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -159741,6 +147585,9 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -159781,57 +147628,9 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -159989,60 +147788,63 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -160066,6 +147868,7 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -160083,11 +147886,13 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -160213,6 +148018,9 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -160253,57 +148061,9 @@ exports[`Story Snapshots: WithAliasLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -160474,60 +148234,63 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -160551,6 +148314,7 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -160568,11 +148332,13 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -160667,6 +148433,9 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -160726,101 +148495,9 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -161024,30 +148701,47 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    3,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -161214,57 +148908,9 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="Header false"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Header false"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Header false
-                              </Text>
-                            </Text>
+                            Header false
                           </Text>
                         </View>
                         <View
@@ -161468,30 +149114,47 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    4,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -161655,57 +149318,9 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="multi file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="multi file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              multi file
-                            </Text>
-                          </Text>
+                          multi file
                         </Text>
                       </View>
                     </View>
@@ -161924,30 +149539,47 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    5,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -162160,30 +149792,47 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    6,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -162550,30 +150199,47 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    7,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -162593,101 +150259,9 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -162891,30 +150465,47 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    8,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -163127,30 +150718,47 @@ exports[`Story Snapshots: WithAudio should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    9,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -163330,60 +150938,63 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -163407,6 +151018,7 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -163424,11 +151036,13 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -163532,6 +151146,9 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -163582,101 +151199,9 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -163880,30 +151405,47 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    10,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -164060,57 +151602,9 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="First message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="First message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              First message
-                            </Text>
-                          </Text>
+                          First message
                         </Text>
                       </View>
                     </View>
@@ -164282,57 +151776,9 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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>
+                            This is a description
                           </Text>
                         </View>
                         <View
@@ -164536,30 +151982,47 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    11,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -164926,30 +152389,47 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    12,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -165113,57 +152593,9 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="multi file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="multi file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              multi file
-                            </Text>
-                          </Text>
+                          multi file
                         </Text>
                       </View>
                     </View>
@@ -165382,30 +152814,47 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    13,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -165425,101 +152874,9 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -165723,30 +153080,47 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    14,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -165959,30 +153333,47 @@ exports[`Story Snapshots: WithAudioLargeFont should match snapshot 1`] = `
                                 />
                               </View>
                               <View
-                                collapsable={false}
-                                hitSlop={
+                                handlerTags={
+                                  [
+                                    15,
+                                  ]
+                                }
+                                onGestureHandlerEvent={[Function]}
+                                onGestureHandlerStateChange={[Function]}
+                                onGestureHandlerTouchEvent={[Function]}
+                                onStartShouldSetResponder={[Function]}
+                                pointerEvents="box-none"
+                                style={
                                   {
-                                    "bottom": 12,
-                                    "left": 8,
-                                    "right": 8,
-                                    "top": 12,
+                                    "display": "contents",
                                   }
                                 }
-                                style={
-                                  [
-                                    {
-                                      "borderRadius": 6,
-                                      "height": 12,
-                                      "position": "absolute",
-                                      "width": 12,
-                                    },
+                              >
+                                <View
+                                  hitSlop={
                                     {
-                                      "backgroundColor": "#D1EBFE",
-                                    },
-                                    [Function],
-                                  ]
-                                }
-                              />
+                                      "bottom": 12,
+                                      "left": 8,
+                                      "right": 8,
+                                      "top": 12,
+                                    }
+                                  }
+                                  style={
+                                    [
+                                      {
+                                        "borderRadius": 6,
+                                        "height": 12,
+                                        "position": "absolute",
+                                        "width": 12,
+                                      },
+                                      {
+                                        "backgroundColor": "#D1EBFE",
+                                      },
+                                      [Function],
+                                    ]
+                                  }
+                                />
+                              </View>
                             </View>
                           </View>
                         </View>
@@ -166162,60 +153553,63 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -166239,6 +153633,7 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -166256,11 +153651,13 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -166355,6 +153752,9 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -166491,57 +153891,9 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="File.pdf"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="File.pdf"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      File.pdf
-                                    </Text>
-                                  </Text>
+                                  File\\.pdf
                                 </Text>
                               </View>
                             </View>
@@ -166555,101 +153907,9 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                       </View>
@@ -166892,57 +154152,9 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="File.pdf"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="File.pdf"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      File.pdf
-                                    </Text>
-                                  </Text>
+                                  File\\.pdf
                                 </Text>
                               </View>
                             </View>
@@ -166956,101 +154168,9 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                       </View>
@@ -167146,57 +154266,9 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="File.pdf"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="File.pdf"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      File.pdf
-                                    </Text>
-                                  </Text>
+                                  File\\.pdf
                                 </Text>
                               </View>
                             </View>
@@ -167210,101 +154282,9 @@ exports[`Story Snapshots: WithFile should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                       </View>
@@ -167483,60 +154463,63 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -167560,6 +154543,7 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -167577,11 +154561,13 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -167685,6 +154671,9 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -167812,57 +154801,9 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="File.pdf"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="File.pdf"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      File.pdf
-                                    </Text>
-                                  </Text>
+                                  File\\.pdf
                                 </Text>
                               </View>
                             </View>
@@ -167876,101 +154817,9 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                       </View>
@@ -168213,57 +155062,9 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                                 }
                               >
                                 <Text
-                                  style={
-                                    [
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "fontFamily": "Inter",
-                                        "fontSize": 16,
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "lineHeight": 22,
-                                        "textAlign": "left",
-                                      },
-                                      {
-                                        "color": "#2F343D",
-                                      },
-                                    ]
-                                  }
+                                  accessibilityLabel="File.pdf"
                                 >
-                                  <Text
-                                    style={
-                                      {
-                                        "backgroundColor": "transparent",
-                                        "flexShrink": 1,
-                                        "fontFamily": "Inter",
-                                        "fontVariant": [
-                                          "tabular-nums",
-                                        ],
-                                        "fontWeight": "400",
-                                        "textAlign": "left",
-                                      }
-                                    }
-                                  >
-                                    <Text
-                                      accessibilityLabel="File.pdf"
-                                      style={
-                                        [
-                                          {
-                                            "flexShrink": 1,
-                                            "fontSize": 16,
-                                            "lineHeight": 22,
-                                          },
-                                          {
-                                            "color": "#2F343D",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      File.pdf
-                                    </Text>
-                                  </Text>
+                                  File\\.pdf
                                 </Text>
                               </View>
                             </View>
@@ -168277,101 +155078,9 @@ exports[`Story Snapshots: WithFileLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                       </View>
@@ -168550,60 +155259,63 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -168627,6 +155339,7 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -168644,11 +155357,13 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -168743,6 +155458,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -168802,101 +155520,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -169216,60 +155842,63 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -169293,6 +155922,7 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -169310,11 +155940,13 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -169409,6 +156041,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -169458,57 +156093,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message, not description"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message, not description"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message, not description
-                            </Text>
-                          </Text>
+                          Message, not description
                         </Text>
                       </View>
                     </View>
@@ -169534,101 +156121,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -169808,101 +156303,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -170383,60 +156786,63 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -170460,6 +156866,7 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -170477,11 +156884,13 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -170576,6 +156985,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -170625,57 +157037,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="multi file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="multi file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              multi file
-                            </Text>
-                          </Text>
+                          multi file
                         </Text>
                       </View>
                     </View>
@@ -171163,60 +157527,63 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -171240,6 +157607,7 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -171257,11 +157625,13 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -171356,6 +157726,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -171415,101 +157788,9 @@ exports[`Story Snapshots: WithImage should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description for Base64 Attachment :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description for Base64 Attachment ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -171829,60 +158110,63 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -171906,6 +158190,7 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -171923,11 +158208,13 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -172031,6 +158318,9 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -172081,57 +158371,9 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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>
+                            This is a description
                           </Text>
                         </View>
                         <View
@@ -172458,57 +158700,9 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="Header false"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Header false"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Header false
-                              </Text>
-                            </Text>
+                            Header false
                           </Text>
                         </View>
                         <View
@@ -172835,60 +159029,63 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -172912,6 +159109,7 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -172929,11 +159127,13 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -173028,6 +159228,9 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -173077,57 +159280,9 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="multi file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="multi file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              multi file
-                            </Text>
-                          </Text>
+                          multi file
                         </Text>
                       </View>
                     </View>
@@ -173615,60 +159770,63 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -173692,6 +159850,7 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -173709,11 +159868,13 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -173817,6 +159978,9 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -173867,101 +160031,9 @@ exports[`Story Snapshots: WithImageLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description for Base64 Attachment :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description for Base64 Attachment ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -174281,60 +160353,63 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -174358,6 +160433,7 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -174375,11 +160451,13 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -174474,6 +160552,9 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -174533,101 +160614,9 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -174912,57 +160901,9 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="Header false"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "textAlign": "left",
-                                }
-                              }
-                            >
-                              <Text
-                                accessibilityLabel="Header false"
-                                style={
-                                  [
-                                    {
-                                      "flexShrink": 1,
-                                      "fontSize": 16,
-                                      "lineHeight": 22,
-                                    },
-                                    {
-                                      "color": "#2F343D",
-                                    },
-                                  ]
-                                }
-                              >
-                                Header false
-                              </Text>
-                            </Text>
+                            Header false
                           </Text>
                         </View>
                         <View
@@ -175247,60 +161188,63 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -175324,6 +161268,7 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -175341,11 +161286,13 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                               "width": 36,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={36}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -175440,6 +161387,9 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                         diego.mello
                       </Text>
                       <Text
+                        accessibilityLabel="10:00 AM"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -175489,57 +161439,9 @@ exports[`Story Snapshots: WithVideo should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="multi file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="multi file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              multi file
-                            </Text>
-                          </Text>
+                          multi file
                         </Text>
                       </View>
                     </View>
@@ -175972,60 +161874,63 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -176049,6 +161954,7 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -176066,11 +161972,13 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -176174,6 +162082,9 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -176224,101 +162135,9 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                           }
                         >
                           <Text
-                            style={
-                              [
-                                {
-                                  "backgroundColor": "transparent",
-                                  "fontFamily": "Inter",
-                                  "fontSize": 16,
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "fontWeight": "400",
-                                  "lineHeight": 22,
-                                  "textAlign": "left",
-                                },
-                                {
-                                  "color": "#2F343D",
-                                },
-                              ]
-                            }
+                            accessibilityLabel="This is a description :nyan_rocket:"
                           >
-                            <Text
-                              style={
-                                {
-                                  "backgroundColor": "transparent",
-                                  "flexShrink": 1,
-                                  "fontFamily": "Inter",
-                                  "fontVariant": [
-                                    "tabular-nums",
-                                  ],
-                                  "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={{"current":"Object"}}
-                                  contentFit="contain"
-                                  contentPosition={
-                                    {
-                                      "left": "50%",
-                                      "top": "50%",
-                                    }
-                                  }
-                                  height={15}
-                                  nativeViewRef={{"current":"NativeComponent"}}
-                                  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>
+                            This is a description ⁠![](https://open.rocket.chat/emoji-custom/nyan_rocket.png)
                           </Text>
                         </View>
                         <View
@@ -176596,60 +162415,63 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -176673,6 +162495,7 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -176690,11 +162513,13 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -176798,6 +162623,9 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -177115,60 +162943,63 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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}
@@ -177192,6 +163023,7 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                           onProgress={[Function]}
                           placeholder={[]}
                           priority="high"
+                          sfEffect={null}
                           source={
                             [
                               {
@@ -177209,11 +163041,13 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                               "width": 46.800000000000004,
                             }
                           }
+                          symbolSize={null}
+                          symbolWeight={null}
                           transition={null}
                           width={46.800000000000004}
                         />
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
@@ -177317,6 +163151,9 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                     />
                   </View>
                   <Text
+                    accessibilityLabel="10:00 AM"
+                    accessibilityRole="text"
+                    accessible={true}
                     style={
                       [
                         {
@@ -177357,57 +163194,9 @@ exports[`Story Snapshots: WithVideoLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="multi file"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="multi file"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              multi file
-                            </Text>
-                          </Text>
+                          multi file
                         </Text>
                       </View>
                     </View>
@@ -177837,57 +163626,9 @@ exports[`Story Snapshots: WithoutHeader should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
@@ -178062,57 +163803,9 @@ exports[`Story Snapshots: WithoutHeaderLargeFont should match snapshot 1`] = `
                         }
                       >
                         <Text
-                          style={
-                            [
-                              {
-                                "backgroundColor": "transparent",
-                                "fontFamily": "Inter",
-                                "fontSize": 16,
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "lineHeight": 22,
-                                "textAlign": "left",
-                              },
-                              {
-                                "color": "#2F343D",
-                              },
-                            ]
-                          }
+                          accessibilityLabel="Message"
                         >
-                          <Text
-                            style={
-                              {
-                                "backgroundColor": "transparent",
-                                "flexShrink": 1,
-                                "fontFamily": "Inter",
-                                "fontVariant": [
-                                  "tabular-nums",
-                                ],
-                                "fontWeight": "400",
-                                "textAlign": "left",
-                              }
-                            }
-                          >
-                            <Text
-                              accessibilityLabel="Message"
-                              style={
-                                [
-                                  {
-                                    "flexShrink": 1,
-                                    "fontSize": 16,
-                                    "lineHeight": 22,
-                                  },
-                                  {
-                                    "color": "#2F343D",
-                                  },
-                                ]
-                              }
-                            >
-                              Message
-                            </Text>
-                          </Text>
+                          Message
                         </Text>
                       </View>
                     </View>
diff --git a/app/containers/message/components/stories/__tests__/__snapshots__/leaves.test.tsx.snap b/app/containers/message/components/stories/__tests__/__snapshots__/leaves.test.tsx.snap
index 8ce6c6637dd..d65f6280841 100644
--- a/app/containers/message/components/stories/__tests__/__snapshots__/leaves.test.tsx.snap
+++ b/app/containers/message/components/stories/__tests__/__snapshots__/leaves.test.tsx.snap
@@ -100,6 +100,9 @@ exports[`Story Snapshots: Broadcast should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Reply"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -227,6 +230,9 @@ exports[`Story Snapshots: CallButton should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Click to join!"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -266,57 +272,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
     }
   >
     <Text
-      style={
-        [
-          {
-            "backgroundColor": "transparent",
-            "fontFamily": "Inter",
-            "fontSize": 16,
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "lineHeight": 22,
-            "textAlign": "left",
-          },
-          {
-            "color": "#2F343D",
-          },
-        ]
-      }
+      accessibilityLabel="This is a plain text message"
     >
-      <Text
-        style={
-          {
-            "backgroundColor": "transparent",
-            "flexShrink": 1,
-            "fontFamily": "Inter",
-            "fontVariant": [
-              "tabular-nums",
-            ],
-            "fontWeight": "400",
-            "textAlign": "left",
-          }
-        }
-      >
-        <Text
-          accessibilityLabel="This is a plain text message"
-          style={
-            [
-              {
-                "flexShrink": 1,
-                "fontSize": 16,
-                "lineHeight": 22,
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
-        >
-          This is a plain text message
-        </Text>
-      </Text>
+      This is a plain text message
     </Text>
   </View>
 </View>
@@ -441,6 +399,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
   }
 >
   <Text
+    accessibilityLabel="Started a discussion:"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -464,6 +425,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
     Started a discussion:
   </Text>
   <Text
+    accessibilityLabel="Discussion topic message"
+    accessibilityRole="text"
+    accessible={true}
     style={
       [
         {
@@ -612,6 +576,9 @@ exports[`Story Snapshots: Discussion should match snapshot 1`] = `
       </View>
     </View>
     <Text
+      accessibilityLabel="January 1, 2024"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -679,6 +646,9 @@ exports[`Story Snapshots: EditedHidden should match snapshot 1`] = `null`;
 
 exports[`Story Snapshots: Emoji should match snapshot 1`] = `
 <Text
+  accessibilityLabel="😀"
+  accessibilityRole="text"
+  accessible={true}
   style={
     {
       "fontSize": 30,
@@ -706,6 +676,7 @@ exports[`Story Snapshots: EmojiCustom should match snapshot 1`] = `
   onLoadStart={[Function]}
   onProgress={[Function]}
   placeholder={[]}
+  sfEffect={null}
   source={
     [
       {
@@ -719,6 +690,8 @@ exports[`Story Snapshots: EmojiCustom should match snapshot 1`] = `
       "width": 30,
     }
   }
+  symbolSize={null}
+  symbolWeight={null}
   transition={null}
   width={30}
 />
@@ -921,6 +894,9 @@ exports[`Story Snapshots: GIF should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="GIF"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -1037,6 +1013,9 @@ exports[`Story Snapshots: Item should match snapshot 1`] = `
           }
         >
           <Text
+            accessibilityLabel="Engineering (9 today)"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -1260,60 +1239,63 @@ exports[`Story Snapshots: MessageAvatar should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[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,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": undefined,
+                "borderRadius": undefined,
+              },
+            ],
+            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="rocket.cat's avatar"
           accessible={true}
@@ -1337,6 +1319,7 @@ exports[`Story Snapshots: MessageAvatar should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -1354,11 +1337,13 @@ exports[`Story Snapshots: MessageAvatar should match snapshot 1`] = `
                 "width": 36,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={36}
           />
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
   </View>
 </View>
@@ -1676,6 +1661,9 @@ exports[`Story Snapshots: MultipleImagesNewServer should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="ALT"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -1918,6 +1906,9 @@ exports[`Story Snapshots: MultipleImagesNewServer should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="ALT"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -2160,6 +2151,9 @@ exports[`Story Snapshots: MultipleImagesNewServer should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="ALT"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -2402,6 +2396,9 @@ exports[`Story Snapshots: MultipleImagesNewServer should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="ALT"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -2644,6 +2641,9 @@ exports[`Story Snapshots: MultipleImagesNewServer should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="ALT"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -2702,57 +2702,9 @@ exports[`Story Snapshots: MultipleImagesOldServer should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Image 1"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Image 1"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Image 1
-            </Text>
-          </Text>
+          Image 1
         </Text>
       </View>
       <View
@@ -2932,57 +2884,9 @@ exports[`Story Snapshots: MultipleImagesOldServer should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Image 2"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Image 2"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Image 2
-            </Text>
-          </Text>
+          Image 2
         </Text>
       </View>
       <View
@@ -3162,57 +3066,9 @@ exports[`Story Snapshots: MultipleImagesOldServer should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Image 3"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Image 3"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Image 3
-            </Text>
-          </Text>
+          Image 3
         </Text>
       </View>
       <View
@@ -3392,57 +3248,9 @@ exports[`Story Snapshots: MultipleImagesOldServer should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="Image 4"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="Image 4"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              Image 4
-            </Text>
-          </Text>
+          Image 4
         </Text>
       </View>
       <View
@@ -3728,6 +3536,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="😂"
+        accessibilityRole="text"
+        accessible={true}
         style={
           {
             "color": "#ffffff",
@@ -3834,6 +3645,9 @@ exports[`Story Snapshots: Reactions should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="❤️"
+        accessibilityRole="text"
+        accessible={true}
         style={
           {
             "color": "#ffffff",
@@ -4086,6 +3900,8 @@ exports[`Story Snapshots: RepliedThread should match snapshot 1`] = `
   </View>
   <Text
     accessibilityLabel="Original thread message"
+    accessibilityRole="text"
+    accessible={true}
     numberOfLines={1}
     style={
       [
@@ -4399,6 +4215,9 @@ exports[`Story Snapshots: SingleImageNewServer should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="ALT"
+          accessibilityRole="text"
+          accessible={true}
           style={
             [
               {
@@ -4638,57 +4457,9 @@ exports[`Story Snapshots: SingleImageOldServer should match snapshot 1`] = `
         }
       >
         <Text
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 16,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "lineHeight": 22,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
-          }
+          accessibilityLabel="A wavy orange and black pattern, designed to be used as a wallpaper"
         >
-          <Text
-            style={
-              {
-                "backgroundColor": "transparent",
-                "flexShrink": 1,
-                "fontFamily": "Inter",
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "400",
-                "textAlign": "left",
-              }
-            }
-          >
-            <Text
-              accessibilityLabel="A wavy orange and black pattern, designed to be used as a wallpaper"
-              style={
-                [
-                  {
-                    "flexShrink": 1,
-                    "fontSize": 16,
-                    "lineHeight": 22,
-                  },
-                  {
-                    "color": "#2F343D",
-                  },
-                ]
-              }
-            >
-              A wavy orange and black pattern, designed to be used as a wallpaper
-            </Text>
-          </Text>
+          A wavy orange and black pattern, designed to be used as a wallpaper
         </Text>
       </View>
       <View
@@ -4916,6 +4687,9 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
     testID="message-thread-button-Thread parent message"
   >
     <Text
+      accessibilityLabel="View thread"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -5111,60 +4885,63 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
           ]
         }
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
+        <View
+          accessibilityState={
+            {
+              "busy": undefined,
+              "checked": undefined,
+              "disabled": undefined,
+              "expanded": undefined,
+              "selected": undefined,
+            }
+          }
+          accessibilityValue={
+            {
+              "max": undefined,
+              "min": undefined,
+              "now": undefined,
+              "text": undefined,
+            }
+          }
+          accessible={true}
+          activeUnderlayOpacity={1}
+          animationDuration={0}
           collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          rippleColor="#E4E7EA"
+          focusable={true}
+          onBlur={[Function]}
+          onClick={[Function]}
+          onFocus={[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,
-              },
-              {
-                "cursor": undefined,
-              },
+              [
+                undefined,
+                {
+                  "margin": undefined,
+                  "marginBottom": undefined,
+                  "marginEnd": undefined,
+                  "marginHorizontal": undefined,
+                  "marginLeft": undefined,
+                  "marginRight": undefined,
+                  "marginStart": undefined,
+                  "marginTop": undefined,
+                  "marginVertical": undefined,
+                },
+                {
+                  "backgroundColor": undefined,
+                  "borderRadius": undefined,
+                },
+              ],
+              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={{}}
@@ -5196,7 +4973,7 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
               
             </Text>
           </View>
-        </RNGestureHandlerButton>
+        </View>
       </ExternalKeyboardView>
     </View>
   </View>
@@ -5205,6 +4982,9 @@ exports[`Story Snapshots: Thread should match snapshot 1`] = `
 
 exports[`Story Snapshots: Time should match snapshot 1`] = `
 <Text
+  accessibilityLabel="10:20 AM"
+  accessibilityRole="text"
+  accessible={true}
   style={
     [
       {
@@ -5327,6 +5107,9 @@ exports[`Story Snapshots: Urls should match snapshot 1`] = `
     }
   >
     <Text
+      accessibilityLabel="Rocket.Chat"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={2}
       style={
         [
@@ -5349,6 +5132,9 @@ exports[`Story Snapshots: Urls should match snapshot 1`] = `
       Rocket.Chat
     </Text>
     <Text
+      accessibilityLabel="Have your own chat service on-premises or in the cloud"
+      accessibilityRole="text"
+      accessible={true}
       numberOfLines={2}
       style={
         [
@@ -5450,6 +5236,9 @@ exports[`Story Snapshots: User should match snapshot 1`] = `
       rocket.cat
     </Text>
     <Text
+      accessibilityLabel="10:20 AM"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
diff --git a/app/containers/message/components/stories/__tests__/leaves.test.tsx b/app/containers/message/components/stories/__tests__/leaves.test.tsx
index ccf68731b89..4a969b2e400 100644
--- a/app/containers/message/components/stories/__tests__/leaves.test.tsx
+++ b/app/containers/message/components/stories/__tests__/leaves.test.tsx
@@ -21,6 +21,13 @@ import * as pinned from '../RightIcons/Pinned.stories';
 import * as readReceipt from '../RightIcons/ReadReceipt.stories';
 import * as translated from '../RightIcons/Translated.stories';
 
+jest.mock('~/lib/methods/handleMediaDownload.ts', () => ({
+	...jest.requireActual('~/lib/methods/handleMediaDownload.ts'),
+	getMediaCache: jest.fn(() => Promise.resolve({ exists: false })),
+	downloadMediaFile: jest.fn(() => Promise.resolve('')),
+	isDownloadActive: jest.fn(() => false)
+}));
+
 generateSnapshots(attachments);
 generateSnapshots(broadcast);
 generateSnapshots(callButton);
diff --git a/app/containers/message/hooks/useMessageContextMenu.ts b/app/containers/message/hooks/useMessageContextMenu.ts
new file mode 100644
index 00000000000..71f5fcaba0a
--- /dev/null
+++ b/app/containers/message/hooks/useMessageContextMenu.ts
@@ -0,0 +1,40 @@
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useMessageActionsMenu } from '~/containers/MessageActions/MessageActionsMenuContext';
+import { MAX_SIDEBAR_WIDTH } from '~/lib/constants/tablet';
+import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { useSetting } from '~/lib/hooks/useSetting';
+import { isIOS } from '~/lib/methods/helpers';
+import { useMessageField, useMessageItem, useMessageTouchable } from '../stores/MessageStore';
+import { useIsThreadRoom } from '../stores/MessageRoomStore';
+
+const useMessageRowWidth = (): number => {
+	const { width } = useSafeAreaFrame();
+	const { left, right } = useSafeAreaInsets();
+	const isMasterDetail = useMasterDetail();
+	const sidebarWidth = isMasterDetail ? MAX_SIDEBAR_WIDTH : 0;
+	return width - sidebarWidth - left - right;
+};
+
+export const useIsMessageContextMenuEnabled = (): boolean => {
+	const menu = useMessageActionsMenu();
+	const tmid = useMessageField(item => item.tmid);
+	const { longPressable } = useMessageTouchable();
+	const isThreadRoom = useIsThreadRoom();
+	const isThreadMessageInMainRoom = !!tmid && !isThreadRoom;
+	return isIOS && !!menu && longPressable && !isThreadMessageInMainRoom;
+};
+
+export const useMessageContextMenu = () => {
+	const menu = useMessageActionsMenu();
+	const item = useMessageItem();
+	const enabled = useIsMessageContextMenuEnabled();
+	const useRealName = useSetting('UI_Use_Real_Name') as boolean;
+	const width = useMessageRowWidth();
+
+	const options = enabled && menu ? menu.getMenuOptions(item) : [];
+	const author = item.alias || (useRealName && item.u?.name) || item.u?.username || '';
+	const text = item.attachments?.[0]?.description || item.msg || '';
+
+	return { enabled, options, author, text, width };
+};
diff --git a/app/containers/message/index.tsx b/app/containers/message/index.tsx
index e3944ff2c41..f56b2e56c82 100644
--- a/app/containers/message/index.tsx
+++ b/app/containers/message/index.tsx
@@ -34,8 +34,8 @@ const MessageContainer = (props: IMessageContainerProps) => {
 			onLongPress={props.onLongPress}
 			threadBadgeColor={props.threadBadgeColor}
 			isIgnored={props.isIgnored}>
-			<MessageTouchable isPreview={props.isPreview} highlighted={props.highlighted} />
 			{withSeparators ? <MessageSeparators /> : null}
+			<MessageTouchable isPreview={props.isPreview} highlighted={props.highlighted} />
 		</MessageProvider>
 	);
 };
diff --git a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
index 7390b9eddb1..8ca0ef37e35 100644
--- a/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
+++ b/app/ee/omnichannel/containers/OmnichannelHeader/OmnichannelQueue.tsx
@@ -1,4 +1,5 @@
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import { themes } from '~/lib/constants/colors';
@@ -35,7 +36,7 @@ const OmnichannelQueue = ({ queueSize, onPress }: IOmnichannelQueue) => {
 								<CustomIcon name='chevron-right' style={styles.actionIndicator} color={themes[theme].fontDefault} size={24} />
 							</>
 						) : (
-							<Text style={[styles.emptyText, { color: themes[theme].fontHint }]}>{i18n.t('Empty')}</Text>
+							<PlainText style={[styles.emptyText, { color: themes[theme].fontHint }]}>{i18n.t('Empty')}</PlainText>
 						)}
 					</View>
 				)}
diff --git a/app/externalModules.d.ts b/app/externalModules.d.ts
index 156dbe3bfb5..dd280ef0fcc 100644
--- a/app/externalModules.d.ts
+++ b/app/externalModules.d.ts
@@ -1,3 +1,2 @@
 declare module 'remove-markdown';
 declare module 'react-native-mime-types';
-declare module 'react-native-math-view';
diff --git a/app/i18n/locales/en.json b/app/i18n/locales/en.json
index e5d6c388566..5cab87b5764 100644
--- a/app/i18n/locales/en.json
+++ b/app/i18n/locales/en.json
@@ -135,6 +135,7 @@
   "Cancel_recording": "Cancel recording",
   "Cancel_upload": "Cancel upload",
   "Canned_Responses": "Canned responses",
+  "Cannot_connect": "Cannot connect",
   "Cannot_delete": "Cannot delete",
   "Cannot_leave": "Cannot leave",
   "Cannot_remove": "Cannot remove",
@@ -580,6 +581,7 @@
   "Message_was_read": "Message was read",
   "messages": "messages",
   "Microphone_access_needed_to_record_audio": "Microphone access needed to record audio",
+  "Minimize": "Minimize",
   "Missed_call": "Missed call",
   "missing_room_e2ee_description": "The encryption keys for the room need to be updated, another room member needs to be online for this to happen.",
   "missing_room_e2ee_title": "Check back in a few moments",
diff --git a/app/lib/constants/accessibility.ts b/app/lib/constants/accessibility.ts
index 74b99fb0f35..214b30bd211 100644
--- a/app/lib/constants/accessibility.ts
+++ b/app/lib/constants/accessibility.ts
@@ -1,2 +1 @@
-// Contract between inverted message list and composer for keyboard boundary focus.
 export const MESSAGE_COMPOSER_EXIT_FOCUS_NATIVE_ID = 'message-composer-exit-focus';
diff --git a/app/lib/constants/defaultSettings.ts b/app/lib/constants/defaultSettings.ts
index d137e23905b..6d1a62ca374 100644
--- a/app/lib/constants/defaultSettings.ts
+++ b/app/lib/constants/defaultSettings.ts
@@ -150,6 +150,15 @@ export const defaultSettings = {
 	Hide_System_Messages: {
 		type: 'valueAsArray'
 	},
+	Katex_Enabled: {
+		type: 'valueAsBoolean'
+	},
+	Katex_Dollar_Syntax: {
+		type: 'valueAsBoolean'
+	},
+	Katex_Parenthesis_Syntax: {
+		type: 'valueAsBoolean'
+	},
 	LDAP_Enable: {
 		type: 'valueAsBoolean'
 	},
diff --git a/app/lib/hooks/useCustomEmoji.ts b/app/lib/hooks/useCustomEmoji.ts
index 8e304f7cf67..73f4db703c6 100644
--- a/app/lib/hooks/useCustomEmoji.ts
+++ b/app/lib/hooks/useCustomEmoji.ts
@@ -1,7 +1,9 @@
+import { useCallback } from 'react';
+
 import { type TGetCustomEmoji, resolveCustomEmoji } from '~/definitions';
 import { useAppSelector } from './useAppSelector';
 
 export const useCustomEmoji = (): TGetCustomEmoji => {
 	const customEmojis = useAppSelector(state => state.customEmojis);
-	return name => resolveCustomEmoji(customEmojis, name);
+	return useCallback(name => resolveCustomEmoji(customEmojis, name), [customEmojis]);
 };
diff --git a/app/lib/hooks/useShortnameToUnicode/index.tsx b/app/lib/hooks/useShortnameToUnicode/index.tsx
index a3ddac113ff..c9df12a6048 100644
--- a/app/lib/hooks/useShortnameToUnicode/index.tsx
+++ b/app/lib/hooks/useShortnameToUnicode/index.tsx
@@ -1,3 +1,5 @@
+import { useCallback } from 'react';
+
 import ascii, { asciiRegexp } from './ascii';
 import { useAppSelector } from '../useAppSelector';
 import { useCustomEmoji } from '../useCustomEmoji';
@@ -34,31 +36,37 @@ const useShortnameToUnicode = (isEmojiPicker?: boolean) => {
 	const convertAsciiEmoji = useAppSelector(state => getUserSelector(state)?.settings?.preferences?.convertAsciiEmoji);
 	const customEmojis = useCustomEmoji();
 
-	const replaceShortnameWithUnicode = (shortname: string) => {
-		const name = shortname.replace(/:/g, '');
-		// a custom emoji sharing a built-in shortcode/alias must win
-		if (customEmojis(name)) {
-			return shortname;
-		}
-		return shortnameToUnicodeMap[shortname] || legacyShortnameToUnicodeMap[shortname] || shortname;
-	};
-	const formatShortnameToUnicode = (str: string) => {
-		str = str.replace(shortnamePattern, replaceShortnameWithUnicode);
-		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;
+	const replaceShortnameWithUnicode = useCallback(
+		(shortname: string) => {
+			const name = shortname.replace(/:/g, '');
+			// a custom emoji sharing a built-in shortcode/alias must win
+			if (customEmojis(name)) {
+				return shortname;
 			}
+			return shortnameToUnicodeMap[shortname] || legacyShortnameToUnicodeMap[shortname] || shortname;
+		},
+		[customEmojis]
+	);
+	const formatShortnameToUnicode = useCallback(
+		(str: string) => {
+			str = str.replace(shortnamePattern, replaceShortnameWithUnicode);
+			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;
+				}
 
-			m3 = unescapeHTML(m3);
+				m3 = unescapeHTML(m3);
 
-			if (!convertAsciiEmoji && !isEmojiPicker) {
-				return m2 + m3;
-			}
-			return m2 + ascii[m3];
-		});
-		return str;
-	};
+				if (!convertAsciiEmoji && !isEmojiPicker) {
+					return m2 + m3;
+				}
+				return m2 + ascii[m3];
+			});
+			return str;
+		},
+		[replaceShortnameWithUnicode, convertAsciiEmoji, isEmojiPicker]
+	);
 
 	return {
 		formatShortnameToUnicode
diff --git a/app/lib/methods/helpers/__tests__/fetch.test.ts b/app/lib/methods/helpers/__tests__/fetch.test.ts
new file mode 100644
index 00000000000..3b720b987bf
--- /dev/null
+++ b/app/lib/methods/helpers/__tests__/fetch.test.ts
@@ -0,0 +1,38 @@
+import fetchWithHeaders, { headers } from '../fetch';
+
+jest.mock('react-native-device-info', () => ({
+	getSystemVersion: () => '14',
+	getVersion: () => '4.0.0',
+	getBuildNumber: () => '1'
+}));
+
+const fetchMock = jest.fn(() => Promise.resolve({} as Response));
+
+describe('fetch helper', () => {
+	beforeEach(() => {
+		fetchMock.mockClear();
+		global.fetch = fetchMock as unknown as typeof global.fetch;
+	});
+
+	it('drops headers whose value is undefined or null', async () => {
+		await fetchWithHeaders('https://open.rocket.chat/api/info', {
+			method: 'GET',
+			headers: { 'Content-Type': 'application/json', 'X-Auth-Token': undefined, 'X-User-Id': null as unknown as undefined }
+		});
+
+		expect(fetchMock).toHaveBeenCalledWith('https://open.rocket.chat/api/info', {
+			method: 'GET',
+			headers: { 'Content-Type': 'application/json', 'User-Agent': headers['User-Agent'] }
+		});
+	});
+
+	it('keeps headers whose value is defined', async () => {
+		await fetchWithHeaders('https://open.rocket.chat/api/info', {
+			headers: { 'X-Auth-Token': 'token', 'X-User-Id': 'userId' }
+		});
+
+		expect(fetchMock).toHaveBeenCalledWith('https://open.rocket.chat/api/info', {
+			headers: { 'X-Auth-Token': 'token', 'X-User-Id': 'userId', 'User-Agent': headers['User-Agent'] }
+		});
+	});
+});
diff --git a/app/lib/methods/helpers/__tests__/isRead.test.ts b/app/lib/methods/helpers/__tests__/isRead.test.ts
new file mode 100644
index 00000000000..5f1a576ac84
--- /dev/null
+++ b/app/lib/methods/helpers/__tests__/isRead.test.ts
@@ -0,0 +1,21 @@
+import { isRead } from '../helpers';
+
+const openRoom = { open: true, archived: false, unread: 0, alert: false, tunread: [] as string[] };
+
+describe('isRead', () => {
+	it('is read when there are no unreads', () => {
+		expect(isRead(openRoom)).toBe(true);
+	});
+
+	it('is unread when there are unread messages', () => {
+		expect(isRead({ ...openRoom, unread: 2 })).toBe(false);
+	});
+
+	it('is unread when only threads have unread messages', () => {
+		expect(isRead({ ...openRoom, tunread: ['tmid'] })).toBe(false);
+	});
+
+	it('is read when the room is archived even with thread unreads', () => {
+		expect(isRead({ ...openRoom, archived: true, tunread: ['tmid'] })).toBe(true);
+	});
+});
diff --git a/app/lib/methods/helpers/__tests__/theme.test.ts b/app/lib/methods/helpers/__tests__/theme.test.ts
new file mode 100644
index 00000000000..d5fd5802f81
--- /dev/null
+++ b/app/lib/methods/helpers/__tests__/theme.test.ts
@@ -0,0 +1,37 @@
+import { Appearance } from 'react-native';
+import * as SystemUI from 'expo-system-ui';
+
+import { themes } from '~/lib/constants/colors';
+import { setNativeTheme } from '../theme';
+
+jest.mock('../deviceInfo', () => ({ isAndroid: false }));
+jest.mock('expo-system-ui', () => ({ setBackgroundColorAsync: jest.fn() }));
+jest.mock('@zoontek/react-native-navigation-bar', () => ({ NavigationBar: { setBarStyle: jest.fn() } }));
+
+describe('setNativeTheme on iOS', () => {
+	const systemColorScheme = 'light';
+	let colorSchemeOverride: 'light' | 'dark' | 'unspecified';
+
+	beforeEach(() => {
+		colorSchemeOverride = 'unspecified';
+		jest.spyOn(Appearance, 'setColorScheme').mockImplementation(scheme => {
+			colorSchemeOverride = scheme ?? 'unspecified';
+		});
+		jest
+			.spyOn(Appearance, 'getColorScheme')
+			.mockImplementation(() => (colorSchemeOverride === 'unspecified' ? systemColorScheme : colorSchemeOverride));
+	});
+
+	afterEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	it('resolves the system theme when switching from explicit dark to automatic', () => {
+		setNativeTheme({ currentTheme: 'dark', darkLevel: 'black' });
+
+		setNativeTheme({ currentTheme: 'automatic', darkLevel: 'black' });
+
+		expect(colorSchemeOverride).toBe('unspecified');
+		expect(SystemUI.setBackgroundColorAsync).toHaveBeenLastCalledWith(themes.light.surfaceNeutral);
+	});
+});
diff --git a/app/lib/methods/helpers/deviceInfo.ts b/app/lib/methods/helpers/deviceInfo.ts
index 9cb7ac727ef..c17b352ecc9 100644
--- a/app/lib/methods/helpers/deviceInfo.ts
+++ b/app/lib/methods/helpers/deviceInfo.ts
@@ -16,3 +16,7 @@ export const supportSystemTheme = (): boolean => {
 
 // Tablet info
 export const isTablet = DeviceInfo.isTablet();
+
+export const isIOS26OrLater = isIOS && parseInt(DeviceInfo.getSystemVersion(), 10) >= 26;
+
+export const hasNativeHeaderBar = isIOS26OrLater;
diff --git a/app/lib/methods/helpers/fetch.ts b/app/lib/methods/helpers/fetch.ts
index d15a050e8fc..a6f31906f6b 100644
--- a/app/lib/methods/helpers/fetch.ts
+++ b/app/lib/methods/helpers/fetch.ts
@@ -39,16 +39,13 @@ export const BASIC_AUTH_KEY = 'BASIC_AUTH_KEY';
 
 RocketChatSettings.customHeaders = headers;
 
+const withoutEmptyValues = (requestHeaders: CustomHeaders): Record<string, string> =>
+	Object.fromEntries(Object.entries(requestHeaders).filter((entry): entry is [string, string] => typeof entry[1] === 'string'));
+
 export default (url: string, options: IOptions = {}): Promise<Response> => {
-	let customOptions = { ...options, headers: RocketChatSettings.customHeaders };
-	if (options && options.headers) {
-		customOptions = { ...customOptions, headers: { ...options.headers, ...customOptions.headers } };
-	}
-	// TODO: Check if this really works and if anyone else has complained about this problem.
-	// if (RocketChat.controller) {
-	// 	// @ts-ignore
-	// 	const { signal } = RocketChat.controller;
-	// 	customOptions = { ...customOptions, signal };
-	// }
+	const customOptions = {
+		...options,
+		headers: withoutEmptyValues({ ...options.headers, ...RocketChatSettings.customHeaders })
+	};
 	return fetch(url, customOptions);
 };
diff --git a/app/lib/methods/helpers/helpers.ts b/app/lib/methods/helpers/helpers.ts
index 1280a9474b4..322b95420ce 100644
--- a/app/lib/methods/helpers/helpers.ts
+++ b/app/lib/methods/helpers/helpers.ts
@@ -81,7 +81,7 @@ export function canAutoTranslate() {
 
 export function isRead(item) {
 	let isUnread = item.archived !== true && item.open === true; // item is not archived and not opened
-	isUnread = isUnread && (item.unread > 0 || item.alert === true); // either its unread count > 0 or its alert
+	isUnread = isUnread && (item.unread > 0 || item.alert === true || item.tunread?.length > 0);
 	return !isUnread;
 }
 
diff --git a/app/lib/methods/helpers/navigation/__tests__/headerIcon.test.ts b/app/lib/methods/helpers/navigation/__tests__/headerIcon.test.ts
new file mode 100644
index 00000000000..03ef4d0ffd4
--- /dev/null
+++ b/app/lib/methods/helpers/navigation/__tests__/headerIcon.test.ts
@@ -0,0 +1,21 @@
+import { headerIcon, preloadHeaderIcons } from '../headerIcon';
+
+const mockGetImageSource = jest.fn();
+jest.mock('~/containers/CustomIcon', () => ({
+	IconSet: { getImageSource: (...args: unknown[]) => mockGetImageSource(...args) }
+}));
+
+describe('headerIcon', () => {
+	it('returns no icon before the header icons are preloaded', () => {
+		expect(headerIcon('kebab')).toBeUndefined();
+	});
+
+	it('returns the rendered font glyph as an image once preloaded', async () => {
+		mockGetImageSource.mockImplementation(async (name: string) => ({ uri: `file://${name}.png`, scale: 3 }));
+
+		await preloadHeaderIcons();
+
+		expect(headerIcon('kebab')).toEqual({ type: 'image', source: { uri: 'file://kebab.png', scale: 3, alignmentInset: 2.5 } });
+		expect(mockGetImageSource).toHaveBeenCalledWith('kebab', 30, 'black');
+	});
+});
diff --git a/app/lib/methods/helpers/navigation/headerIcon.ts b/app/lib/methods/helpers/navigation/headerIcon.ts
new file mode 100644
index 00000000000..ae0a0e648a4
--- /dev/null
+++ b/app/lib/methods/helpers/navigation/headerIcon.ts
@@ -0,0 +1,44 @@
+import type { ImageURISource } from 'react-native';
+
+import { IconSet, type TIconsName } from '~/containers/CustomIcon';
+
+const HEADER_ICON_SIZE = 30;
+const HEADER_ICON_GLYPH_PADDING = HEADER_ICON_SIZE / 12;
+
+const HEADER_ICONS: TIconsName[] = [
+	'chat-close',
+	'chat-forward',
+	'close',
+	'create',
+	'directory',
+	'encrypted',
+	'filter',
+	'hamburguer',
+	'kebab',
+	'move-to-the-queue',
+	'notification',
+	'notification-disabled',
+	'pause',
+	'phone',
+	'search',
+	'threads',
+	'workspaces'
+];
+
+const headerIconSources = new Map<TIconsName, ImageURISource & { alignmentInset: number }>();
+
+export const preloadHeaderIcons = async () => {
+	await Promise.all(
+		HEADER_ICONS.map(async name => {
+			const source = await IconSet.getImageSource(name, HEADER_ICON_SIZE, 'black');
+			if (source) {
+				headerIconSources.set(name, { ...source, alignmentInset: HEADER_ICON_GLYPH_PADDING });
+			}
+		})
+	);
+};
+
+export const headerIcon = (name: TIconsName) => {
+	const source = headerIconSources.get(name);
+	return source ? { type: 'image' as const, source } : undefined;
+};
diff --git a/app/lib/methods/helpers/navigation/index.ts b/app/lib/methods/helpers/navigation/index.ts
index c050358e55e..3614e6b58c8 100644
--- a/app/lib/methods/helpers/navigation/index.ts
+++ b/app/lib/methods/helpers/navigation/index.ts
@@ -1,26 +1,95 @@
-import { createElement, type ReactElement } from 'react';
+import { createElement, type ReactElement, type RefObject } from 'react';
 import { DarkTheme, DefaultTheme } from '@react-navigation/native';
 import { type NativeStackHeaderProps, type NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import { type SearchBarCommands, type SearchBarProps } from 'react-native-screens';
 
 import { themes } from '~/lib/constants/colors';
 import { type TSupportedThemes } from '~/theme';
 import sharedStyles from '~/views/Styles';
 import Header from '~/containers/Header';
+import * as HeaderButton from '~/containers/Header/components/HeaderButton';
+import I18n from '~/i18n';
+import { hasNativeHeaderBar } from '~/lib/methods/helpers';
+import { headerIcon } from './headerIcon';
 
-export const defaultHeader: NativeStackNavigationOptions = {
-	header: (props: NativeStackHeaderProps): ReactElement => createElement(Header, props)
-};
+export const defaultHeader: NativeStackNavigationOptions = hasNativeHeaderBar
+	? {
+			headerBackButtonDisplayMode: 'minimal'
+		}
+	: {
+			header: (props: NativeStackHeaderProps): ReactElement => createElement(Header, props)
+		};
 
-export const drawerStyle = {
-	width: 320
-};
+export const outsideHeaderRightLegal = (
+	navigation: { navigate: (screen: 'LegalView') => void },
+	testID: string
+): NativeStackNavigationOptions =>
+	hasNativeHeaderBar
+		? {
+				unstable_headerRightItems: () => [
+					{
+						type: 'button',
+						label: I18n.t('More'),
+						accessibilityLabel: I18n.t('More'),
+						icon: headerIcon('kebab'),
+						onPress: () => navigation.navigate('LegalView')
+					}
+				]
+			}
+		: {
+				headerRight: (): ReactElement => createElement(HeaderButton.Legal, { testID, navigation })
+			};
+
+interface IStackedSearchBarOptions {
+	ref?: RefObject<SearchBarCommands | null>;
+	onFocus?: () => void;
+	onChangeText: (text: string) => void;
+	onCancel?: () => void;
+	onSearch?: () => void;
+}
+
+export const stackedSearchBarOptions = ({
+	ref,
+	onFocus,
+	onChangeText,
+	onCancel,
+	onSearch
+}: IStackedSearchBarOptions): SearchBarProps => ({
+	ref,
+	placement: 'stacked',
+	hideWhenScrolling: false,
+	placeholder: I18n.t('Search'),
+	onFocus,
+	onChangeText: event => onChangeText(event.nativeEvent.text),
+	onSearchButtonPress: onSearch,
+	onCancelButtonPress: onCancel ?? (() => onChangeText(''))
+});
+
+export const outsideHeaderLeftClose = (onPress: () => void, testID: string): NativeStackNavigationOptions =>
+	hasNativeHeaderBar
+		? {
+				unstable_headerLeftItems: () => [
+					{
+						type: 'button',
+						label: I18n.t('Close'),
+						accessibilityLabel: I18n.t('Close'),
+						icon: headerIcon('close'),
+						onPress
+					}
+				]
+			}
+		: {
+				headerLeft: (): ReactElement => createElement(HeaderButton.CloseModal, { onPress, testID })
+			};
 
 export const themedHeader = (theme: TSupportedThemes): NativeStackNavigationOptions => ({
 	headerStyle: {
 		backgroundColor: themes[theme].surfaceNeutral
 	},
-	headerTintColor: themes[theme].fontDefault,
-	headerTitleStyle: { ...sharedStyles.textBold, color: themes[theme].fontTitlesLabels, fontSize: 16 }
+	...(!hasNativeHeaderBar && {
+		headerTintColor: themes[theme].fontDefault,
+		headerTitleStyle: { ...sharedStyles.textBold, color: themes[theme].fontTitlesLabels, fontSize: 16 }
+	})
 });
 
 export const navigationTheme = (theme: TSupportedThemes) => {
diff --git a/app/lib/methods/helpers/theme.ts b/app/lib/methods/helpers/theme.ts
index cf41f3740ca..1c111ece75b 100644
--- a/app/lib/methods/helpers/theme.ts
+++ b/app/lib/methods/helpers/theme.ts
@@ -22,7 +22,7 @@ export const initialTheme = (): IThemePreference => {
 
 export const defaultTheme = (): TThemeMode => {
 	const systemTheme = Appearance.getColorScheme();
-	if (systemTheme) {
+	if (systemTheme === 'light' || systemTheme === 'dark') {
 		return systemTheme;
 	}
 	return 'light';
@@ -49,6 +49,10 @@ export const newThemeState = (prevState: { themePreferences: IThemePreference },
 };
 
 export const setNativeTheme = (themePreferences: IThemePreference) => {
+	const isAutomatic = themePreferences.currentTheme === 'automatic';
+	if (!isAndroid && isAutomatic) {
+		Appearance.setColorScheme('unspecified');
+	}
 	const theme = getTheme(themePreferences);
 	const isLightTheme = theme === 'light';
 	if (isAndroid) {
@@ -57,6 +61,8 @@ export const setNativeTheme = (themePreferences: IThemePreference) => {
 		} catch (error) {
 			// Do nothing
 		}
+	} else if (!isAutomatic) {
+		Appearance.setColorScheme(isLightTheme ? 'light' : 'dark');
 	}
 	SystemUI.setBackgroundColorAsync(themes[theme].surfaceNeutral);
 };
diff --git a/app/lib/methods/userPreferences.test.ts b/app/lib/methods/userPreferences.test.ts
index e0a9aaf8bdb..c613b4084d5 100644
--- a/app/lib/methods/userPreferences.test.ts
+++ b/app/lib/methods/userPreferences.test.ts
@@ -1,37 +1,151 @@
-import userPreferences from './userPreferences';
+import { act, renderHook } from '@testing-library/react-native';
+
+import userPreferences, { useUserPreferences } from './userPreferences';
 
 describe('UserPreferences', () => {
 	beforeEach(() => userPreferences.clearAll());
 
-	it('getBool returns false for stored false', () => {
-		userPreferences.setBool('k', false);
-		expect(userPreferences.getBool('k')).toBe(false);
+	describe('string', () => {
+		it('round-trips a stored string', () => {
+			userPreferences.setString('k', 'value');
+			expect(userPreferences.getString('k')).toBe('value');
+		});
+
+		it('getString returns null for unset key', () => {
+			expect(userPreferences.getString('missing')).toBeNull();
+		});
+
+		it('getString returns null for an empty string', () => {
+			userPreferences.setString('k', '');
+			expect(userPreferences.getString('k')).toBeNull();
+		});
 	});
 
-	it('getBool parses JSON-string stored boolean', () => {
-		userPreferences.setString('k', JSON.stringify(false));
-		expect(userPreferences.getBool('k')).toBe(false);
-		userPreferences.setString('k', JSON.stringify(true));
-		expect(userPreferences.getBool('k')).toBe(true);
+	describe('bool', () => {
+		it('getBool returns false for stored false', () => {
+			userPreferences.setBool('k', false);
+			expect(userPreferences.getBool('k')).toBe(false);
+		});
+
+		it('getBool parses JSON-string stored boolean', () => {
+			userPreferences.setString('k', JSON.stringify(false));
+			expect(userPreferences.getBool('k')).toBe(false);
+			userPreferences.setString('k', JSON.stringify(true));
+			expect(userPreferences.getBool('k')).toBe(true);
+		});
+
+		it('getBool returns null for non-boolean or invalid JSON strings', () => {
+			for (const value of ['1', 'null', '{}', 'not-json']) {
+				userPreferences.setString('k', value);
+				expect(userPreferences.getBool('k')).toBeNull();
+			}
+		});
+
+		it('getBool returns null for unset key', () => {
+			expect(userPreferences.getBool('missing')).toBeNull();
+		});
 	});
 
-	it('getBool returns null for non-boolean or invalid JSON strings', () => {
-		for (const value of ['1', 'null', '{}', 'not-json']) {
-			userPreferences.setString('k', value);
-			expect(userPreferences.getBool('k')).toBeNull();
-		}
+	describe('number', () => {
+		it('getNumber returns 0 for stored 0', () => {
+			userPreferences.setNumber('k', 0);
+			expect(userPreferences.getNumber('k')).toBe(0);
+		});
+
+		it('getNumber returns null for unset key', () => {
+			expect(userPreferences.getNumber('missing')).toBeNull();
+		});
 	});
 
-	it('getBool returns null for unset key', () => {
-		expect(userPreferences.getBool('missing')).toBeNull();
+	describe('map', () => {
+		it('round-trips a stored object', () => {
+			userPreferences.setMap('k', { sort: 'activity', group: true });
+			expect(userPreferences.getMap('k')).toEqual({ sort: 'activity', group: true });
+		});
+
+		it('getMap returns null for unset key', () => {
+			expect(userPreferences.getMap('missing')).toBeNull();
+		});
+
+		it('getMap returns null when the stored string is not JSON', () => {
+			userPreferences.setString('k', 'not-json');
+			expect(userPreferences.getMap('k')).toBeNull();
+		});
 	});
 
-	it('getNumber returns 0 for stored 0', () => {
-		userPreferences.setNumber('k', 0);
-		expect(userPreferences.getNumber('k')).toBe(0);
+	describe('key management', () => {
+		it('contains reports whether a key is stored', () => {
+			expect(userPreferences.contains('k')).toBe(false);
+			userPreferences.setString('k', 'value');
+			expect(userPreferences.contains('k')).toBe(true);
+		});
+
+		it('removeItem drops a single key', () => {
+			userPreferences.setString('keep', 'a');
+			userPreferences.setString('drop', 'b');
+			userPreferences.removeItem('drop');
+			expect(userPreferences.contains('drop')).toBe(false);
+			expect(userPreferences.getString('keep')).toBe('a');
+		});
+
+		it('getAllKeys lists every stored key', () => {
+			userPreferences.setString('a', '1');
+			userPreferences.setBool('b', true);
+			userPreferences.setNumber('c', 2);
+			expect(userPreferences.getAllKeys().sort()).toEqual(['a', 'b', 'c']);
+		});
+
+		it('clearAll empties the storage', () => {
+			userPreferences.setString('a', '1');
+			userPreferences.clearAll();
+			expect(userPreferences.getAllKeys()).toEqual([]);
+		});
 	});
 
-	it('getNumber returns null for unset key', () => {
-		expect(userPreferences.getNumber('missing')).toBeNull();
+	describe('useUserPreferences', () => {
+		it('returns the default value when nothing is stored', () => {
+			const { result } = renderHook(() => useUserPreferences('k', 'fallback'));
+			expect(result.current[0]).toBe('fallback');
+		});
+
+		it('returns undefined when nothing is stored and no default is given', () => {
+			const { result } = renderHook(() => useUserPreferences('k'));
+			expect(result.current[0]).toBeUndefined();
+		});
+
+		it('reads back a string written through the setter', () => {
+			const { result } = renderHook(() => useUserPreferences('k', 'fallback'));
+
+			act(() => result.current[1]('written'));
+
+			expect(result.current[0]).toBe('written');
+			expect(userPreferences.getString('k')).toBe('written');
+		});
+
+		it('round-trips a non-string value as JSON', () => {
+			const { result } = renderHook(() => useUserPreferences<{ sort: string }>('k', { sort: 'alphabetical' }));
+
+			act(() => result.current[1]({ sort: 'activity' }));
+
+			expect(result.current[0]).toEqual({ sort: 'activity' });
+			expect(userPreferences.getMap('k')).toEqual({ sort: 'activity' });
+		});
+
+		it('falls back to the default when the stored string is not valid JSON', () => {
+			userPreferences.setString('k', 'not-json');
+			const { result } = renderHook(() => useUserPreferences<{ sort: string }>('k', { sort: 'alphabetical' }));
+
+			expect(result.current[0]).toEqual({ sort: 'alphabetical' });
+		});
+
+		it('clears the stored value when set to undefined', () => {
+			userPreferences.setString('k', 'written');
+			const { result } = renderHook(() => useUserPreferences('k', 'fallback'));
+
+			act(() => result.current[1](undefined));
+
+			expect(userPreferences.contains('k')).toBe(false);
+			expect(result.current[0]).toBe('fallback');
+		});
 	});
 });
diff --git a/app/sagas/deepLinking.js b/app/sagas/deepLinking.js
index a55b9227e9e..d6a32ae75e9 100644
--- a/app/sagas/deepLinking.js
+++ b/app/sagas/deepLinking.js
@@ -28,6 +28,7 @@ import { videoConfJoin } from '../lib/methods/videoConf';
 import { loginOAuthOrSso } from '../lib/services/connect';
 import { notifyUser } from '../lib/services/restApi';
 import sdk from '../lib/services/sdk';
+import { preloadNativeHeaderIcons } from './preloadNativeHeaderIcons';
 import Navigation, { waitForNavigationReady } from '../lib/navigation/appNavigation';
 import { resetVoipState } from '../lib/services/voip/resetVoipState';
 
@@ -325,6 +326,7 @@ const handleOpenDifferentServer = function* handleOpenDifferentServer({ params,
 };
 
 const handleOpen = function* handleOpen({ params }) {
+	yield call(preloadNativeHeaderIcons);
 	if (params.type === 'shareextension') {
 		yield handleShareExtension({ params });
 		return;
diff --git a/app/sagas/init.js b/app/sagas/init.js
index 54b114387ed..4701a0723f8 100644
--- a/app/sagas/init.js
+++ b/app/sagas/init.js
@@ -17,6 +17,7 @@ import { RootEnum } from '../definitions';
 import { getSortPreferences } from '../lib/methods/userPreferencesMethods';
 import { deepLinkingClickCallPush } from '../actions/deepLinking';
 import { getServerById } from '../lib/database/services/Server';
+import { preloadNativeHeaderIcons } from './preloadNativeHeaderIcons';
 
 const PUSH_NOTIFICATION_KEY = 'pushNotification';
 
@@ -73,6 +74,8 @@ const deliverPendingPushNotification = function* deliverPendingPushNotification(
 const restore = function* restore() {
 	yield call(runBiometricTrustMigration);
 
+	yield call(preloadNativeHeaderIcons);
+
 	const restoredServer = yield* getServerToRestore();
 
 	if (restoredServer) {
diff --git a/app/sagas/preloadNativeHeaderIcons.js b/app/sagas/preloadNativeHeaderIcons.js
new file mode 100644
index 00000000000..01aecbeac3b
--- /dev/null
+++ b/app/sagas/preloadNativeHeaderIcons.js
@@ -0,0 +1,16 @@
+import { call } from 'redux-saga/effects';
+
+import { isIOS } from '../lib/methods/helpers';
+import log from '../lib/methods/helpers/log';
+import { preloadHeaderIcons } from '../lib/methods/helpers/navigation/headerIcon';
+
+export const preloadNativeHeaderIcons = function* preloadNativeHeaderIcons() {
+	if (!isIOS) {
+		return;
+	}
+	try {
+		yield call(preloadHeaderIcons);
+	} catch (e) {
+		log(e);
+	}
+};
diff --git a/app/stacks/InsideStack.tsx b/app/stacks/InsideStack.tsx
index d497134dfb3..1f8b581893c 100644
--- a/app/stacks/InsideStack.tsx
+++ b/app/stacks/InsideStack.tsx
@@ -328,8 +328,10 @@ const E2EEnterYourPasswordStack = createNativeStackNavigator({
 	return <Navigator screenOptions={themedHeader(theme)} />;
 });
 
+const fullScreenPresentation = isIOS ? 'fullScreenModal' : 'containedModal';
+
 const InsideStack = createNativeStackNavigator({
-	screenOptions: { ...defaultHeader, presentation: 'containedModal' },
+	screenOptions: { ...defaultHeader, presentation: isIOS ? 'modal' : 'containedModal' },
 	screens: {
 		DrawerNavigator: createNativeStackScreen({
 			screen: DrawerStack,
@@ -347,16 +349,22 @@ const InsideStack = createNativeStackNavigator({
 			screen: E2EEnterYourPasswordStack,
 			options: { headerShown: false }
 		}),
-		AttachmentView: AttachmentViewScreen,
+		AttachmentView: createNativeStackScreen({
+			screen: AttachmentViewScreen,
+			options: { presentation: fullScreenPresentation }
+		}),
 		StatusView: StatusViewScreen,
-		ShareView: ShareViewScreen,
+		ShareView: createNativeStackScreen({
+			screen: ShareViewScreen,
+			options: { presentation: fullScreenPresentation }
+		}),
 		ModalBlockView: createNativeStackScreen({
 			screen: ModalBlockViewScreen,
 			options: (args: any): NativeStackNavigationOptions => (ModalBlockView as any).navigationOptions(args)
 		}),
 		CallView: createNativeStackScreen({
 			screen: CallViewScreen,
-			options: { headerShown: false }
+			options: { headerShown: false, presentation: fullScreenPresentation }
 		})
 	}
 }).with(({ Navigator }) => {
diff --git a/app/stacks/MasterDetailStack/ModalContainer.tsx b/app/stacks/MasterDetailStack/ModalContainer.tsx
index 5e1759d4231..691d4e08bd4 100644
--- a/app/stacks/MasterDetailStack/ModalContainer.tsx
+++ b/app/stacks/MasterDetailStack/ModalContainer.tsx
@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
 		justifyContent: 'center'
 	},
 	backdrop: {
-		...StyleSheet.absoluteFillObject
+		...StyleSheet.absoluteFill
 	}
 });
 
diff --git a/app/stacks/MasterDetailStack/SplitNavigator.tsx b/app/stacks/MasterDetailStack/SplitNavigator.tsx
new file mode 100644
index 00000000000..0598b3e25bd
--- /dev/null
+++ b/app/stacks/MasterDetailStack/SplitNavigator.tsx
@@ -0,0 +1,79 @@
+import {
+	createNavigatorFactory,
+	type DefaultNavigatorOptions,
+	type ParamListBase,
+	type TabNavigationState,
+	TabRouter,
+	type TabRouterOptions,
+	useNavigationBuilder
+} from '@react-navigation/native';
+import { StyleSheet, View } from 'react-native';
+
+import { MAX_SIDEBAR_WIDTH } from '~/lib/constants/tablet';
+import { useTheme } from '~/theme';
+
+const DetailFocusedRouter = (options: TabRouterOptions): ReturnType<typeof TabRouter> => {
+	const router = TabRouter({ ...options, backBehavior: 'none' });
+	return {
+		...router,
+		getStateForAction(state, action, configOptions) {
+			const nextState = router.getStateForAction(state, action, configOptions);
+			if (nextState === null || nextState.index === state.index) {
+				return nextState;
+			}
+			return { ...nextState, index: state.index };
+		}
+	};
+};
+
+type SplitNavigatorProps = DefaultNavigatorOptions<
+	ParamListBase,
+	string | undefined,
+	TabNavigationState<ParamListBase>,
+	{},
+	{},
+	any
+> &
+	TabRouterOptions;
+
+const SplitNavigator = ({ id, initialRouteName, children, layout, screenListeners, screenOptions }: SplitNavigatorProps) => {
+	const { colors } = useTheme();
+	const { state, descriptors, NavigationContent } = useNavigationBuilder(DetailFocusedRouter, {
+		id,
+		initialRouteName,
+		children,
+		layout,
+		screenListeners,
+		screenOptions
+	});
+	const [master, ...details] = state.routes;
+
+	return (
+		<NavigationContent>
+			<View style={styles.container}>
+				<View style={[styles.master, { borderColor: colors.strokeLight }]}>{descriptors[master.key].render()}</View>
+				{details.map(route => (
+					<View key={route.key} style={styles.detail}>
+						{descriptors[route.key].render()}
+					</View>
+				))}
+			</View>
+		</NavigationContent>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		flexDirection: 'row'
+	},
+	master: {
+		width: MAX_SIDEBAR_WIDTH,
+		borderEndWidth: StyleSheet.hairlineWidth
+	},
+	detail: {
+		flex: 1
+	}
+});
+
+export const createSplitNavigator = createNavigatorFactory(SplitNavigator);
diff --git a/app/stacks/MasterDetailStack/index.tsx b/app/stacks/MasterDetailStack/index.tsx
index 87a65ff9496..fd0be5035ca 100644
--- a/app/stacks/MasterDetailStack/index.tsx
+++ b/app/stacks/MasterDetailStack/index.tsx
@@ -4,14 +4,14 @@ import {
 	createNativeStackScreen,
 	type NativeStackNavigationProp
 } from '@react-navigation/native-stack';
-import { createDrawerNavigator } from '@react-navigation/drawer';
 import { type StaticScreenProps, useNavigation } from '@react-navigation/native';
 
 import { ThemeContext } from '~/theme';
-import { defaultHeader, themedHeader, drawerStyle } from '~/lib/methods/helpers/navigation';
+import { defaultHeader, themedHeader } from '~/lib/methods/helpers/navigation';
 import withNavigation from '~/lib/navigation/withNavigation';
-import { isIOS } from '~/lib/methods/helpers';
+import { hasNativeHeaderBar, isIOS } from '~/lib/methods/helpers';
 import { ModalContainer } from './ModalContainer';
+import { createSplitNavigator } from './SplitNavigator';
 import { type MasterDetailChatsStackParamList, type MasterDetailInsideStackParamList, type ModalStackParamList } from './types';
 import RoomView from '~/views/RoomView';
 import RoomsListView from '~/views/RoomsListView';
@@ -168,10 +168,23 @@ const ChatsStack = createNativeStackNavigator({
 	return <Navigator screenOptions={themedHeader(theme)} />;
 });
 
-const DrawerNav = createDrawerNavigator({
-	screenOptions: { drawerType: 'permanent', headerShown: false, drawerStyle: { ...drawerStyle } },
-	drawerContent: () => <RoomsListView />,
+const RoomsListStack = createNativeStackNavigator({
+	screenOptions: defaultHeader,
 	screens: {
+		RoomsListView: createNativeStackScreen({
+			screen: RoomsListView,
+			options: { headerShown: hasNativeHeaderBar }
+		})
+	}
+}).with(({ Navigator }) => {
+	const { theme } = useContext(ThemeContext);
+	return <Navigator screenOptions={themedHeader(theme)} />;
+});
+
+const SplitNav = createSplitNavigator({
+	initialRouteName: 'ChatsStackNavigator',
+	screens: {
+		RoomsListStackNavigator: RoomsListStack,
 		ChatsStackNavigator: ChatsStack
 	}
 });
@@ -250,6 +263,9 @@ const ModalStack = createNativeStackNavigator({
 }).with(({ Navigator }) => {
 	const { theme } = useContext(ThemeContext);
 	const navigation = useNavigation<NativeStackNavigationProp<any>>();
+	if (isIOS) {
+		return <Navigator screenOptions={themedHeader(theme)} />;
+	}
 	return (
 		<ModalContainer navigation={navigation} theme={theme}>
 			<Navigator screenOptions={themedHeader(theme)} />
@@ -264,12 +280,14 @@ const InsideStack = createNativeStackNavigator({
 	},
 	screens: {
 		DrawerNavigator: createNativeStackScreen({
-			screen: DrawerNav as any,
+			screen: SplitNav as any,
 			options: { headerShown: false }
 		}),
 		ModalStackNavigator: createNativeStackScreen({
 			screen: ModalStack as any,
-			options: { headerShown: false }
+			options: isIOS
+				? { headerShown: false, presentation: 'formSheet', sheetAllowedDetents: [1.0], sheetGrabberVisible: false }
+				: { headerShown: false }
 		}),
 		AttachmentView,
 		ModalBlockView: createNativeStackScreen({
diff --git a/app/stacks/MasterDetailStack/types.ts b/app/stacks/MasterDetailStack/types.ts
index cdd11f23bba..c4c397fe2c1 100644
--- a/app/stacks/MasterDetailStack/types.ts
+++ b/app/stacks/MasterDetailStack/types.ts
@@ -23,7 +23,8 @@ export type MasterDetailChatsStackParamList = {
 	};
 };
 
-export type MasterDetailDrawerParamList = {
+export type MasterDetailSplitParamList = {
+	RoomsListStackNavigator: NavigatorScreenParams<{ RoomsListView: undefined }>;
 	ChatsStackNavigator: NavigatorScreenParams<MasterDetailChatsStackParamList>;
 };
 
@@ -206,7 +207,7 @@ export type ModalStackParamList = {
 };
 
 export type MasterDetailInsideStackParamList = {
-	DrawerNavigator: NavigatorScreenParams<Partial<MasterDetailDrawerParamList>>; // TODO: Change
+	DrawerNavigator: NavigatorScreenParams<Partial<MasterDetailSplitParamList>>; // TODO: Change
 	ModalStackNavigator: NavigatorScreenParams<ModalStackParamList>;
 	ModalBlockView: {
 		data: any; // TODO: Change
diff --git a/app/views/AccessibilityAndAppearanceView/accessibilityAndAppearanceView.test.tsx b/app/views/AccessibilityAndAppearanceView/accessibilityAndAppearanceView.test.tsx
index 5a2afdd97ac..4e6c7d41e1d 100644
--- a/app/views/AccessibilityAndAppearanceView/accessibilityAndAppearanceView.test.tsx
+++ b/app/views/AccessibilityAndAppearanceView/accessibilityAndAppearanceView.test.tsx
@@ -28,10 +28,10 @@ describe('Autoplay GIFs switch', () => {
 
 		const { getByTestId } = render(<AccessibilityAndAppearanceView />);
 
-		const autoplaySwitch = getByTestId('accessibility-autoplay-gifs-switch').findByProps({ value: false });
-		expect(autoplaySwitch.props.value).toBe(false);
+		const autoplaySwitch = getByTestId('accessibility-autoplay-gifs-switch').findByProps({ isOn: false });
+		expect(autoplaySwitch.props.isOn).toBe(false);
 
-		fireEvent(autoplaySwitch, 'valueChange', true);
+		fireEvent(autoplaySwitch, 'isOnChange', { nativeEvent: { isOn: true } });
 
 		expect(mockSetAutoplayGifs).toHaveBeenCalledWith(true);
 	});
diff --git a/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx
index 495ef5d04ee..9e546c95bd6 100644
--- a/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx
+++ b/app/views/AccessibilityAndAppearanceView/components/ListPicker.tsx
@@ -1,24 +1,18 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type TActionSheetOptionsItem, useActionSheet } from '~/containers/ActionSheet';
 import { CustomIcon } from '~/containers/CustomIcon';
 import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
+import { useNativeListMode } from '~/containers/List/native/context';
+import NativeListPicker from '~/containers/List/native/Picker';
 import I18n from '~/i18n';
 import { useTheme } from '~/theme';
 import sharedStyles from '~/views/Styles';
 import { type TAlertDisplayType } from '..';
 
 const styles = StyleSheet.create({
-	leftTitleContainer: {
-		flex: 1,
-		justifyContent: 'center',
-		alignItems: 'flex-start'
-	},
-	leftTitle: {
-		...sharedStyles.textMedium,
-		fontSize: 16,
-		lineHeight: 24
-	},
 	rightContainer: {
 		flex: 1
 	},
@@ -50,6 +44,7 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const nativeListMode = useNativeListMode();
 
 	const OPTIONS: TOPTIONS = [
 		{
@@ -80,6 +75,17 @@ const ListPicker = ({
 			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.strokeHighlight} /> : undefined
 		}));
 
+	if (nativeListMode === 'native') {
+		return (
+			<NativeListPicker
+				title={title}
+				options={OPTIONS.map(i => ({ label: i.label, value: i.value }))}
+				selection={option.value}
+				onSelectionChange={selected => onChangeValue(selected as TAlertDisplayType)}
+			/>
+		);
+	}
+
 	const openOptions = () => {
 		const options = getOptions();
 		showActionSheet({ options });
@@ -88,14 +94,11 @@ const ListPicker = ({
 		<List.Item
 			accessibilityLabel={`${title}. ${option?.label}`}
 			onPress={openOptions}
-			title={() => (
-				<View style={styles.leftTitleContainer}>
-					<Text style={[styles.leftTitle, { color: colors.fontDefault }]}>{title}</Text>
-				</View>
-			)}
+			title={title}
+			translateTitle={false}
 			right={() => (
 				<View style={styles.rightTitleContainer}>
-					<Text style={[styles.rightTitle, { color: colors.fontInfo }]}>{option?.label}</Text>
+					<PlainText style={[styles.rightTitle, { color: colors.fontInfo }]}>{option?.label}</PlainText>
 				</View>
 			)}
 			rightContainerStyle={styles.rightContainer}
@@ -104,4 +107,4 @@ const ListPicker = ({
 	);
 };
 
-export default ListPicker;
+export default asNativeListRow(ListPicker);
diff --git a/app/views/AddExistingChannelView/ChannelItem.ios.tsx b/app/views/AddExistingChannelView/ChannelItem.ios.tsx
new file mode 100644
index 00000000000..dd327414a64
--- /dev/null
+++ b/app/views/AddExistingChannelView/ChannelItem.ios.tsx
@@ -0,0 +1,25 @@
+import * as List from '~/containers/List';
+import NativeListRow from '~/containers/NativeListRow';
+import { AVATAR_SIZE } from '~/containers/NativeListRow/constants';
+import I18n from '~/i18n';
+import { useTheme } from '~/theme';
+import { type IChannelItem } from './ChannelItem';
+
+const ChannelItem = ({ title, icon, isChecked, onPress, testID, isFirst, isLast }: IChannelItem) => {
+	const { colors } = useTheme();
+	return (
+		<NativeListRow
+			title={title}
+			onPress={onPress}
+			testID={testID}
+			accessibilityLabel={`${title} ${isChecked ? I18n.t('Checked') : I18n.t('Unchecked')}`}
+			isSelected={isChecked}
+			isFirst={isFirst}
+			isLast={isLast}
+			leading={<List.Icon name={icon} style={{ width: AVATAR_SIZE }} />}
+			trailing={isChecked ? <List.Icon name='check' color={colors.fontHint} /> : undefined}
+		/>
+	);
+};
+
+export default ChannelItem;
diff --git a/app/views/AddExistingChannelView/ChannelItem.tsx b/app/views/AddExistingChannelView/ChannelItem.tsx
new file mode 100644
index 00000000000..10fd6b5614f
--- /dev/null
+++ b/app/views/AddExistingChannelView/ChannelItem.tsx
@@ -0,0 +1,31 @@
+import * as List from '~/containers/List';
+import { type TIconsName } from '~/containers/CustomIcon';
+import { useTheme } from '~/theme';
+
+export interface IChannelItem {
+	title: string;
+	icon: TIconsName;
+	isChecked: boolean;
+	onPress: () => void;
+	testID: string;
+	isFirst: boolean;
+	isLast: boolean;
+}
+
+const ChannelItem = ({ title, icon, isChecked, onPress, testID }: IChannelItem) => {
+	const { colors } = useTheme();
+	return (
+		<List.Item
+			title={title}
+			translateTitle={false}
+			onPress={onPress}
+			testID={testID}
+			left={() => <List.Icon name={icon} />}
+			right={() => (isChecked ? <List.Icon name='check' color={colors.fontHint} /> : null)}
+			additionalAccessibilityLabel={isChecked}
+			additionalAccessibilityLabelCheck
+		/>
+	);
+};
+
+export default ChannelItem;
diff --git a/app/views/AddExistingChannelView/index.tsx b/app/views/AddExistingChannelView/index.tsx
index 8e69edbdbe9..60f0520bf85 100644
--- a/app/views/AddExistingChannelView/index.tsx
+++ b/app/views/AddExistingChannelView/index.tsx
@@ -6,7 +6,6 @@ import { Q } from '@nozbe/watermelondb';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { textInputDebounceTime } from '~/lib/constants/debounceConfig';
-import * as List from '~/containers/List';
 import database from '~/lib/database';
 import I18n from '~/i18n';
 import log, { events, logEvent } from '~/lib/methods/helpers/log';
@@ -23,6 +22,9 @@ import { addRoomsToTeam } from '~/lib/services/restApi';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import Navigation from '~/lib/navigation/appNavigation';
+import RowSeparator from '~/containers/NativeListRow/Separator';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
+import ChannelItem from './ChannelItem';
 
 type TNavigation = NativeStackNavigationProp<ChatsStackParamList, 'AddExistingChannelView'>;
 type TRoute = RouteProp<ChatsStackParamList, 'AddExistingChannelView'>;
@@ -34,6 +36,7 @@ const AddExistingChannelView = () => {
 	const [selected, setSelected] = useState<string[]>([]);
 
 	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceRoom);
 
 	const navigation = useNavigation<TNavigation>();
 	const {
@@ -160,24 +163,23 @@ const AddExistingChannelView = () => {
 				ListHeaderComponent={
 					<SearchBox onChangeText={(text: string) => onSearchChangeText(text)} testID='add-existing-channel-view-search' />
 				}
-				renderItem={({ item }: { item: TSubscriptionModel }) => {
+				renderItem={({ item, index }: { item: TSubscriptionModel; index: number }) => {
 					// TODO: reuse logic inside RoomTypeIcon
 					const icon = item.t === SubscriptionType.GROUP && !item?.teamId ? 'channel-private' : 'channel-public';
 					return (
-						<List.Item
+						<ChannelItem
 							title={getRoomTitle(item)}
-							translateTitle={false}
+							icon={icon}
+							isChecked={isChecked(item.rid)}
 							onPress={() => toggleChannel(item.rid)}
 							testID={`add-existing-channel-view-item-${item.name}`}
-							left={() => <List.Icon name={icon} />}
-							right={() => (isChecked(item.rid) ? <List.Icon name='check' color={colors.fontHint} /> : null)}
-							additionalAccessibilityLabel={isChecked(item.rid)}
-							additionalAccessibilityLabelCheck
+							isFirst={index === 0}
+							isLast={index === channels.length - 1}
 						/>
 					);
 				}}
-				ItemSeparatorComponent={List.Separator}
-				contentContainerStyle={{ backgroundColor: colors.surfaceRoom, paddingBottom: bottom }}
+				ItemSeparatorComponent={RowSeparator}
+				contentContainerStyle={{ backgroundColor: listBackgroundColor, paddingBottom: bottom }}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/AuthLoadingView.tsx b/app/views/AuthLoadingView.tsx
index b1be927e220..8defe7adc90 100644
--- a/app/views/AuthLoadingView.tsx
+++ b/app/views/AuthLoadingView.tsx
@@ -1,5 +1,6 @@
 import { memo, type ReactElement } from 'react';
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { ActivityIndicator, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '../i18n';
 import { useTheme } from '../theme';
@@ -28,7 +29,7 @@ const AuthLoadingView = memo((): ReactElement => {
 			{text ? (
 				<>
 					<ActivityIndicator color={colors.fontSecondaryInfo} size='large' />
-					<Text style={[styles.text, { color: colors.fontDefault }]}>{`${text}\n${I18n.t('Please_wait')}`}</Text>
+					<PlainText style={[styles.text, { color: colors.fontDefault }]}>{`${text}\n${I18n.t('Please_wait')}`}</PlainText>
 				</>
 			) : null}
 		</View>
diff --git a/app/views/CallView/__snapshots__/index.test.tsx.snap b/app/views/CallView/__snapshots__/index.test.tsx.snap
index a29f9ff832c..06e6dfcbef9 100644
--- a/app/views/CallView/__snapshots__/index.test.tsx.snap
+++ b/app/views/CallView/__snapshots__/index.test.tsx.snap
@@ -122,6 +122,7 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -139,6 +140,8 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -157,6 +160,9 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -305,6 +311,9 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -415,6 +424,9 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -525,6 +537,9 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -646,6 +661,9 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -756,6 +774,9 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -866,6 +887,9 @@ exports[`Story Snapshots: ConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1017,6 +1041,7 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -1034,6 +1059,8 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -1052,6 +1079,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1200,6 +1230,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1312,6 +1345,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1424,6 +1460,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1545,6 +1584,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1655,6 +1697,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Cancel"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1767,6 +1812,9 @@ exports[`Story Snapshots: ConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -1918,6 +1966,7 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -1935,6 +1984,8 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -1953,6 +2004,9 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -2101,6 +2155,9 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -2211,6 +2268,9 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unhold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -2321,6 +2381,9 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unmute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -2442,6 +2505,9 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -2552,6 +2618,9 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -2662,6 +2731,9 @@ exports[`Story Snapshots: MutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -2813,6 +2885,7 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -2830,6 +2903,8 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -2848,6 +2923,9 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -2996,6 +3074,9 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -3106,6 +3187,9 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -3216,6 +3300,9 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unmute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -3337,6 +3424,9 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -3447,6 +3537,9 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -3557,6 +3650,9 @@ exports[`Story Snapshots: MutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -3708,6 +3804,7 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -3725,6 +3822,8 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -3743,6 +3842,9 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -3891,6 +3993,9 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -4001,6 +4106,9 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unhold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -4111,6 +4219,9 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -4232,6 +4343,9 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -4342,6 +4456,9 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -4452,6 +4569,9 @@ exports[`Story Snapshots: OnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -4603,6 +4723,7 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -4620,6 +4741,8 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -4638,6 +4761,9 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -4786,6 +4912,9 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -4896,6 +5025,9 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5006,6 +5138,9 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5127,6 +5262,9 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5237,6 +5375,9 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5347,6 +5488,9 @@ exports[`Story Snapshots: SpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5481,6 +5625,7 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -5498,6 +5643,8 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -5516,6 +5663,9 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -5664,6 +5814,9 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5774,6 +5927,9 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5884,6 +6040,9 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -5994,6 +6153,9 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6104,6 +6266,9 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6214,6 +6379,9 @@ exports[`Story Snapshots: TabletConnectedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6348,6 +6516,7 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -6365,6 +6534,8 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -6383,6 +6554,9 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -6531,6 +6705,9 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6643,6 +6820,9 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6755,6 +6935,9 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6865,6 +7048,9 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -6975,6 +7161,9 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Cancel"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -7087,6 +7276,9 @@ exports[`Story Snapshots: TabletConnectingCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -7221,6 +7413,7 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -7238,6 +7431,8 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -7256,6 +7451,9 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -7404,6 +7602,9 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -7514,6 +7715,9 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unhold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -7624,6 +7828,9 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unmute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -7734,6 +7941,9 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -7844,6 +8054,9 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -7954,6 +8167,9 @@ exports[`Story Snapshots: TabletMutedAndOnHold should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -8088,6 +8304,7 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -8105,6 +8322,8 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -8123,6 +8342,9 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -8271,6 +8493,9 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -8381,6 +8606,9 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -8491,6 +8719,9 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unmute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -8601,6 +8832,9 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -8711,6 +8945,9 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -8821,6 +9058,9 @@ exports[`Story Snapshots: TabletMutedCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -8955,6 +9195,7 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -8972,6 +9213,8 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -8990,6 +9233,9 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -9138,6 +9384,9 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -9248,6 +9497,9 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Unhold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -9358,6 +9610,9 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -9468,6 +9723,9 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -9578,6 +9836,9 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -9688,6 +9949,9 @@ exports[`Story Snapshots: TabletOnHoldCall should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -9822,6 +10086,7 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -9839,6 +10104,8 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -9857,6 +10124,9 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -10005,6 +10275,9 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -10115,6 +10388,9 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -10225,6 +10501,9 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -10335,6 +10614,9 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -10445,6 +10727,9 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -10555,6 +10840,9 @@ exports[`Story Snapshots: TabletSpeakerOn should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -10689,6 +10977,7 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -10706,6 +10995,8 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -10724,6 +11015,9 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -10872,6 +11166,9 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -10982,6 +11279,9 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -11092,6 +11392,9 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -11202,6 +11505,9 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -11312,6 +11618,9 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -11422,6 +11731,9 @@ exports[`Story Snapshots: TabletWithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -11573,6 +11885,7 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
             onProgress={[Function]}
             placeholder={[]}
             priority="high"
+            sfEffect={null}
             source={
               [
                 {
@@ -11590,6 +11903,8 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
                 "width": 120,
               }
             }
+            symbolSize={null}
+            symbolWeight={null}
             transition={null}
             width={120}
           />
@@ -11608,6 +11923,9 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
         }
       >
         <Text
+          accessibilityLabel="Bob Burnquist"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -11756,6 +12074,9 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Speaker"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -11866,6 +12187,9 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Hold"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -11976,6 +12300,9 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Mute"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -12097,6 +12424,9 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Message"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -12207,6 +12537,9 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="End"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
@@ -12317,6 +12650,9 @@ exports[`Story Snapshots: WithDialpad should match snapshot 1`] = `
             </Text>
           </View>
           <Text
+            accessibilityLabel="Dialpad"
+            accessibilityRole="text"
+            accessible={true}
             numberOfLines={1}
             style={
               [
diff --git a/app/views/CallView/components/CallActionButton.tsx b/app/views/CallView/components/CallActionButton.tsx
index 494d8a8f795..e6e159f6b25 100644
--- a/app/views/CallView/components/CallActionButton.tsx
+++ b/app/views/CallView/components/CallActionButton.tsx
@@ -1,4 +1,5 @@
-import { Text, View, Pressable } from 'react-native';
+import { View, Pressable } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import * as Haptics from 'expo-haptics';
 import { type ReactElement } from 'react';
 
@@ -72,9 +73,9 @@ const CallActionButton = ({
 				testID={testID}>
 				<CustomIcon name={icon} size={32} color={getIconColor()} />
 			</Pressable>
-			<Text numberOfLines={1} style={[styles.actionButtonLabel, { color: colors.fontDefault }]}>
+			<PlainText numberOfLines={1} style={[styles.actionButtonLabel, { color: colors.fontDefault }]}>
 				{label}
-			</Text>
+			</PlainText>
 		</View>
 	);
 };
diff --git a/app/views/CallView/components/CallerInfo.tsx b/app/views/CallView/components/CallerInfo.tsx
index 3ad4deabb41..3970803fdb2 100644
--- a/app/views/CallView/components/CallerInfo.tsx
+++ b/app/views/CallView/components/CallerInfo.tsx
@@ -1,4 +1,5 @@
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import Animated, { useAnimatedStyle, withTiming } from 'react-native-reanimated';
 import type { ReactElement } from 'react';
 
@@ -35,9 +36,9 @@ const CallerInfo = (): ReactElement => {
 				<AvatarContainer text={avatarText} size={120} borderRadius={2} />
 			</View>
 			<Animated.View style={[styles.callerRow, callerRowStyle]}>
-				<Text style={[styles.caller, { color: colors.fontDefault }]} numberOfLines={1} testID='caller-info-name'>
+				<PlainText style={[styles.caller, { color: colors.fontDefault }]} numberOfLines={1} testID='caller-info-name'>
 					{name}
-				</Text>
+				</PlainText>
 			</Animated.View>
 		</Pressable>
 	);
diff --git a/app/views/CallView/components/Dialpad/DialpadButton.tsx b/app/views/CallView/components/Dialpad/DialpadButton.tsx
index a64889aa41e..1173e5b72a8 100644
--- a/app/views/CallView/components/Dialpad/DialpadButton.tsx
+++ b/app/views/CallView/components/Dialpad/DialpadButton.tsx
@@ -1,4 +1,5 @@
-import { Pressable, Text, View } from 'react-native';
+import { Pressable, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import * as Haptics from 'expo-haptics';
 import type { ReactElement } from 'react';
 
@@ -37,8 +38,10 @@ const DialpadButton = ({ digit, letters, testID }: IDialpadButton): ReactElement
 				{ backgroundColor: pressed ? colors.buttonBackgroundSecondaryPress : colors.buttonBackgroundSecondaryDefault }
 			]}>
 			<View style={styles.digitContainer}>
-				<Text style={[styles.digit, isLargeDigit && styles.digitLarge, { color: colors.fontDefault }]}>{digit}</Text>
-				{!isLargeDigit ? <Text style={[styles.letters, { color: colors.fontSecondaryInfo }]}>{letters || ''}</Text> : null}
+				<PlainText style={[styles.digit, isLargeDigit && styles.digitLarge, { color: colors.fontDefault }]}>{digit}</PlainText>
+				{!isLargeDigit ? (
+					<PlainText style={[styles.letters, { color: colors.fontSecondaryInfo }]}>{letters || ''}</PlainText>
+				) : null}
 			</View>
 		</Pressable>
 	);
diff --git a/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap b/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap
index 25a50d663a9..cd049f0cdd1 100644
--- a/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap
+++ b/app/views/CallView/components/Dialpad/__snapshots__/Dialpad.test.tsx.snap
@@ -26,13 +26,13 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
     }
   >
     <A11yOrderView
-      orderKey="«ra»"
+      orderKey="_r_a_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«ra»"
+        orderKey="_r_a_"
       >
         <View
           style={
@@ -184,6 +184,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="1"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -207,6 +210,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               1
             </Text>
             <Text
+              accessibilityLabel=""
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -286,6 +292,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="2"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -309,6 +318,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               2
             </Text>
             <Text
+              accessibilityLabel="ABC"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -390,6 +402,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="3"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -413,6 +428,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               3
             </Text>
             <Text
+              accessibilityLabel="DEF"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -504,6 +522,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="4"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -527,6 +548,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               4
             </Text>
             <Text
+              accessibilityLabel="GHI"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -608,6 +632,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="5"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -631,6 +658,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               5
             </Text>
             <Text
+              accessibilityLabel="JKL"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -712,6 +742,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="6"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -735,6 +768,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               6
             </Text>
             <Text
+              accessibilityLabel="MNO"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -826,6 +862,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="7"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -849,6 +888,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               7
             </Text>
             <Text
+              accessibilityLabel="PQRS"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -930,6 +972,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="8"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -953,6 +998,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               8
             </Text>
             <Text
+              accessibilityLabel="TUV"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1034,6 +1082,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="9"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1057,6 +1108,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               9
             </Text>
             <Text
+              accessibilityLabel="WXYZ"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1148,6 +1202,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="*"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1234,6 +1291,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="0"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1257,6 +1317,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               0
             </Text>
             <Text
+              accessibilityLabel="+"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1338,6 +1401,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="#"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1406,13 +1472,13 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
       }
     >
       <A11yOrderView
-        orderKey="«rb»"
+        orderKey="_r_b_"
       >
         <A11yIndexView
           importantForAccessibility="yes"
           orderFocusType={0}
           orderIndex={1}
-          orderKey="«rb»"
+          orderKey="_r_b_"
         >
           <View
             style={
@@ -1564,6 +1630,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="1"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1587,6 +1656,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 1
               </Text>
               <Text
+                accessibilityLabel=""
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1666,6 +1738,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="2"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1689,6 +1764,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 2
               </Text>
               <Text
+                accessibilityLabel="ABC"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1770,6 +1848,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="3"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1793,6 +1874,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 3
               </Text>
               <Text
+                accessibilityLabel="DEF"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1884,6 +1968,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="4"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1907,6 +1994,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 4
               </Text>
               <Text
+                accessibilityLabel="GHI"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1988,6 +2078,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="5"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2011,6 +2104,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 5
               </Text>
               <Text
+                accessibilityLabel="JKL"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2092,6 +2188,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="6"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2115,6 +2214,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 6
               </Text>
               <Text
+                accessibilityLabel="MNO"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2206,6 +2308,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="7"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2229,6 +2334,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 7
               </Text>
               <Text
+                accessibilityLabel="PQRS"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2310,6 +2418,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="8"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2333,6 +2444,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 8
               </Text>
               <Text
+                accessibilityLabel="TUV"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2414,6 +2528,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="9"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2437,6 +2554,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 9
               </Text>
               <Text
+                accessibilityLabel="WXYZ"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2528,6 +2648,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="*"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2614,6 +2737,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="0"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2637,6 +2763,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
                 0
               </Text>
               <Text
+                accessibilityLabel="+"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2718,6 +2847,9 @@ exports[`Story Snapshots: TabletLandscape should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="#"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2787,13 +2919,13 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
       }
     >
       <A11yOrderView
-        orderKey="«rc»"
+        orderKey="_r_c_"
       >
         <A11yIndexView
           importantForAccessibility="yes"
           orderFocusType={0}
           orderIndex={1}
-          orderKey="«rc»"
+          orderKey="_r_c_"
         >
           <View
             style={
@@ -2945,6 +3077,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="1"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2968,6 +3103,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 1
               </Text>
               <Text
+                accessibilityLabel=""
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3047,6 +3185,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="2"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3070,6 +3211,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 2
               </Text>
               <Text
+                accessibilityLabel="ABC"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3151,6 +3295,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="3"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3174,6 +3321,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 3
               </Text>
               <Text
+                accessibilityLabel="DEF"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3265,6 +3415,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="4"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3288,6 +3441,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 4
               </Text>
               <Text
+                accessibilityLabel="GHI"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3369,6 +3525,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="5"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3392,6 +3551,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 5
               </Text>
               <Text
+                accessibilityLabel="JKL"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3473,6 +3635,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="6"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3496,6 +3661,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 6
               </Text>
               <Text
+                accessibilityLabel="MNO"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3587,6 +3755,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="7"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3610,6 +3781,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 7
               </Text>
               <Text
+                accessibilityLabel="PQRS"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3691,6 +3865,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="8"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3714,6 +3891,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 8
               </Text>
               <Text
+                accessibilityLabel="TUV"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3795,6 +3975,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="9"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3818,6 +4001,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 9
               </Text>
               <Text
+                accessibilityLabel="WXYZ"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3909,6 +4095,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="*"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -3995,6 +4184,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="0"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -4018,6 +4210,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
                 0
               </Text>
               <Text
+                accessibilityLabel="+"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -4099,6 +4294,9 @@ exports[`Story Snapshots: TabletLandscapeWithValue should match snapshot 1`] = `
               }
             >
               <Text
+                accessibilityLabel="#"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -4161,13 +4359,13 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
     }
   >
     <A11yOrderView
-      orderKey="«rd»"
+      orderKey="_r_d_"
     >
       <A11yIndexView
         importantForAccessibility="yes"
         orderFocusType={0}
         orderIndex={1}
-        orderKey="«rd»"
+        orderKey="_r_d_"
       >
         <View
           style={
@@ -4319,6 +4517,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="1"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4342,6 +4543,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               1
             </Text>
             <Text
+              accessibilityLabel=""
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4421,6 +4625,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="2"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4444,6 +4651,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               2
             </Text>
             <Text
+              accessibilityLabel="ABC"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4525,6 +4735,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="3"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4548,6 +4761,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               3
             </Text>
             <Text
+              accessibilityLabel="DEF"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4639,6 +4855,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="4"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4662,6 +4881,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               4
             </Text>
             <Text
+              accessibilityLabel="GHI"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4743,6 +4965,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="5"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4766,6 +4991,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               5
             </Text>
             <Text
+              accessibilityLabel="JKL"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4847,6 +5075,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="6"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4870,6 +5101,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               6
             </Text>
             <Text
+              accessibilityLabel="MNO"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4961,6 +5195,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="7"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -4984,6 +5221,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               7
             </Text>
             <Text
+              accessibilityLabel="PQRS"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5065,6 +5305,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="8"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5088,6 +5331,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               8
             </Text>
             <Text
+              accessibilityLabel="TUV"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5169,6 +5415,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="9"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5192,6 +5441,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               9
             </Text>
             <Text
+              accessibilityLabel="WXYZ"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5283,6 +5535,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="*"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5369,6 +5624,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="0"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5392,6 +5650,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
               0
             </Text>
             <Text
+              accessibilityLabel="+"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -5473,6 +5734,9 @@ exports[`Story Snapshots: WithValue should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="#"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
diff --git a/app/views/CallView/components/__snapshots__/CallActionButton.test.tsx.snap b/app/views/CallView/components/__snapshots__/CallActionButton.test.tsx.snap
index 854a921f66c..c782d533898 100644
--- a/app/views/CallView/components/__snapshots__/CallActionButton.test.tsx.snap
+++ b/app/views/CallView/components/__snapshots__/CallActionButton.test.tsx.snap
@@ -104,6 +104,9 @@ exports[`Story Snapshots: ActiveButton should match snapshot 1`] = `
         </Text>
       </View>
       <Text
+        accessibilityLabel="Unmute"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -243,6 +246,9 @@ exports[`Story Snapshots: AllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Speaker"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -353,6 +359,9 @@ exports[`Story Snapshots: AllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Hold"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -463,6 +472,9 @@ exports[`Story Snapshots: AllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Mute"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -587,6 +599,9 @@ exports[`Story Snapshots: AllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Message"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -697,6 +712,9 @@ exports[`Story Snapshots: AllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="End"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -807,6 +825,9 @@ exports[`Story Snapshots: AllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="More"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -939,6 +960,9 @@ exports[`Story Snapshots: DangerButton should match snapshot 1`] = `
         </Text>
       </View>
       <Text
+        accessibilityLabel="End"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1070,6 +1094,9 @@ exports[`Story Snapshots: DefaultButton should match snapshot 1`] = `
         </Text>
       </View>
       <Text
+        accessibilityLabel="Mute"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1203,6 +1230,9 @@ exports[`Story Snapshots: DisabledButton should match snapshot 1`] = `
         </Text>
       </View>
       <Text
+        accessibilityLabel="Hold"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1343,6 +1373,9 @@ exports[`Story Snapshots: TabletAllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Speaker"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1453,6 +1486,9 @@ exports[`Story Snapshots: TabletAllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Hold"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1563,6 +1599,9 @@ exports[`Story Snapshots: TabletAllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Mute"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1673,6 +1712,9 @@ exports[`Story Snapshots: TabletAllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Message"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1783,6 +1825,9 @@ exports[`Story Snapshots: TabletAllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="End"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
@@ -1893,6 +1938,9 @@ exports[`Story Snapshots: TabletAllVariants should match snapshot 1`] = `
           </Text>
         </View>
         <Text
+          accessibilityLabel="Dialpad"
+          accessibilityRole="text"
+          accessible={true}
           numberOfLines={1}
           style={
             [
diff --git a/app/views/CallView/components/__snapshots__/CallerInfo.test.tsx.snap b/app/views/CallView/components/__snapshots__/CallerInfo.test.tsx.snap
index 33618ff1d53..24eaf2ebba3 100644
--- a/app/views/CallView/components/__snapshots__/CallerInfo.test.tsx.snap
+++ b/app/views/CallView/components/__snapshots__/CallerInfo.test.tsx.snap
@@ -94,6 +94,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -111,6 +112,8 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               "width": 120,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={120}
         />
@@ -129,6 +132,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="Bob Burnquist"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -252,6 +258,7 @@ exports[`Story Snapshots: UsernameOnly should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -269,6 +276,8 @@ exports[`Story Snapshots: UsernameOnly should match snapshot 1`] = `
               "width": 120,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={120}
         />
@@ -287,6 +296,9 @@ exports[`Story Snapshots: UsernameOnly should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="john.doe"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
diff --git a/app/views/CannedResponseDetail.tsx b/app/views/CannedResponseDetail.tsx
index 91dcd733f78..e4ca6aed873 100644
--- a/app/views/CannedResponseDetail.tsx
+++ b/app/views/CannedResponseDetail.tsx
@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { type RouteProp, useNavigation, useRoute } from '@react-navigation/native';
-import { StyleSheet, Text, View, ScrollView } from 'react-native';
+import { StyleSheet, View, ScrollView } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '../i18n';
 import SafeAreaView from '../containers/SafeAreaView';
@@ -74,9 +75,9 @@ interface IItem {
 const Item = ({ label, content, theme, testID }: IItem) =>
 	content ? (
 		<View style={styles.item} testID={testID}>
-			<Text accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].fontTitlesLabels }]}>
+			<PlainText accessibilityLabel={label} style={[styles.itemLabel, { color: themes[theme].fontTitlesLabels }]}>
 				{label}
-			</Text>
+			</PlainText>
 			<Markdown msg={content} />
 		</View>
 	) : null;
@@ -112,16 +113,16 @@ const CannedResponseDetail = () => {
 					<Item label={I18n.t('Sharing')} content={cannedResponse?.scopeName} theme={theme} />
 
 					<View style={styles.item}>
-						<Text style={[styles.itemLabel, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Tags')}</Text>
+						<PlainText style={[styles.itemLabel, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Tags')}</PlainText>
 						<View style={styles.cannedTagContainer}>
 							{cannedResponse?.tags?.length > 0 ? (
 								cannedResponse.tags.map(t => (
 									<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
-										<Text style={[styles.cannedTag, { color: themes[theme].fontHint }]}>{t}</Text>
+										<PlainText style={[styles.cannedTag, { color: themes[theme].fontHint }]}>{t}</PlainText>
 									</View>
 								))
 							) : (
-								<Text style={[styles.cannedText, { color: themes[theme].fontHint }]}>-</Text>
+								<PlainText style={[styles.cannedText, { color: themes[theme].fontHint }]}>-</PlainText>
 							)}
 						</View>
 					</View>
diff --git a/app/views/CannedResponsesListView/CannedResponseItem.tsx b/app/views/CannedResponsesListView/CannedResponseItem.tsx
index 476624ee808..fe67648f9df 100644
--- a/app/views/CannedResponsesListView/CannedResponseItem.tsx
+++ b/app/views/CannedResponsesListView/CannedResponseItem.tsx
@@ -1,4 +1,5 @@
 import { View, Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import Touch from '~/containers/Touch';
 import { type TSupportedThemes } from '~/theme';
@@ -31,7 +32,7 @@ const CannedResponseItem = ({
 			<View style={styles.cannedRow}>
 				<View style={styles.cannedWrapShortcutScope}>
 					<Text style={[styles.cannedShortcut, { color: themes[theme].fontTitlesLabels }]}>!{shortcut}</Text>
-					<Text style={[styles.cannedScope, { color: themes[theme].fontHint }]}>{scope}</Text>
+					<PlainText style={[styles.cannedScope, { color: themes[theme].fontHint }]}>{scope}</PlainText>
 				</View>
 
 				<Button
@@ -50,7 +51,7 @@ const CannedResponseItem = ({
 				{tags?.length > 0
 					? tags.map(t => (
 							<View style={[styles.cannedTagWrap, { backgroundColor: themes[theme].strokeExtraLight }]}>
-								<Text style={[styles.cannedTag, { color: themes[theme].fontHint }]}>{t}</Text>
+								<PlainText style={[styles.cannedTag, { color: themes[theme].fontHint }]}>{t}</PlainText>
 							</View>
 						))
 					: null}
diff --git a/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx b/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
index 4b3b59e8fb6..4e19d5162b6 100644
--- a/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
+++ b/app/views/CannedResponsesListView/DepartmentFilter/DepartmentItemFilter.tsx
@@ -1,4 +1,5 @@
-import { PixelRatio, StyleSheet, Text, View } from 'react-native';
+import { PixelRatio, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type ILivechatDepartment } from '~/definitions/ILivechatDepartment';
 import { useTheme } from '~/theme';
@@ -38,7 +39,7 @@ const DepartmentItemFilter = ({ currentDepartment, value, onPress }: IDepartment
 	return (
 		<Touch onPress={() => onPress(value)} style={{ backgroundColor: colors.surfaceRoom }}>
 			<View style={[styles.container, { height }]}>
-				<Text style={[styles.text, { color: colors.fontSecondaryInfo }]}>{value?.name}</Text>
+				<PlainText style={[styles.text, { color: colors.fontSecondaryInfo }]}>{value?.name}</PlainText>
 				{iconName ? <CustomIcon name={iconName} size={22} color={colors.fontSecondaryInfo} /> : null}
 			</View>
 		</Touch>
diff --git a/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap b/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap
index b347ea76688..3032a820509 100644
--- a/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap
+++ b/app/views/CannedResponsesListView/__snapshots__/CannedResponseItem.test.tsx.snap
@@ -24,60 +24,63 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       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,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": undefined,
+            },
+          ],
+          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={
           {
@@ -128,6 +131,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
               !FAQ4
             </Text>
             <Text
+              accessibilityLabel="Private"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -152,60 +158,73 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
               Private
             </Text>
           </View>
-          <RNGestureHandlerButton
+          <View
             accessibilityLabel="Use"
             accessibilityRole="button"
-            activeOpacity={0.105}
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[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,
                   "paddingHorizontal": 16,
                   "paddingVertical": 14,
-                  "width": 56,
                 },
                 {
-                  "cursor": undefined,
+                  "borderRadius": 4,
+                  "marginBottom": 12,
                 },
+                {
+                  "backgroundColor": "#156FF5",
+                },
+                {},
+                [
+                  {
+                    "height": 28,
+                    "marginLeft": 8,
+                    "width": 56,
+                  },
+                  {
+                    "backgroundColor": "#F7F8FA",
+                  },
+                ],
               ]
             }
             underlayColor="black"
           >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "borderBottomLeftRadius": undefined,
-                  "borderBottomRightRadius": undefined,
-                  "borderRadius": 4,
-                  "borderTopLeftRadius": undefined,
-                  "borderTopRightRadius": undefined,
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            />
             <Text
+              accessibilityLabel="Use"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -227,7 +246,7 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             >
               Use
             </Text>
-          </RNGestureHandlerButton>
+          </View>
         </View>
         <Text
           ellipsizeMode="tail"
@@ -266,7 +285,7 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
           }
         />
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
   <ExternalKeyboardView
     canBeFocused={true}
@@ -290,60 +309,63 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
       ]
     }
   >
-    <RNGestureHandlerButton
-      activeOpacity={1}
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      activeUnderlayOpacity={1}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
-      rippleColor="#E4E7EA"
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       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,
-          },
+          [
+            undefined,
+            {
+              "margin": undefined,
+              "marginBottom": undefined,
+              "marginEnd": undefined,
+              "marginHorizontal": undefined,
+              "marginLeft": undefined,
+              "marginRight": undefined,
+              "marginStart": undefined,
+              "marginTop": undefined,
+              "marginVertical": undefined,
+            },
+            {
+              "backgroundColor": "#FFFFFF",
+              "borderRadius": undefined,
+            },
+          ],
+          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={
           {
@@ -394,6 +416,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
               test4mobilePrivate
             </Text>
             <Text
+              accessibilityLabel="Private"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -418,60 +443,73 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
               Private
             </Text>
           </View>
-          <RNGestureHandlerButton
+          <View
             accessibilityLabel="Use"
             accessibilityRole="button"
-            activeOpacity={0.105}
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[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,
                   "paddingHorizontal": 16,
                   "paddingVertical": 14,
-                  "width": 56,
                 },
                 {
-                  "cursor": undefined,
+                  "borderRadius": 4,
+                  "marginBottom": 12,
                 },
+                {
+                  "backgroundColor": "#156FF5",
+                },
+                {},
+                [
+                  {
+                    "height": 28,
+                    "marginLeft": 8,
+                    "width": 56,
+                  },
+                  {
+                    "backgroundColor": "#F7F8FA",
+                  },
+                ],
               ]
             }
             underlayColor="black"
           >
-            <View
-              collapsable={false}
-              style={
-                {
-                  "backgroundColor": "black",
-                  "borderBottomLeftRadius": undefined,
-                  "borderBottomRightRadius": undefined,
-                  "borderRadius": 4,
-                  "borderTopLeftRadius": undefined,
-                  "borderTopRightRadius": undefined,
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            />
             <Text
+              accessibilityLabel="Use"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -493,7 +531,7 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             >
               Use
             </Text>
-          </RNGestureHandlerButton>
+          </View>
         </View>
         <Text
           ellipsizeMode="tail"
@@ -547,6 +585,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="HQ"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -587,6 +628,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Closed"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -627,6 +671,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="HQ"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -667,6 +714,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Problem in Product Y"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -707,6 +757,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="HQ"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -747,6 +800,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Closed"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -787,6 +843,9 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Problem in Product Y"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -813,7 +872,7 @@ exports[`Story Snapshots: Itens should match snapshot 1`] = `
           </View>
         </View>
       </View>
-    </RNGestureHandlerButton>
+    </View>
   </ExternalKeyboardView>,
 ]
 `;
diff --git a/app/views/CannedResponsesListView/index.tsx b/app/views/CannedResponsesListView/index.tsx
index fe31df31ffa..428e90cdfb9 100644
--- a/app/views/CannedResponsesListView/index.tsx
+++ b/app/views/CannedResponsesListView/index.tsx
@@ -1,11 +1,13 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { FlatList } from 'react-native';
 import { type RouteProp } from '@react-navigation/native';
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { type SearchBarCommands } from 'react-native-screens';
 
 import database from '~/lib/database';
 import I18n from '~/i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import { hideActionSheetRef, showActionSheetRef } from '~/containers/ActionSheet';
 import SafeAreaView from '~/containers/SafeAreaView';
 import ActivityIndicator from '~/containers/ActivityIndicator';
@@ -22,7 +24,7 @@ import DepartmentFilter from './DepartmentFilter';
 import styles from './styles';
 import { type ICannedResponse } from '~/definitions/ICannedResponse';
 import { type ChatsStackParamList } from '~/stacks/types';
-import { useDebounce } from '~/lib/methods/helpers';
+import { hasNativeHeaderBar, useDebounce } from '~/lib/methods/helpers';
 import { getListCannedResponse, getDepartments } from '~/lib/services/restApi';
 import { type ILivechatDepartment } from '~/definitions/ILivechatDepartment';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
@@ -69,6 +71,7 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 	const { theme } = useTheme();
 	const isMasterDetail = useMasterDetail();
 	const { bottom } = useSafeAreaInsets();
+	const searchBarRef = useRef<SearchBarCommands>(null);
 
 	const getRoomFromDb = async () => {
 		const { rid } = route.params;
@@ -209,7 +212,27 @@ const CannedResponsesListView = ({ navigation, route }: ICannedResponsesListView
 		await handleGetListCannedResponse({ text: searchText, department: scope, depId: departmentId, debounced: false });
 	};
 
-	const getHeader = () => {
+	const getHeader = (): NativeStackNavigationOptions => {
+		if (hasNativeHeaderBar) {
+			return {
+				headerLeft: () => null,
+				headerTitle: I18n.t('Canned_Responses'),
+				headerSearchBarOptions: stackedSearchBarOptions({
+					ref: searchBarRef,
+					onChangeText,
+					onCancel: () => {
+						onChangeText('');
+						searchBarRef.current?.clearText();
+					}
+				}),
+				headerRight: () => (
+					<HeaderButton.Container>
+						<HeaderButton.Item iconName='filter' onPress={showFilters} />
+					</HeaderButton.Container>
+				)
+			};
+		}
+
 		if (isSearching) {
 			return {
 				headerLeft: () => (
diff --git a/app/views/ChangeAvatarView/AvatarSuggestion.tsx b/app/views/ChangeAvatarView/AvatarSuggestion.tsx
index 5120a312b62..9f6b74fc7e9 100644
--- a/app/views/ChangeAvatarView/AvatarSuggestion.tsx
+++ b/app/views/ChangeAvatarView/AvatarSuggestion.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type IAvatar } from '~/definitions';
 import { getAvatarSuggestion } from '~/lib/services/restApi';
@@ -46,7 +47,7 @@ const AvatarSuggestion = ({
 
 	return (
 		<View style={styles.containerImagesUploaded}>
-			<Text style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Images_uploaded')}</Text>
+			<PlainText style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Images_uploaded')}</PlainText>
 			<View style={styles.containerAvatarSuggestion}>
 				{username && resetAvatar ? (
 					<AvatarSuggestionItem
diff --git a/app/views/ChangePasswordView/index.tsx b/app/views/ChangePasswordView/index.tsx
index c9271b20ef8..7c33f1f323e 100644
--- a/app/views/ChangePasswordView/index.tsx
+++ b/app/views/ChangePasswordView/index.tsx
@@ -1,5 +1,6 @@
 import { useLayoutEffect, useState } from 'react';
-import { AccessibilityInfo, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { AccessibilityInfo, ScrollView, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
@@ -203,7 +204,7 @@ const ChangePasswordView = ({ navigation }: IChangePasswordViewProps) => {
 					]}
 					testID='change-password-view-list'
 					{...scrollPersistTaps}>
-					<Text style={{ ...styles.createNewPasswordTitle, color: colors.fontTitlesLabels }}>Create new password</Text>
+					<PlainText style={{ ...styles.createNewPasswordTitle, color: colors.fontTitlesLabels }}>Create new password</PlainText>
 
 					<View style={{ gap: 12 }}>
 						{fromProfileView ? (
diff --git a/app/views/CloseLivechatView.tsx b/app/views/CloseLivechatView.tsx
index 192e91187ec..e43ba280243 100644
--- a/app/views/CloseLivechatView.tsx
+++ b/app/views/CloseLivechatView.tsx
@@ -1,5 +1,6 @@
 import { useState, useLayoutEffect } from 'react';
-import { StyleSheet, ScrollView, Text } from 'react-native';
+import { StyleSheet, ScrollView } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { BlockContext } from '@rocket.chat/ui-kit';
 import { type RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -93,7 +94,7 @@ const CloseLivechatView = () => {
 
 					{requestTags ? (
 						<>
-							<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{I18n.t('Tags')}</Text>
+							<PlainText style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>{I18n.t('Tags')}</PlainText>
 							<MultiSelect
 								options={tagsList?.map(({ name }) => ({ text: { text: name }, value: name }))}
 								onChange={({ value }: { value: string[] }) => {
diff --git a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
index 92557f9c4e4..f79bbb775af 100644
--- a/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
+++ b/app/views/CreateChannelView/RoomSettings/SwitchItem.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View, type SwitchProps } from 'react-native';
+import { StyleSheet, View, type SwitchProps } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '~/i18n';
 import { useTheme } from '~/theme';
@@ -41,10 +42,10 @@ export const SwitchItem = ({ id, value, label, hint, onValueChange, disabled = f
 	return (
 		<View style={[styles.switchContainer, { backgroundColor: colors.surfaceTint }]}>
 			<View accessible accessibilityLabel={`${I18n.t(label)}, ${I18n.t(hint)}`} style={styles.switchTextContainer}>
-				<Text style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</Text>
-				<Text testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo }]}>
+				<PlainText style={[styles.label, { color: colors.fontTitlesLabels }]}>{I18n.t(label)}</PlainText>
+				<PlainText testID={`create-channel-${id}-hint`} style={[styles.hint, { color: colors.fontSecondaryInfo }]}>
 					{I18n.t(hint)}
-				</Text>
+				</PlainText>
 			</View>
 			<Switch
 				accessibilityRole='switch'
diff --git a/app/views/CreateChannelView/RoomSettings/__snapshots__/SwitchItem.test.tsx.snap b/app/views/CreateChannelView/RoomSettings/__snapshots__/SwitchItem.test.tsx.snap
index a472c91709a..834b61364b6 100644
--- a/app/views/CreateChannelView/RoomSettings/__snapshots__/SwitchItem.test.tsx.snap
+++ b/app/views/CreateChannelView/RoomSettings/__snapshots__/SwitchItem.test.tsx.snap
@@ -36,6 +36,9 @@ exports[`Story Snapshots: Switch should match snapshot 1`] = `
       }
     >
       <Text
+        accessibilityLabel="[missing "en.Onboarding_title" translation]"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
@@ -58,6 +61,9 @@ exports[`Story Snapshots: Switch should match snapshot 1`] = `
         [missing "en.Onboarding_title" translation]
       </Text>
       <Text
+        accessibilityLabel="Only channel owners can send new messages"
+        accessibilityRole="text"
+        accessible={true}
         style={
           [
             {
diff --git a/app/views/CreateDiscussionView/index.tsx b/app/views/CreateDiscussionView/index.tsx
index 9b244a5a4a7..cdaf0f2128e 100644
--- a/app/views/CreateDiscussionView/index.tsx
+++ b/app/views/CreateDiscussionView/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { ScrollView, Text, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -145,7 +146,7 @@ const CreateDiscussionView = ({ route, navigation }: ICreateChannelViewProps) =>
 		<KeyboardView style={styles.container} backgroundColor={colors.surfaceTint}>
 			<SafeAreaView testID='create-discussion-view' style={{ backgroundColor: colors.surfaceTint }}>
 				<ScrollView {...scrollPersistTaps}>
-					<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Discussion_Desc')}</Text>
+					<PlainText style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Discussion_Desc')}</PlainText>
 					<View style={styles.form}>
 						<SelectChannel
 							server={server}
diff --git a/app/views/DefaultBrowserView/index.tsx b/app/views/DefaultBrowserView/index.tsx
index 9b126ab3916..d8a6eb5809f 100644
--- a/app/views/DefaultBrowserView/index.tsx
+++ b/app/views/DefaultBrowserView/index.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
+import { Fragment, useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { FlatList, Linking } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -51,7 +51,7 @@ const DefaultBrowserView = () => {
 	const navigation = useNavigation();
 	const { bottom } = useSafeAreaInsets();
 
-	const paddingBottom = useMemo(() => Math.max(16, bottom), [bottom]);
+	const paddingBottom = Math.max(16, bottom);
 
 	useLayoutEffect(() => {
 		navigation.setOptions({
@@ -85,32 +85,45 @@ const DefaultBrowserView = () => {
 			logEvent(events.DB_CHANGE_DEFAULT_BROWSER_F);
 		}
 	}, []);
+	const browsers = DEFAULT_BROWSERS.concat(supported);
+	const renderBrowser = (item: IBrowsersValues) => (
+		<List.Radio
+			isSelected={(!browser && item.value === 'systemDefault:') || item.title === browser}
+			title={item.title}
+			value={item.value}
+			translateTitle={['In_app', 'System_default'].includes(item.title)}
+			translateSubtitle={false}
+			onPress={changeDefaultBrowser}
+			testID={`default-browser-view-${item.value}`}
+		/>
+	);
+
 	return (
 		<SafeAreaView testID='default-browser-view'>
-			<FlatList
-				data={DEFAULT_BROWSERS.concat(supported)}
-				keyExtractor={item => item.value}
-				contentContainerStyle={[List.styles.contentContainerStyleFlatList, { paddingBottom }]}
-				renderItem={({ item }) => (
-					<List.Radio
-						isSelected={(!browser && item.value === 'systemDefault:') || item.title === browser}
-						title={item.title}
-						value={item.value}
-						translateTitle={['In_app', 'System_default'].includes(item.title)}
-						translateSubtitle={false}
-						onPress={changeDefaultBrowser}
-						testID={`default-browser-view-${item.value}`}
-					/>
-				)}
-				ListHeaderComponent={
-					<>
-						<List.Header title='Choose_where_you_want_links_be_opened' numberOfLines={2} />
-						<List.Separator />
-					</>
-				}
-				ListFooterComponent={List.Separator}
-				ItemSeparatorComponent={List.Separator}
-			/>
+			{isIOS ? (
+				<List.Container>
+					<List.Section title='Choose_where_you_want_links_be_opened'>
+						{browsers.map(item => (
+							<Fragment key={item.value}>{renderBrowser(item)}</Fragment>
+						))}
+					</List.Section>
+				</List.Container>
+			) : (
+				<FlatList
+					data={browsers}
+					keyExtractor={item => item.value}
+					contentContainerStyle={[List.styles.contentContainerStyleFlatList, { paddingBottom }]}
+					renderItem={({ item }) => renderBrowser(item)}
+					ListHeaderComponent={
+						<>
+							<List.Header title='Choose_where_you_want_links_be_opened' numberOfLines={2} />
+							<List.Separator />
+						</>
+					}
+					ListFooterComponent={List.Separator}
+					ItemSeparatorComponent={List.Separator}
+				/>
+			)}
 		</SafeAreaView>
 	);
 };
diff --git a/app/views/DirectoryView/DirectoryRow.tsx b/app/views/DirectoryView/DirectoryRow.tsx
new file mode 100644
index 00000000000..179d0dc3764
--- /dev/null
+++ b/app/views/DirectoryView/DirectoryRow.tsx
@@ -0,0 +1,54 @@
+import { memo } from 'react';
+
+import DirectoryItem from '~/containers/DirectoryItem';
+import I18n from '~/i18n';
+import { type IServerRoom } from '~/definitions';
+import { useTheme } from '~/theme';
+import sharedStyles from '../Styles';
+
+interface IDirectoryRow {
+	item: IServerRoom;
+	type: string;
+	isFirst: boolean;
+	isLast: boolean;
+	onPressItem: (item: IServerRoom) => void;
+}
+
+const getRowDetails = (item: IServerRoom, type: string) => {
+	if (type === 'users') {
+		return { avatar: item.username, description: item.username, rightLabel: item.federation?.peer };
+	}
+	if (type === 'teams') {
+		return { avatar: item.name, description: item.name, rightLabel: I18n.t('N_channels', { n: item.roomsCount }) };
+	}
+	return { avatar: item.name, description: item.topic, rightLabel: I18n.t('N_users', { n: item.usersCount }) };
+};
+
+const DirectoryRow = ({ item, type, isFirst, isLast, onPressItem }: IDirectoryRow) => {
+	const { colors } = useTheme();
+	const title = item.name as string;
+	const onPress = () => onPressItem(item);
+	const testID = `directory-view-item-${item.name}`;
+	const style = isLast ? { ...sharedStyles.separatorBottom, borderColor: colors.strokeLight } : undefined;
+
+	const { avatar, description, rightLabel } = getRowDetails(item, type);
+
+	return (
+		<DirectoryItem
+			title={title}
+			onPress={onPress}
+			testID={testID}
+			style={style}
+			rid={item._id}
+			isFirst={isFirst}
+			isLast={isLast}
+			avatar={avatar}
+			description={description}
+			rightLabel={rightLabel}
+			type={type === 'users' ? 'd' : item.t}
+			teamMain={type === 'teams' ? item.teamMain : undefined}
+		/>
+	);
+};
+
+export default memo(DirectoryRow);
diff --git a/app/views/DirectoryView/Options.tsx b/app/views/DirectoryView/Options.tsx
index 7eb5f491f89..abad31512d0 100644
--- a/app/views/DirectoryView/Options.tsx
+++ b/app/views/DirectoryView/Options.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
 import * as List from '~/containers/List';
@@ -50,7 +51,7 @@ const DirectoryOptions = ({
 	};
 
 	return (
-		<List.Container contentContainerStyle={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
+		<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 			<List.Separator />
 			{renderItem('channels')}
 			<List.Separator />
@@ -63,16 +64,16 @@ const DirectoryOptions = ({
 					<List.Separator />
 					<View style={[styles.filterItemContainer, styles.globalUsersContainer]}>
 						<View style={styles.globalUsersTextContainer}>
-							<Text style={[styles.filterItemText, { color: colors.fontHint }]}>{I18n.t('Search_global_users')}</Text>
-							<Text style={[styles.filterItemDescription, { color: colors.fontHint }]}>
+							<PlainText style={[styles.filterItemText, { color: colors.fontHint }]}>{I18n.t('Search_global_users')}</PlainText>
+							<PlainText style={[styles.filterItemDescription, { color: colors.fontHint }]}>
 								{I18n.t('Search_global_users_description')}
-							</Text>
+							</PlainText>
 						</View>
 						<Switch value={globalUsers} onValueChange={toggleWorkspace} testID='directory-switch-global-users' />
 					</View>
 				</>
 			) : null}
-		</List.Container>
+		</View>
 	);
 };
 
diff --git a/app/views/DirectoryView/index.tsx b/app/views/DirectoryView/index.tsx
index 7c94a9ebe81..b07c4f04efe 100644
--- a/app/views/DirectoryView/index.tsx
+++ b/app/views/DirectoryView/index.tsx
@@ -1,17 +1,19 @@
-import { useLayoutEffect, type ReactElement } from 'react';
-import { FlatList, type ListRenderItem } from 'react-native';
+import { useCallback, useLayoutEffect, type ReactElement } from 'react';
+import { FlashList, type ListRenderItem } from '@shopify/flash-list';
 import { shallowEqual } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
+import {
+	type NativeStackHeaderItemMenuAction,
+	type NativeStackNavigationOptions,
+	type NativeStackNavigationProp
+} from '@react-navigation/native-stack';
 import { type CompositeNavigationProp } from '@react-navigation/native';
 
 import { useActionSheet } from '~/containers/ActionSheet';
 import { type ChatsStackParamList } from '~/stacks/types';
 import { type MasterDetailInsideStackParamList } from '~/stacks/MasterDetailStack/types';
-import * as List from '~/containers/List';
-import DirectoryItem from '~/containers/DirectoryItem';
-import sharedStyles from '../Styles';
 import I18n from '~/i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import SearchBox from '~/containers/SearchBox';
 import ActivityIndicator from '~/containers/ActivityIndicator';
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
@@ -21,12 +23,17 @@ import { goRoom as goRoomMethod, type TGoRoomItem } from '~/lib/methods/helpers/
 import { type IServerRoom, SubscriptionType } from '~/definitions';
 import styles from './styles';
 import Options from './Options';
+import DirectoryRow from './DirectoryRow';
 import { getRoomByTypeAndName } from '~/lib/services/restApi';
 import { createDirectMessage } from '~/lib/methods/createDirectMessage';
 import { getSubscriptionByRoomId } from '~/lib/database/services/Subscription';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import { useDirectorySearch } from './hooks/useDirectorySearch';
+import { hasNativeHeaderBar } from '~/lib/methods/helpers';
+import { headerIcon } from '~/lib/methods/helpers/navigation/headerIcon';
+import RowSeparator from '~/containers/NativeListRow/Separator';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
 
 interface IDirectoryViewProps {
 	navigation: CompositeNavigationProp<
@@ -37,6 +44,7 @@ interface IDirectoryViewProps {
 
 const DirectoryView = ({ navigation }: IDirectoryViewProps): ReactElement => {
 	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceRoom);
 	const { bottom } = useSafeAreaInsets();
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 
@@ -71,14 +79,66 @@ const DirectoryView = ({ navigation }: IDirectoryViewProps): ReactElement => {
 			});
 		};
 
-		const options: NativeStackNavigationOptions = {
-			title: I18n.t('Directory'),
-			headerRight: () => (
-				<HeaderButton.Container>
-					<HeaderButton.Item iconName='filter' onPress={showFilters} testID='directory-view-filter' />
-				</HeaderButton.Container>
-			)
-		};
+		const typeAction = (
+			itemType: string,
+			title: string,
+			icon: NativeStackHeaderItemMenuAction['icon']
+		): NativeStackHeaderItemMenuAction => ({
+			type: 'action',
+			label: I18n.t(title),
+			icon,
+			state: type === itemType ? 'on' : 'off',
+			onPress: () => changeType(itemType)
+		});
+
+		const options: NativeStackNavigationOptions = hasNativeHeaderBar
+			? {
+					title: I18n.t('Directory'),
+					headerRight: undefined,
+					headerTransparent: true,
+					headerSearchBarOptions: stackedSearchBarOptions({ onChangeText: onSearchChangeText, onSearch: search }),
+					unstable_headerRightItems: () => [
+						{
+							type: 'menu',
+							label: I18n.t('Filter'),
+							accessibilityLabel: I18n.t('Filter'),
+							icon: headerIcon('filter'),
+							menu: {
+								items: [
+									{
+										type: 'submenu',
+										label: I18n.t('Filter'),
+										inline: true,
+										items: [
+											typeAction('channels', 'Channels', { type: 'sfSymbol', name: 'number' }),
+											typeAction('users', 'Users', { type: 'sfSymbol', name: 'person' }),
+											typeAction('teams', 'Teams', { type: 'sfSymbol', name: 'person.3' })
+										]
+									},
+									...(isFederationEnabled
+										? [
+												{
+													type: 'action' as const,
+													label: I18n.t('Search_global_users'),
+													description: I18n.t('Search_global_users_description'),
+													state: globalUsers ? ('on' as const) : ('off' as const),
+													onPress: toggleWorkspace
+												}
+											]
+										: [])
+								]
+							}
+						}
+					]
+				}
+			: {
+					title: I18n.t('Directory'),
+					headerRight: () => (
+						<HeaderButton.Container>
+							<HeaderButton.Item iconName='filter' onPress={showFilters} testID='directory-view-filter' />
+						</HeaderButton.Container>
+					)
+				};
 		if (isMasterDetail) {
 			options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} testID='directory-view-close' />;
 		}
@@ -93,121 +153,80 @@ const DirectoryView = ({ navigation }: IDirectoryViewProps): ReactElement => {
 		changeType,
 		toggleWorkspace,
 		showActionSheet,
-		hideActionSheet
+		hideActionSheet,
+		onSearchChangeText,
+		search
 	]);
 
-	const goRoom = (item: TGoRoomItem) => {
-		goRoomMethod({ item, isMasterDetail });
-	};
-
-	const onPressItem = async (item: IServerRoom) => {
-		try {
-			if (type === 'users') {
-				const result = await createDirectMessage(item.username as string);
-				if (result.success) {
-					goRoom({ rid: result.room._id, name: item.username, t: SubscriptionType.DIRECT });
+	const onPressItem = useCallback(
+		async (item: IServerRoom) => {
+			const goRoom = (goRoomItem: TGoRoomItem) => {
+				goRoomMethod({ item: goRoomItem, isMasterDetail });
+			};
+			try {
+				if (type === 'users') {
+					const result = await createDirectMessage(item.username as string);
+					if (result.success) {
+						goRoom({ rid: result.room._id, name: item.username, t: SubscriptionType.DIRECT });
+					}
+					return;
 				}
-				return;
-			}
-			const subscription = await getSubscriptionByRoomId(item._id);
-			if (subscription) {
-				goRoom(subscription);
-				return;
-			}
-			if (['p', 'c'].includes(item.t) && !item.teamMain) {
-				const result = await getRoomByTypeAndName(item.t, item.name || item.fname);
-				if (result) {
+				const subscription = await getSubscriptionByRoomId(item._id);
+				if (subscription) {
+					goRoom(subscription);
+					return;
+				}
+				if (['p', 'c'].includes(item.t) && !item.teamMain) {
+					const result = await getRoomByTypeAndName(item.t, item.name || item.fname);
+					if (result) {
+						goRoom({
+							rid: item._id,
+							name: item.name,
+							joinCodeRequired: result.joinCodeRequired,
+							t: item.t as SubscriptionType,
+							search: true
+						});
+					}
+				} else {
 					goRoom({
 						rid: item._id,
 						name: item.name,
-						joinCodeRequired: result.joinCodeRequired,
 						t: item.t as SubscriptionType,
-						search: true
+						search: true,
+						teamMain: item.teamMain,
+						teamId: item.teamId
 					});
 				}
-			} else {
-				goRoom({
-					rid: item._id,
-					name: item.name,
-					t: item.t as SubscriptionType,
-					search: true,
-					teamMain: item.teamMain,
-					teamId: item.teamId
-				});
+			} catch {
+				// do nothing
 			}
-		} catch {
-			// do nothing
-		}
-	};
-
-	const renderItem: ListRenderItem<IServerRoom> = ({ item, index }) => {
-		let style;
-		if (index === data.length - 1) {
-			style = {
-				...sharedStyles.separatorBottom,
-				borderColor: colors.strokeLight
-			};
-		}
-
-		const commonProps = {
-			title: item.name as string,
-			onPress: () => onPressItem(item),
-			testID: `directory-view-item-${item.name}`,
-			style,
-			rid: item._id
-		};
-
-		if (type === 'users') {
-			return (
-				<DirectoryItem
-					avatar={item.username}
-					description={item.username}
-					rightLabel={item.federation && item.federation.peer}
-					type='d'
-					{...commonProps}
-				/>
-			);
-		}
+		},
+		[type, isMasterDetail]
+	);
 
-		if (type === 'teams') {
-			return (
-				<DirectoryItem
-					avatar={item.name}
-					description={item.name}
-					rightLabel={I18n.t('N_channels', { n: item.roomsCount })}
-					type={item.t}
-					teamMain={item.teamMain}
-					{...commonProps}
-				/>
-			);
-		}
-		return (
-			<DirectoryItem
-				avatar={item.name}
-				description={item.topic}
-				rightLabel={I18n.t('N_users', { n: item.usersCount })}
-				type={item.t}
-				{...commonProps}
-			/>
-		);
-	};
+	const renderItem: ListRenderItem<IServerRoom> = ({ item, index }) => (
+		<DirectoryRow item={item} type={type} isFirst={index === 0} isLast={index === data.length - 1} onPressItem={onPressItem} />
+	);
 
 	return (
-		<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='directory-view'>
-			<SearchBox onChangeText={onSearchChangeText} onSubmitEditing={search} testID='directory-view-search' />
-			<List.Separator />
+		<SafeAreaView style={{ backgroundColor: listBackgroundColor }} testID='directory-view'>
+			{hasNativeHeaderBar ? null : (
+				<SearchBox onChangeText={onSearchChangeText} onSubmitEditing={search} testID='directory-view-search' />
+			)}
 
-			<FlatList
+			<FlashList
 				data={data}
+				contentInsetAdjustmentBehavior={hasNativeHeaderBar ? 'automatic' : undefined}
 				style={styles.list}
 				contentContainerStyle={[styles.listContainer, { paddingBottom: bottom }]}
 				extraData={type}
 				keyExtractor={item => item._id}
 				renderItem={renderItem}
-				ItemSeparatorComponent={List.Separator}
+				ItemSeparatorComponent={RowSeparator}
 				keyboardShouldPersistTaps='always'
 				ListFooterComponent={loading ? <ActivityIndicator /> : null}
-				onEndReached={() => loadMore()}
+				onEndReached={loadMore}
+				onEndReachedThreshold={2}
 			/>
 		</SafeAreaView>
 	);
diff --git a/app/views/DirectoryView/styles.ts b/app/views/DirectoryView/styles.ts
index 32a11d852b5..0650a543726 100644
--- a/app/views/DirectoryView/styles.ts
+++ b/app/views/DirectoryView/styles.ts
@@ -10,6 +10,7 @@ export default StyleSheet.create({
 		flex: 1
 	},
 	listContainer: {
+		paddingTop: 16,
 		paddingBottom: 30
 	},
 	filterItemContainer: {
diff --git a/app/views/DiscussionsView/DiscussionDetails.tsx b/app/views/DiscussionsView/DiscussionDetails.tsx
index 0d982763fba..0ee2c0797bc 100644
--- a/app/views/DiscussionsView/DiscussionDetails.tsx
+++ b/app/views/DiscussionsView/DiscussionDetails.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { CustomIcon } from '~/containers/CustomIcon';
 import sharedStyles from '../Styles';
@@ -53,9 +54,9 @@ const DiscussionDetails = ({ item, date }: IDiscussionDetails): ReactElement =>
 
 				<View style={styles.detailContainer}>
 					<CustomIcon name={'clock'} size={24} color={colors.fontSecondaryInfo} />
-					<Text style={[styles.detailText, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
+					<PlainText style={[styles.detailText, { color: colors.fontSecondaryInfo }]} numberOfLines={1}>
 						{date}
-					</Text>
+					</PlainText>
 				</View>
 			</View>
 		</View>
diff --git a/app/views/DiscussionsView/Item.tsx b/app/views/DiscussionsView/Item.tsx
index 47a5effa486..ebb604321c9 100644
--- a/app/views/DiscussionsView/Item.tsx
+++ b/app/views/DiscussionsView/Item.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import dayjs from '~/lib/dayjs';
 import { useTheme } from '~/theme';
@@ -68,10 +69,10 @@ const Item = ({ item, onPress }: IItem): ReactElement => {
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
-						<Text style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
+						<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 							{username}
-						</Text>
-						{messageTime ? <Text style={[styles.time, { color: colors.fontSecondaryInfo }]}>{messageTime}</Text> : null}
+						</PlainText>
+						{messageTime ? <PlainText style={[styles.time, { color: colors.fontSecondaryInfo }]}>{messageTime}</PlainText> : null}
 					</View>
 					<View style={styles.messageContainer}>
 						{username ? <MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={styles.markdown} /> : null}
diff --git a/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap b/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
index 1dedcc55ec4..3cd8be25dce 100644
--- a/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
+++ b/app/views/DiscussionsView/__snapshots__/Item.test.tsx.snap
@@ -38,63 +38,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="discussions-view-Message content"
         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={{}}
+          testID="discussions-view-Message content"
         >
           <View
             style={
@@ -139,6 +142,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -156,6 +160,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -178,6 +184,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -201,6 +210,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -232,6 +244,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -371,6 +385,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -399,7 +416,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -436,63 +453,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            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={
-            {
-              "backgroundColor": "#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={{}}
+          testID="discussions-view-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         >
           <View
             style={
@@ -537,6 +557,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -554,6 +575,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -576,6 +599,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -599,6 +625,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -630,6 +659,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -769,6 +800,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -797,7 +831,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -834,63 +868,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="discussions-view-Message content"
         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={{}}
+          testID="discussions-view-Message content"
         >
           <View
             style={
@@ -935,6 +972,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -952,6 +990,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -974,6 +1014,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -997,6 +1040,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1028,6 +1074,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -1169,6 +1217,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -1197,7 +1248,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -1234,63 +1285,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="discussions-view-"
         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={{}}
+          testID="discussions-view-"
         >
           <View
             style={
@@ -1335,6 +1389,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -1352,6 +1407,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -1374,6 +1431,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -1397,6 +1457,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1428,6 +1491,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Attachment title"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -1567,6 +1632,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -1595,7 +1663,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -1632,63 +1700,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="discussions-view-Message content"
         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={{}}
+          testID="discussions-view-Message content"
         >
           <View
             style={
@@ -1733,6 +1804,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -1750,6 +1822,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -1772,6 +1846,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -1795,6 +1872,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1826,6 +1906,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -1965,6 +2047,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -1993,7 +2078,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -2050,63 +2135,66 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="discussions-view-Message content"
         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={{}}
+          testID="discussions-view-Message content"
         >
           <View
             style={
@@ -2151,6 +2239,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -2168,6 +2257,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -2190,6 +2281,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -2213,6 +2307,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2244,6 +2341,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -2383,6 +2482,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -2411,7 +2513,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <ExternalKeyboardView
       canBeFocused={true}
@@ -2435,63 +2537,66 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#2D3039"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            {
-              "backgroundColor": "#1F2329",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#1F2329",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="discussions-view-Message content"
         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={{}}
+          testID="discussions-view-Message content"
         >
           <View
             style={
@@ -2536,6 +2641,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -2553,6 +2659,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -2575,6 +2683,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -2598,6 +2709,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2629,6 +2743,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -2768,6 +2884,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -2796,7 +2915,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <ExternalKeyboardView
       canBeFocused={true}
@@ -2820,63 +2939,66 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#16181a"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            {
-              "backgroundColor": "#000000",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#000000",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="discussions-view-Message content"
         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={{}}
+          testID="discussions-view-Message content"
         >
           <View
             style={
@@ -2921,6 +3043,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -2938,6 +3061,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -2960,6 +3085,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -2983,6 +3111,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="10:00 AM"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3014,6 +3145,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -3153,6 +3286,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       
                     </Text>
                     <Text
+                      accessibilityLabel="November 10, 2020"
+                      accessibilityRole="text"
+                      accessible={true}
                       numberOfLines={1}
                       style={
                         [
@@ -3181,7 +3317,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
diff --git a/app/views/DiscussionsView/index.tsx b/app/views/DiscussionsView/index.tsx
index b13c0e23754..06f225182d7 100644
--- a/app/views/DiscussionsView/index.tsx
+++ b/app/views/DiscussionsView/index.tsx
@@ -3,14 +3,16 @@ import { FlatList, StyleSheet } from 'react-native';
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { type RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { type SearchBarCommands } from 'react-native-screens';
 
 import { textInputDebounceTime } from '~/lib/constants/debounceConfig';
 import { type IMessageFromServer, type TThreadModel } from '~/definitions';
 import { type ChatsStackParamList } from '~/stacks/types';
 import ActivityIndicator from '~/containers/ActivityIndicator';
 import I18n from '~/i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import log from '~/lib/methods/helpers/log';
-import { isIOS, useDebounce } from '~/lib/methods/helpers';
+import { hasNativeHeaderBar, isIOS, useDebounce } from '~/lib/methods/helpers';
 import SafeAreaView from '~/containers/SafeAreaView';
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import * as List from '~/containers/List';
@@ -49,6 +51,7 @@ const DiscussionsView = () => {
 	const total = useRef(0);
 	const searchText = useRef('');
 	const offset = useRef(0);
+	const searchBarRef = useRef<SearchBarCommands>(null);
 
 	const { colors } = useTheme();
 
@@ -95,6 +98,7 @@ const DiscussionsView = () => {
 		setSearch([]);
 		searchText.current = '';
 		offset.current = 0;
+		searchBarRef.current?.clearText();
 	};
 
 	const onSearchPress = () => {
@@ -103,6 +107,25 @@ const DiscussionsView = () => {
 
 	const setHeader = () => {
 		let options: Partial<NativeStackNavigationOptions>;
+
+		if (hasNativeHeaderBar) {
+			options = {
+				headerLeft: undefined,
+				headerTitle: I18n.t('Discussions'),
+				headerSearchBarOptions: stackedSearchBarOptions({
+					ref: searchBarRef,
+					onFocus: onSearchPress,
+					onChangeText: onSearchChangeText,
+					onCancel: onCancelSearchPress
+				}),
+				headerRight: () => null
+			};
+			if (isMasterDetail) {
+				options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
+			}
+			return options;
+		}
+
 		if (isSearching) {
 			options = {
 				headerLeft: () => (
diff --git a/app/views/DisplayPrefsView.tsx b/app/views/DisplayPrefsView.tsx
index 9ff29069fea..b4ab2bc552c 100644
--- a/app/views/DisplayPrefsView.tsx
+++ b/app/views/DisplayPrefsView.tsx
@@ -13,14 +13,12 @@ import Radio from '../containers/Radio';
 import { type IPreferences } from '../definitions';
 import I18n from '../i18n';
 import { type SettingsStackParamList } from '../stacks/types';
-import { useTheme } from '../theme';
 import { events, logEvent } from '../lib/methods/helpers/log';
 import { saveSortPreference } from '../lib/methods/userPreferencesMethods';
 import { useAppSelector } from '../lib/hooks/useAppSelector';
 
 const DisplayPrefsView = (): ReactElement => {
 	const navigation = useNavigation<NativeStackNavigationProp<SettingsStackParamList, 'DisplayPrefsView'>>();
-	const { colors } = useTheme();
 
 	const { sortBy, groupByType, showFavorites, showUnread, showAvatar, displayMode } = useAppSelector(
 		state => state.sortPreferences
@@ -78,8 +76,8 @@ const DisplayPrefsView = (): ReactElement => {
 		setSortPreference({ displayMode: DisplayMode.Condensed });
 	};
 
-	const renderCheckBox = (value: boolean) => (
-		<List.Icon name={value ? 'checkbox-checked' : 'checkbox-unchecked'} color={value ? colors.strokeHighlight : ''} />
+	const renderCheckBox = (value: boolean, onValueChange: () => void) => (
+		<List.Checkbox value={value} onValueChange={onValueChange} />
 	);
 
 	const renderAvatarSwitch = (value: boolean) => (
@@ -156,7 +154,7 @@ const DisplayPrefsView = (): ReactElement => {
 						testID='display-pref-view-unread'
 						left={() => <List.Icon name='flag' />}
 						onPress={toggleUnread}
-						right={() => renderCheckBox(showUnread)}
+						right={() => renderCheckBox(showUnread, toggleUnread)}
 						additionalAccessibilityLabel={showUnread}
 						accessibilityRole='checkbox'
 					/>
@@ -166,7 +164,7 @@ const DisplayPrefsView = (): ReactElement => {
 						testID='display-pref-view-favorites'
 						left={() => <List.Icon name='star' />}
 						onPress={toggleGroupByFavorites}
-						right={() => renderCheckBox(showFavorites)}
+						right={() => renderCheckBox(showFavorites, toggleGroupByFavorites)}
 						additionalAccessibilityLabel={showFavorites}
 						accessibilityRole='checkbox'
 					/>
@@ -176,7 +174,7 @@ const DisplayPrefsView = (): ReactElement => {
 						testID='display-pref-view-types'
 						left={() => <List.Icon name='group-by-type' />}
 						onPress={toggleGroupByType}
-						right={() => renderCheckBox(groupByType)}
+						right={() => renderCheckBox(groupByType, toggleGroupByType)}
 						additionalAccessibilityLabel={groupByType}
 						accessibilityRole='checkbox'
 					/>
diff --git a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
index ddd8a1d9742..568b936cbe8 100644
--- a/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
+++ b/app/views/E2EEncryptionSecurityView/ChangePassword.tsx
@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react';
-import { Text, type TextInput, View } from 'react-native';
+import { type TextInput, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import Clipboard from '@react-native-clipboard/clipboard';
 
 import { useTheme } from '~/theme';
@@ -87,10 +88,12 @@ const ChangePassword = () => {
 
 	return (
 		<View style={{ gap: 8 }}>
-			<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_change_password_title')}</Text>
-			<Text style={[styles.description, { color: colors.fontDefault }]}>
+			<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>
+				{I18n.t('E2E_encryption_change_password_title')}
+			</PlainText>
+			<PlainText style={[styles.description, { color: colors.fontDefault }]}>
 				{I18n.t('E2E_encryption_change_password_description')}
-			</Text>
+			</PlainText>
 			<FormTextInput
 				inputRef={newPasswordInputRef}
 				placeholder={I18n.t('New_Password')}
diff --git a/app/views/E2EEncryptionSecurityView/index.tsx b/app/views/E2EEncryptionSecurityView/index.tsx
index bbaf8699cd3..8216e196f2f 100644
--- a/app/views/E2EEncryptionSecurityView/index.tsx
+++ b/app/views/E2EEncryptionSecurityView/index.tsx
@@ -1,5 +1,6 @@
 import { useLayoutEffect } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
@@ -59,9 +60,11 @@ const E2EEncryptionSecurityView = () => {
 				<View style={styles.container}>
 					<ChangePassword />
 
-					<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_reset_title')}</Text>
+					<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('E2E_encryption_reset_title')}</PlainText>
 					<View style={styles.content}>
-						<Text style={[styles.description, { color: colors.fontDefault }]}>{I18n.t('Reset_E2EE_Password_Description')}</Text>
+						<PlainText style={[styles.description, { color: colors.fontDefault }]}>
+							{I18n.t('Reset_E2EE_Password_Description')}
+						</PlainText>
 						<Button
 							onPress={resetOwnKey}
 							title={I18n.t('E2E_encryption_reset_button')}
diff --git a/app/views/E2EEnterYourPasswordView.tsx b/app/views/E2EEnterYourPasswordView.tsx
index f30924601ec..62d207b2886 100644
--- a/app/views/E2EEnterYourPasswordView.tsx
+++ b/app/views/E2EEnterYourPasswordView.tsx
@@ -1,6 +1,7 @@
 import { useFocusEffect } from '@react-navigation/native';
 import { useCallback, useEffect, useLayoutEffect, useRef, type ReactElement } from 'react';
-import { ScrollView, StyleSheet, Text, AccessibilityInfo, View } from 'react-native';
+import { ScrollView, StyleSheet, AccessibilityInfo, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -128,7 +129,7 @@ const E2EEnterYourPasswordView = ({ navigation }: IE2EEnterYourPasswordView): Re
 				style={sharedStyles.container}
 				contentContainerStyle={{ ...sharedStyles.containerScrollView }}>
 				<SafeAreaView style={{ ...styles.content, backgroundColor: colors.surfaceRoom }} testID='e2e-enter-your-password-view'>
-					<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_E2EE_Password_description')}</Text>
+					<PlainText style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Enter_E2EE_Password_description')}</PlainText>
 
 					<ControlledFormTextInput
 						name='password'
diff --git a/app/views/E2ESaveYourPasswordView.tsx b/app/views/E2ESaveYourPasswordView.tsx
index d5ea90ce809..ded05ebb30e 100644
--- a/app/views/E2ESaveYourPasswordView.tsx
+++ b/app/views/E2ESaveYourPasswordView.tsx
@@ -1,6 +1,7 @@
 import Clipboard from '@react-native-clipboard/clipboard';
 import { useEffect, useLayoutEffect, useState } from 'react';
-import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { ScrollView, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { StackActions, useNavigation } from '@react-navigation/native';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -110,12 +111,14 @@ const E2ESaveYourPasswordView = () => {
 				contentContainerStyle={[sharedStyles.containerScrollView, { flexGrow: 1, paddingBottom: bottom }]}>
 				<View style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
 					<View style={{ flex: 1, gap: 64 }}>
-						<Text style={[styles.warning, { color: colors.fontDanger }]}>{I18n.t('Save_Your_Encryption_Password_warning')}</Text>
+						<PlainText style={[styles.warning, { color: colors.fontDanger }]}>
+							{I18n.t('Save_Your_Encryption_Password_warning')}
+						</PlainText>
 						<View style={styles.content}>
-							<Text style={[styles.passwordText, { color: colors.fontDefault }]}>{I18n.t('Your_password_is')}</Text>
-							<Text style={[styles.password, { color: colors.fontDefault, backgroundColor: colors.surfaceHover }]}>
+							<PlainText style={[styles.passwordText, { color: colors.fontDefault }]}>{I18n.t('Your_password_is')}</PlainText>
+							<PlainText style={[styles.password, { color: colors.fontDefault, backgroundColor: colors.surfaceHover }]}>
 								{password}
-							</Text>
+							</PlainText>
 							<Button
 								onPress={onCopy}
 								style={[styles.copyButton, { backgroundColor: colors.surfaceHover }]}
@@ -124,7 +127,9 @@ const E2ESaveYourPasswordView = () => {
 								fontSize={14}
 							/>
 						</View>
-						<Text style={[styles.info, { color: colors.fontDefault }]}>{I18n.t('Save_Your_Encryption_Password_info')}</Text>
+						<PlainText style={[styles.info, { color: colors.fontDefault }]}>
+							{I18n.t('Save_Your_Encryption_Password_info')}
+						</PlainText>
 					</View>
 					<View style={{ gap: 8, flex: 1, justifyContent: 'flex-end' }}>
 						<Button
diff --git a/app/views/ForgotPasswordView.tsx b/app/views/ForgotPasswordView.tsx
index 39158d03775..a594ab70fca 100644
--- a/app/views/ForgotPasswordView.tsx
+++ b/app/views/ForgotPasswordView.tsx
@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState, type ReactElement } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useNavigation, type StaticScreenProps } from '@react-navigation/native';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useForm } from 'react-hook-form';
@@ -69,12 +69,12 @@ const ForgotPasswordView = ({ route }: ForgotPasswordViewProps): ReactElement =>
 	return (
 		<FormContainer testID='forgot-password-view'>
 			<FormContainerInner>
-				<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.fontTitlesLabels, fontSize: 24 }]}>
+				<PlainText style={[sharedStyles.loginTitle, sharedStyles.textBold, { color: colors.fontTitlesLabels, fontSize: 24 }]}>
 					{I18n.t('Reset_password')}
-				</Text>
-				<Text style={[sharedStyles.textMedium, { color: colors.fontTitlesLabels, lineHeight: 22, fontSize: 16 }]}>
+				</PlainText>
+				<PlainText style={[sharedStyles.textMedium, { color: colors.fontTitlesLabels, lineHeight: 22, fontSize: 16 }]}>
 					{I18n.t('Email')}
-				</Text>
+				</PlainText>
 				<ControlledFormTextInput
 					name='email'
 					control={control}
diff --git a/app/views/ForwardMessageView/SelectPersonOrChannel.tsx b/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
index 9e9698c24e1..0ee38abeacb 100644
--- a/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
+++ b/app/views/ForwardMessageView/SelectPersonOrChannel.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState, type ReactElement } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
 import { getAvatarURL } from '~/lib/methods/helpers/getAvatarUrl';
@@ -56,7 +57,7 @@ const SelectPersonOrChannel = ({
 
 	return (
 		<View style={styles.inputContainer}>
-			<Text style={[styles.label, { color: colors.fontDefault }]}>{I18n.t('Person_or_channel')}</Text>
+			<PlainText style={[styles.label, { color: colors.fontDefault }]}>{I18n.t('Person_or_channel')}</PlainText>
 			<MultiSelect
 				onSearch={getRooms}
 				onChange={onRoomSelect}
diff --git a/app/views/JitsiMeetView/JitsiAuthModal.tsx b/app/views/JitsiMeetView/JitsiAuthModal.tsx
index b61293c58ee..80eca96edd7 100644
--- a/app/views/JitsiMeetView/JitsiAuthModal.tsx
+++ b/app/views/JitsiMeetView/JitsiAuthModal.tsx
@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import { type Dispatch, type SetStateAction, type ReactElement } from 'react';
-import { Linking, StyleSheet, Text, View } from 'react-native';
+import { Linking, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import Modal from 'react-native-modal';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -50,20 +51,22 @@ const JitsiAuthModal = ({
 	return (
 		<Modal isVisible>
 			<GestureHandlerRootView style={[styles.container, { backgroundColor: colors.surfaceRoom }]}>
-				<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{i18n.t('Jitsi_may_require_authentication')}</Text>
+				<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>
+					{i18n.t('Jitsi_may_require_authentication')}
+				</PlainText>
 				{isAdmin ? (
-					<Text style={[styles.regular, { color: colors.fontTitlesLabels }]}>
+					<PlainText style={[styles.regular, { color: colors.fontTitlesLabels }]}>
 						{i18n.t('Jitsi_authentication_before_making_calls_admin')}
-					</Text>
+					</PlainText>
 				) : (
-					<Text style={[styles.regular, { color: colors.fontTitlesLabels }]}>
+					<PlainText style={[styles.regular, { color: colors.fontTitlesLabels }]}>
 						{i18n.t('Jitsi_authentication_before_making_calls')}
-					</Text>
+					</PlainText>
 				)}
 				{!isAdmin ? (
-					<Text style={[styles.min, { color: colors.fontSecondaryInfo }]}>
+					<PlainText style={[styles.min, { color: colors.fontSecondaryInfo }]}>
 						{i18n.t('Jitsi_authentication_before_making_calls_ask_admin')}
-					</Text>
+					</PlainText>
 				) : null}
 				<View style={styles.buttonContainer}>
 					<Button title={i18n.t('Cancel')} type='secondary' onPress={() => setAuthModal(false)} />
diff --git a/app/views/LanguageView/index.tsx b/app/views/LanguageView/index.tsx
index 20f171eb830..8e9142a5796 100644
--- a/app/views/LanguageView/index.tsx
+++ b/app/views/LanguageView/index.tsx
@@ -1,7 +1,7 @@
 import { reloadAppAsync } from 'expo';
-import { useLayoutEffect } from 'react';
-import { FlatList } from 'react-native';
+import { Fragment, useLayoutEffect } from 'react';
 import { useDispatch } from 'react-redux';
+import { FlatList } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -17,6 +17,7 @@ import I18n, { isRTL, LANGUAGES } from '~/i18n';
 import database from '~/lib/database';
 import { getUserSelector } from '~/selectors/login';
 import { type SettingsStackParamList } from '~/stacks/types';
+import { isIOS } from '~/lib/methods/helpers';
 import { showErrorAlert } from '~/lib/methods/helpers/info';
 import log, { events, logEvent } from '~/lib/methods/helpers/log';
 import { saveUserPreferences } from '~/lib/services/restApi';
@@ -92,26 +93,38 @@ const LanguageView = () => {
 		}
 	};
 
+	const renderLanguage = (item: (typeof LANGUAGES)[number]) => (
+		<ListRadio
+			testID={`language-view-${item.value}`}
+			title={item.label}
+			value={item.value}
+			translateTitle={false}
+			isSelected={item.value === language}
+			onPress={() => submit(item.value)}
+		/>
+	);
+
 	return (
 		<SafeAreaView testID='language-view'>
-			<FlatList
-				data={LANGUAGES}
-				keyExtractor={item => item.value}
-				ListHeaderComponent={List.Separator}
-				ListFooterComponent={List.Separator}
-				contentContainerStyle={[List.styles.contentContainerStyleFlatList, { paddingBottom }]}
-				renderItem={({ item }) => (
-					<ListRadio
-						testID={`language-view-${item.value}`}
-						title={item.label}
-						value={item.value}
-						translateTitle={false}
-						isSelected={item.value === (language || languageDefault)}
-						onPress={() => submit(item.value)}
-					/>
-				)}
-				ItemSeparatorComponent={List.Separator}
-			/>
+			{isIOS ? (
+				<List.Container>
+					<List.Section>
+						{LANGUAGES.map(item => (
+							<Fragment key={item.value}>{renderLanguage(item)}</Fragment>
+						))}
+					</List.Section>
+				</List.Container>
+			) : (
+				<FlatList
+					data={LANGUAGES}
+					keyExtractor={item => item.value}
+					ListHeaderComponent={List.Separator}
+					ListFooterComponent={List.Separator}
+					contentContainerStyle={[List.styles.contentContainerStyleFlatList, { paddingBottom }]}
+					renderItem={({ item }) => renderLanguage(item)}
+					ItemSeparatorComponent={List.Separator}
+				/>
+			)}
 		</SafeAreaView>
 	);
 };
diff --git a/app/views/LivechatEditView.tsx b/app/views/LivechatEditView.tsx
index b841badf8d9..2118ae77df9 100644
--- a/app/views/LivechatEditView.tsx
+++ b/app/views/LivechatEditView.tsx
@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { type RouteProp } from '@react-navigation/native';
-import { ScrollView, StyleSheet, Text } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { connect } from 'react-redux';
 import { BlockContext } from '@rocket.chat/ui-kit';
 
@@ -60,7 +61,7 @@ interface ILivechatEditViewProps {
 }
 
 const Title = ({ title, theme }: ITitle) =>
-	title ? <Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{title}</Text> : null;
+	title ? <PlainText style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{title}</PlainText> : null;
 
 const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewProps) => {
 	const [customFields, setCustomFields] = useState<ICustomFields>({});
@@ -268,7 +269,7 @@ const LivechatEditView = ({ user, navigation, route, theme }: ILivechatEditViewP
 						editable={!!editLivechatRoomCustomFieldsPermission}
 					/>
 
-					<Text style={[styles.label, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Tags')}</Text>
+					<PlainText style={[styles.label, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('Tags')}</PlainText>
 					<MultiSelect
 						options={tagOptions}
 						onChange={({ value }: { value: string[] }) => {
diff --git a/app/views/LoginView/UserForm.tsx b/app/views/LoginView/UserForm.tsx
index 90eba5b34ce..d8996d8aca7 100644
--- a/app/views/LoginView/UserForm.tsx
+++ b/app/views/LoginView/UserForm.tsx
@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
-import { Keyboard, Text, View, Alert } from 'react-native';
+import { View, Alert, Keyboard } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { type RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -102,7 +103,7 @@ const UserForm = () => {
 
 	return (
 		<>
-			<Text style={[styles.title, sharedStyles.textBold, { color: colors.fontTitlesLabels }]}>{I18n.t('Login')}</Text>
+			<PlainText style={[styles.title, sharedStyles.textBold, { color: colors.fontTitlesLabels }]}>{I18n.t('Login')}</PlainText>
 			<View style={styles.credentialsContainer}>
 				<ControlledFormTextInput
 					name='user'
@@ -140,7 +141,9 @@ const UserForm = () => {
 			<View style={styles.bottomContainer}>
 				{Accounts_PasswordReset && (
 					<View style={styles.bottomContainerGroup}>
-						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Forgot_password')}</Text>
+						<PlainText style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
+							{I18n.t('Forgot_password')}
+						</PlainText>
 						<Button
 							title={I18n.t('Reset_password')}
 							type='secondary'
@@ -151,15 +154,15 @@ const UserForm = () => {
 				)}
 				{showRegistrationButton ? (
 					<View style={styles.bottomContainerGroup}>
-						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
+						<PlainText style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
 							{I18n.t('You_dont_have_account')}
-						</Text>
+						</PlainText>
 						<Button title={I18n.t('Create_account')} onPress={register} type='secondary' testID='login-view-register' />
 					</View>
 				) : (
-					<Text style={[styles.registerDisabled, { color: colors.fontSecondaryInfo }]}>
+					<PlainText style={[styles.registerDisabled, { color: colors.fontSecondaryInfo }]}>
 						{Accounts_RegistrationForm_LinkReplacementText}
-					</Text>
+					</PlainText>
 				)}
 				<UGCRules />
 			</View>
diff --git a/app/views/LoginView/index.tsx b/app/views/LoginView/index.tsx
index f56401804da..e447f987e1c 100644
--- a/app/views/LoginView/index.tsx
+++ b/app/views/LoginView/index.tsx
@@ -4,8 +4,8 @@ import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import FormContainer, { FormContainerInner } from '~/containers/FormContainer';
-import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import LoginServices from '~/containers/LoginServices';
+import { outsideHeaderRightLegal } from '~/lib/methods/helpers/navigation';
 import { type OutsideParamList } from '~/stacks/types';
 import UserForm from './UserForm';
 
@@ -25,7 +25,7 @@ const LoginView = ({ route }: LoginViewProps) => {
 	useLayoutEffect(() => {
 		navigation.setOptions({
 			title: title ?? 'Rocket.Chat',
-			headerRight: () => <HeaderButton.Legal testID='login-view-more' navigation={navigation} />
+			...outsideHeaderRightLegal(navigation, 'login-view-more')
 		});
 	}, [navigation, title]);
 
diff --git a/app/views/MediaAutoDownloadView/ListPicker.tsx b/app/views/MediaAutoDownloadView/ListPicker.tsx
index ccf3f4f41cd..6fe74ad3668 100644
--- a/app/views/MediaAutoDownloadView/ListPicker.tsx
+++ b/app/views/MediaAutoDownloadView/ListPicker.tsx
@@ -1,24 +1,18 @@
 import { Fragment, type ReactElement } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useActionSheet } from '~/containers/ActionSheet';
 import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
+import { useNativeListMode } from '~/containers/List/native/context';
+import NativeListPicker from '~/containers/List/native/Picker';
 import I18n from '~/i18n';
 import { useTheme } from '~/theme';
 import sharedStyles from '../Styles';
 import { type MediaDownloadOption } from '~/lib/constants/mediaAutoDownload';
 
 const styles = StyleSheet.create({
-	leftTitleContainer: {
-		flex: 1,
-		justifyContent: 'center',
-		alignItems: 'flex-start'
-	},
-	leftTitle: {
-		...sharedStyles.textMedium,
-		fontSize: 16,
-		lineHeight: 24
-	},
 	rightContainer: {
 		flex: 1
 	},
@@ -67,6 +61,7 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const nativeListMode = useNativeListMode();
 	const option = OPTIONS.find(option => option.value === value) || OPTIONS[2];
 
 	const getOptions = (): ReactElement => (
@@ -93,18 +88,27 @@ const ListPicker = ({
 	/* when picking an option the label should be Never but when showing among the other settings the label should be Off */
 	const label = option.label === 'Never' ? I18n.t('Off') : I18n.t(option.label);
 
+	if (nativeListMode === 'native') {
+		return (
+			<NativeListPicker
+				title={title}
+				testID={testID}
+				options={OPTIONS.map(i => ({ label: I18n.t(i.label), value: i.value, testID: `${testID}-${i.value}` }))}
+				selection={option.value}
+				onSelectionChange={selected => onChangeValue(selected as MediaDownloadOption)}
+			/>
+		);
+	}
+
 	return (
 		<List.Item
 			testID={testID}
 			onPress={() => showActionSheet({ children: getOptions() })}
-			title={() => (
-				<View style={styles.leftTitleContainer}>
-					<Text style={[styles.leftTitle, { color: colors.fontDefault }]}>{title}</Text>
-				</View>
-			)}
+			title={title}
+			translateTitle={false}
 			right={() => (
 				<View style={styles.rightTitleContainer}>
-					<Text style={[styles.rightTitle, { color: colors.fontHint }]}>{label}</Text>
+					<PlainText style={[styles.rightTitle, { color: colors.fontHint }]}>{label}</PlainText>
 				</View>
 			)}
 			rightContainerStyle={styles.rightContainer}
@@ -113,4 +117,4 @@ const ListPicker = ({
 	);
 };
 
-export default ListPicker;
+export default asNativeListRow(ListPicker);
diff --git a/app/views/MessagesView/index.tsx b/app/views/MessagesView/index.tsx
index 4444710265b..85cc46ce405 100644
--- a/app/views/MessagesView/index.tsx
+++ b/app/views/MessagesView/index.tsx
@@ -1,5 +1,6 @@
 import { Component } from 'react';
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -323,7 +324,7 @@ class MessagesView extends Component<IMessagesViewProps, IMessagesViewState> {
 		const { theme } = this.props;
 		return (
 			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]} testID={this.content.testID}>
-				<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{this.content.noDataMsg}</Text>
+				<PlainText style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{this.content.noDataMsg}</PlainText>
 			</View>
 		);
 	};
diff --git a/app/views/NewMessageView/ButtonCreate.ios.tsx b/app/views/NewMessageView/ButtonCreate.ios.tsx
new file mode 100644
index 00000000000..ac4ae361383
--- /dev/null
+++ b/app/views/NewMessageView/ButtonCreate.ios.tsx
@@ -0,0 +1,38 @@
+import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
+import NativeListRow from '~/containers/NativeListRow';
+import Disclosure from '~/containers/NativeListRow/Disclosure.ios';
+import { PlainSeparator } from '~/containers/NativeListRow/Separator';
+import I18n from '~/i18n';
+import { useTheme } from '~/theme';
+
+interface IButton {
+	onPress: () => void;
+	testID: string;
+	title: string;
+	icon: TIconsName;
+	isFirst?: boolean;
+	isLast?: boolean;
+}
+
+const ButtonCreate = ({ onPress, testID, title, icon, isFirst, isLast }: IButton) => {
+	const { colors } = useTheme();
+	const translatedTitle = I18n.t(title);
+
+	return (
+		<>
+			<NativeListRow
+				title={translatedTitle}
+				onPress={onPress}
+				testID={testID}
+				accessibilityLabel={translatedTitle}
+				isFirst={isFirst}
+				isLast={isLast}
+				leading={<CustomIcon name={icon} size={24} color={colors.fontDefault} />}
+				trailing={<Disclosure />}
+			/>
+			{isLast ? null : <PlainSeparator />}
+		</>
+	);
+};
+
+export default ButtonCreate;
diff --git a/app/views/NewMessageView/ButtonCreate.tsx b/app/views/NewMessageView/ButtonCreate.tsx
index e33d4ba54a4..671af7311f4 100644
--- a/app/views/NewMessageView/ButtonCreate.tsx
+++ b/app/views/NewMessageView/ButtonCreate.tsx
@@ -8,6 +8,8 @@ interface IButton {
 	testID: string;
 	title: string;
 	icon: TIconsName;
+	isFirst?: boolean;
+	isLast?: boolean;
 }
 
 const ButtonCreate = ({ onPress, testID, title, icon }: IButton) => {
diff --git a/app/views/NewMessageView/HeaderNewMessage.tsx b/app/views/NewMessageView/HeaderNewMessage.tsx
index f5dca89ffef..da4350d9574 100644
--- a/app/views/NewMessageView/HeaderNewMessage.tsx
+++ b/app/views/NewMessageView/HeaderNewMessage.tsx
@@ -5,8 +5,8 @@ import { useDispatch } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 
 import { createChannelRequest } from '~/actions/createChannel';
-import { themes } from '~/lib/constants/colors';
 import SearchBox from '~/containers/SearchBox';
+import { type TIconsName } from '~/containers/CustomIcon';
 import I18n from '~/i18n';
 import Navigation from '~/lib/navigation/appNavigation';
 import { useTheme } from '~/theme';
@@ -15,6 +15,7 @@ import { type NewMessageStackParamList } from '~/stacks/types';
 import { compareServerVersion } from '~/lib/methods/helpers';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { usePermissions } from '~/lib/hooks/usePermissions';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
 import ButtonCreate from './ButtonCreate';
 
 const styles = StyleSheet.create({
@@ -23,10 +24,19 @@ const styles = StyleSheet.create({
 	}
 });
 
+interface IButtonConfig {
+	visible: boolean;
+	onPress: () => void;
+	title: string;
+	icon: TIconsName;
+	testID: string;
+}
+
 const HeaderNewMessage = ({ maxUsers, onChangeText }: { maxUsers: number; onChangeText: (text: string) => void }) => {
 	const navigation = useNavigation<NativeStackNavigationProp<NewMessageStackParamList, 'NewMessageView'>>();
 	const dispatch = useDispatch();
-	const { theme } = useTheme();
+	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceTint);
 
 	const serverVersion = useAppSelector(state => state.server.version as string);
 
@@ -68,39 +78,52 @@ const HeaderNewMessage = ({ maxUsers, onChangeText }: { maxUsers: number; onChan
 		});
 	}, [navigation]);
 
+	const buttons = [
+		{
+			visible: createPublicChannelPermission || createPrivateChannelPermission,
+			onPress: createChannel,
+			title: 'Channel',
+			icon: 'channel-public',
+			testID: 'new-message-view-create-channel'
+		},
+		{
+			visible: compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.13.0') && createTeamPermission,
+			onPress: createTeam,
+			title: 'Team',
+			icon: 'teams',
+			testID: 'new-message-view-create-team'
+		},
+		{
+			visible: maxUsers > 2 && createDirectMessagePermission,
+			onPress: createGroupChat,
+			title: 'Direct_message',
+			icon: 'message',
+			testID: 'new-message-view-create-direct-message'
+		},
+		{
+			visible: createDiscussionPermission,
+			onPress: createDiscussion,
+			title: 'Discussion',
+			icon: 'discussions',
+			testID: 'new-message-view-create-discussion'
+		}
+	].filter((button): button is IButtonConfig => Boolean(button.visible));
+
 	return (
-		<>
-			<View style={[styles.container, { backgroundColor: themes[theme].surfaceTint }]}>
-				{createPublicChannelPermission || createPrivateChannelPermission ? (
-					<ButtonCreate
-						onPress={createChannel}
-						title={'Channel'}
-						icon={'channel-public'}
-						testID={'new-message-view-create-channel'}
-					/>
-				) : null}
-				{compareServerVersion(serverVersion, 'greaterThanOrEqualTo', '3.13.0') && createTeamPermission ? (
-					<ButtonCreate onPress={createTeam} title={'Team'} icon={'teams'} testID={'new-message-view-create-team'} />
-				) : null}
-				{maxUsers > 2 && createDirectMessagePermission ? (
-					<ButtonCreate
-						onPress={createGroupChat}
-						title={'Direct_message'}
-						icon={'message'}
-						testID={'new-message-view-create-direct-message'}
-					/>
-				) : null}
-				{createDiscussionPermission ? (
-					<ButtonCreate
-						onPress={createDiscussion}
-						title={'Discussion'}
-						icon={'discussions'}
-						testID={'new-message-view-create-discussion'}
-					/>
-				) : null}
-				<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='new-message-view-search' />
-			</View>
-		</>
+		<View style={[styles.container, { backgroundColor: listBackgroundColor }]}>
+			{buttons.map((button, index) => (
+				<ButtonCreate
+					key={button.testID}
+					onPress={button.onPress}
+					title={button.title}
+					icon={button.icon}
+					testID={button.testID}
+					isFirst={index === 0}
+					isLast={index === buttons.length - 1}
+				/>
+			))}
+			<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='new-message-view-search' />
+		</View>
 	);
 };
 
diff --git a/app/views/NewMessageView/Item.ios.tsx b/app/views/NewMessageView/Item.ios.tsx
new file mode 100644
index 00000000000..c62d888563a
--- /dev/null
+++ b/app/views/NewMessageView/Item.ios.tsx
@@ -0,0 +1,52 @@
+import Avatar from '~/containers/Avatar';
+import NativeListRow from '~/containers/NativeListRow';
+import { AVATAR_SIZE } from '~/containers/NativeListRow/constants';
+import I18n from '~/i18n';
+import { useMediaCallPermission } from '~/lib/hooks/useMediaCallPermission';
+import { useIsInActiveVoipCall } from '~/lib/services/voip/isInActiveVoipCall';
+import { isSelfUserId } from '~/lib/services/voip/isSelfUserId';
+import { useStartMediaCall } from './useStartMediaCall';
+
+interface IItem {
+	userId: string;
+	name: string;
+	username: string;
+	onPress(): void;
+	testID: string;
+	onLongPress?: () => void;
+	isFirst?: boolean;
+	isLast?: boolean;
+}
+
+const Item = ({ userId, name, username, onPress, testID, onLongPress, isFirst, isLast }: IItem) => {
+	const hasMediaCallPermission = useMediaCallPermission();
+	const isInActiveCall = useIsInActiveVoipCall();
+	const isSelf = isSelfUserId(userId);
+	const startMediaCall = useStartMediaCall({ userId, name, username });
+
+	return (
+		<NativeListRow
+			title={name}
+			onPress={onPress}
+			onLongPress={onLongPress}
+			testID={testID}
+			accessibilityLabel={name}
+			isFirst={isFirst}
+			isLast={isLast}
+			leading={<Avatar text={username} size={AVATAR_SIZE} />}
+			trailingAction={
+				hasMediaCallPermission && !isSelf
+					? {
+							icon: 'phone',
+							onPress: startMediaCall,
+							testID: `${testID}-call`,
+							accessibilityLabel: I18n.t('Voice_call'),
+							disabled: isInActiveCall
+						}
+					: undefined
+			}
+		/>
+	);
+};
+
+export default Item;
diff --git a/app/views/NewMessageView/Item.test.tsx b/app/views/NewMessageView/Item.test.tsx
index 53d9dcf836c..87ca0096029 100644
--- a/app/views/NewMessageView/Item.test.tsx
+++ b/app/views/NewMessageView/Item.test.tsx
@@ -145,12 +145,12 @@ describe('NewMessageView Item', () => {
 	});
 
 	it('should have correct accessibility label', () => {
-		const { getByLabelText } = render(
+		const { getByTestId } = render(
 			<Wrapper>
 				<Item userId='user123' name='John Doe' username='john.doe' onPress={() => {}} testID='new-message-view-item-john.doe' />
 			</Wrapper>
 		);
-		expect(getByLabelText('John Doe')).toBeTruthy();
+		expect(getByTestId('new-message-view-item-john.doe')).toHaveAccessibleName('John Doe');
 	});
 
 	it('should match snapshot when hasMediaCallPermission is false', () => {
diff --git a/app/views/NewMessageView/Item.tsx b/app/views/NewMessageView/Item.tsx
index 032e31a9af6..a93674e2c47 100644
--- a/app/views/NewMessageView/Item.tsx
+++ b/app/views/NewMessageView/Item.tsx
@@ -1,17 +1,16 @@
-import { StyleSheet, Text, View } from 'react-native';
-import { BorderlessButton, RectButton } from 'react-native-gesture-handler';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
+import { BorderlessButton, RectButton } from '~/containers/GestureButtons';
 import Avatar from '~/containers/Avatar';
 import { CustomIcon } from '~/containers/CustomIcon';
 import sharedStyles from '../Styles';
 import { useTheme } from '~/theme';
 import I18n from '~/i18n';
 import { useMediaCallPermission } from '~/lib/hooks/useMediaCallPermission';
-import { usePeerAutocompleteStore } from '~/lib/services/voip/usePeerAutocompleteStore';
 import { useIsInActiveVoipCall } from '~/lib/services/voip/isInActiveVoipCall';
 import { isSelfUserId } from '~/lib/services/voip/isSelfUserId';
-import { showActionSheetRef } from '~/containers/ActionSheet';
-import { NewMediaCall } from '~/containers/NewMediaCall';
+import { useStartMediaCall } from './useStartMediaCall';
 
 interface IItem {
 	userId: string;
@@ -20,6 +19,8 @@ interface IItem {
 	onPress(): void;
 	testID: string;
 	onLongPress?: () => void;
+	isFirst?: boolean;
+	isLast?: boolean;
 }
 
 const Item = ({ userId, name, username, onPress, testID, onLongPress }: IItem) => {
@@ -28,17 +29,7 @@ const Item = ({ userId, name, username, onPress, testID, onLongPress }: IItem) =
 	const isInActiveCall = useIsInActiveVoipCall();
 	const isSelf = isSelfUserId(userId);
 
-	const handleCallPress = () => {
-		if (!userId || isInActiveCall || isSelf) return;
-		usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: userId, label: name, username });
-		showActionSheetRef({
-			children: <NewMediaCall />,
-			portraitSnaps: ['60%'],
-			landscapeSnaps: ['90%'],
-			enableContentPanningGesture: false,
-			fullContainer: true
-		});
-	};
+	const handleCallPress = useStartMediaCall({ userId, name, username });
 
 	return (
 		<RectButton
@@ -53,14 +44,14 @@ const Item = ({ userId, name, username, onPress, testID, onLongPress }: IItem) =
 			<View style={[styles.container, styles.button]}>
 				<Avatar text={username} size={30} style={styles.avatar} />
 				<View style={styles.textContainer}>
-					<Text style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
+					<PlainText style={[styles.name, { color: colors.fontDefault }]} numberOfLines={1}>
 						{name}
-					</Text>
+					</PlainText>
 				</View>
 				{hasMediaCallPermission && !isSelf ? (
 					<BorderlessButton
 						onPress={handleCallPress}
-						enabled={!isInActiveCall}
+						disabled={isInActiveCall}
 						testID={`${testID}-call`}
 						rippleColor={colors.surfaceSelected}
 						style={styles.iconContainer}
diff --git a/app/views/NewMessageView/__snapshots__/Item.test.tsx.snap b/app/views/NewMessageView/__snapshots__/Item.test.tsx.snap
index 530b9e1be5f..1bca23cc902 100644
--- a/app/views/NewMessageView/__snapshots__/Item.test.tsx.snap
+++ b/app/views/NewMessageView/__snapshots__/Item.test.tsx.snap
@@ -1,63 +1,74 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`NewMessageView Item should match snapshot when hasMediaCallPermission is false 1`] = `
-<RNGestureHandlerButton
-  accessibilityLabel="John Doe"
-  accessibilityRole="button"
-  activeOpacity={0.105}
-  collapsable={false}
-  delayLongPress={600}
-  handlerTag={-1}
-  handlerType="NativeViewGestureHandler"
-  innerRef={null}
-  onActiveStateChange={[Function]}
-  onGestureHandlerEvent={[Function]}
-  onGestureHandlerStateChange={[Function]}
-  onPress={[Function]}
-  rippleColor="#D7DBE0"
+<View
   style={
     [
       {
-        "backgroundColor": "#FFFFFF",
+        "marginHorizontal": 16,
+        "overflow": "hidden",
       },
       {
-        "cursor": undefined,
+        "alignItems": "center",
+        "flexDirection": "row",
+        "gap": 12,
+        "paddingHorizontal": 16,
+      },
+      {
+        "backgroundColor": "#FFFFFF",
+        "height": 54,
       },
+      undefined,
+      undefined,
     ]
   }
-  testID="new-message-view-item-john.doe"
-  underlayColor="#D7DBE0"
 >
   <View
-    collapsable={false}
-    style={
+    accessibilityLabel="John Doe"
+    accessibilityRole="button"
+    accessibilityState={
       {
-        "backgroundColor": "#D7DBE0",
-        "borderBottomLeftRadius": undefined,
-        "borderBottomRightRadius": undefined,
-        "borderRadius": undefined,
-        "borderTopLeftRadius": undefined,
-        "borderTopRightRadius": undefined,
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
+        "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={
       [
         {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "flex": 1,
           "flexDirection": "row",
+          "gap": 12,
         },
-        {
-          "height": 54,
-        },
+        false,
+        undefined,
       ]
     }
+    testID="new-message-view-item-john.doe"
   >
     <View
       accessibilityLabel="john.doe's avatar"
@@ -69,10 +80,7 @@ exports[`NewMessageView Item should match snapshot when hasMediaCallPermission i
             "height": 30,
             "width": 30,
           },
-          {
-            "marginHorizontal": 12,
-            "marginVertical": 12,
-          },
+          undefined,
         ]
       }
       testID="avatar"
@@ -95,6 +103,7 @@ exports[`NewMessageView Item should match snapshot when hasMediaCallPermission i
         onProgress={[Function]}
         placeholder={[]}
         priority="high"
+        sfEffect={null}
         source={
           [
             {
@@ -112,6 +121,8 @@ exports[`NewMessageView Item should match snapshot when hasMediaCallPermission i
             "width": 30,
           }
         }
+        symbolSize={null}
+        symbolWeight={null}
         transition={null}
         width={30}
       />
@@ -120,38 +131,40 @@ exports[`NewMessageView Item should match snapshot when hasMediaCallPermission i
       style={
         {
           "flex": 1,
-          "flexDirection": "column",
-          "justifyContent": "center",
-          "marginRight": 12,
+          "marginRight": 20,
         }
       }
     >
-      <Text
-        numberOfLines={1}
+      <View
         style={
-          [
-            {
-              "backgroundColor": "transparent",
-              "fontFamily": "Inter",
-              "fontSize": 18,
-              "fontVariant": [
-                "tabular-nums",
-              ],
-              "fontWeight": "500",
-              "lineHeight": 26,
-              "textAlign": "left",
-            },
-            {
-              "color": "#2F343D",
-            },
-          ]
+          {
+            "alignItems": "center",
+            "flexDirection": "row",
+            "gap": 4,
+          }
         }
       >
-        John Doe
-      </Text>
+        <Text
+          numberOfLines={1}
+          style={
+            [
+              {
+                "flexShrink": 1,
+                "fontSize": 17,
+                "fontWeight": "500",
+              },
+              {
+                "color": "#2F343D",
+              },
+            ]
+          }
+        >
+          John Doe
+        </Text>
+      </View>
     </View>
   </View>
-</RNGestureHandlerButton>
+</View>
 `;
 
 exports[`Story Snapshots: Default should match snapshot 1`] = `
@@ -164,64 +177,74 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
     }
   }
 >
-  <RNGestureHandlerButton
-    accessibilityLabel="John Doe"
-    accessibilityRole="button"
-    activeOpacity={0.105}
-    collapsable={false}
-    delayLongPress={600}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onLongPress={[Function]}
-    onPress={[Function]}
-    rippleColor="#D7DBE0"
+  <View
     style={
       [
         {
-          "backgroundColor": "#FFFFFF",
+          "marginHorizontal": 16,
+          "overflow": "hidden",
         },
         {
-          "cursor": undefined,
+          "alignItems": "center",
+          "flexDirection": "row",
+          "gap": 12,
+          "paddingHorizontal": 16,
         },
+        {
+          "backgroundColor": "#FFFFFF",
+          "height": 54,
+        },
+        undefined,
+        undefined,
       ]
     }
-    testID="new-message-view-item-john.doe"
-    underlayColor="#D7DBE0"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityLabel="John Doe"
+      accessibilityRole="button"
+      accessibilityState={
         {
-          "backgroundColor": "#D7DBE0",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": undefined,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
+          "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={
         [
           {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flex": 1,
             "flexDirection": "row",
+            "gap": 12,
           },
-          {
-            "height": 54,
-          },
+          false,
+          undefined,
         ]
       }
+      testID="new-message-view-item-john.doe"
     >
       <View
         accessibilityLabel="john.doe's avatar"
@@ -233,10 +256,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               "height": 30,
               "width": 30,
             },
-            {
-              "marginHorizontal": 12,
-              "marginVertical": 12,
-            },
+            undefined,
           ]
         }
         testID="avatar"
@@ -259,6 +279,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -276,6 +297,8 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
               "width": 30,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={30}
         />
@@ -284,100 +307,102 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
         style={
           {
             "flex": 1,
-            "flexDirection": "column",
-            "justifyContent": "center",
-            "marginRight": 12,
+            "marginRight": 20,
           }
         }
       >
-        <Text
-          numberOfLines={1}
+        <View
           style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 4,
+            }
           }
         >
-          John Doe
-        </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "flexShrink": 1,
+                  "fontSize": 17,
+                  "fontWeight": "500",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            John Doe
+          </Text>
+        </View>
       </View>
-      <RNGestureHandlerButton
-        accessibilityLabel="Voice call"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "disabled": false,
-          }
+    </View>
+    <View
+      accessibilityLabel="Voice call"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
-        activeOpacity={0.3}
-        borderless={true}
-        collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#D7DBE0"
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={12}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      testID="new-message-view-item-john.doe-call"
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
         style={
           [
             {
-              "alignSelf": "center",
-              "opacity": 1,
-              "paddingHorizontal": 15,
+              "color": "#2F343D",
+              "fontSize": 20,
             },
+            [
+              {
+                "lineHeight": 20,
+              },
+              undefined,
+            ],
             {
-              "cursor": undefined,
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
             },
+            {},
           ]
         }
-        testID="new-message-view-item-john.doe-call"
       >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#2F343D",
-                "fontSize": 22,
-              },
-              [
-                {
-                  "lineHeight": 22,
-                },
-                undefined,
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-      </RNGestureHandlerButton>
+        
+      </Text>
     </View>
-  </RNGestureHandlerButton>
+  </View>
 </View>
 `;
 
@@ -391,63 +416,74 @@ exports[`Story Snapshots: LongName should match snapshot 1`] = `
     }
   }
 >
-  <RNGestureHandlerButton
-    accessibilityLabel="Very Long Display Name That Might Get Truncated"
-    accessibilityRole="button"
-    activeOpacity={0.105}
-    collapsable={false}
-    delayLongPress={600}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
-    rippleColor="#D7DBE0"
+  <View
     style={
       [
         {
-          "backgroundColor": "#FFFFFF",
+          "marginHorizontal": 16,
+          "overflow": "hidden",
         },
         {
-          "cursor": undefined,
+          "alignItems": "center",
+          "flexDirection": "row",
+          "gap": 12,
+          "paddingHorizontal": 16,
+        },
+        {
+          "backgroundColor": "#FFFFFF",
+          "height": 54,
         },
+        undefined,
+        undefined,
       ]
     }
-    testID="new-message-view-item-long.name"
-    underlayColor="#D7DBE0"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityLabel="Very Long Display Name That Might Get Truncated"
+      accessibilityRole="button"
+      accessibilityState={
         {
-          "backgroundColor": "#D7DBE0",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": undefined,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
+          "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={
         [
           {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flex": 1,
             "flexDirection": "row",
+            "gap": 12,
           },
-          {
-            "height": 54,
-          },
+          false,
+          undefined,
         ]
       }
+      testID="new-message-view-item-long.name"
     >
       <View
         accessibilityLabel="long.name's avatar"
@@ -459,10 +495,7 @@ exports[`Story Snapshots: LongName should match snapshot 1`] = `
               "height": 30,
               "width": 30,
             },
-            {
-              "marginHorizontal": 12,
-              "marginVertical": 12,
-            },
+            undefined,
           ]
         }
         testID="avatar"
@@ -485,6 +518,7 @@ exports[`Story Snapshots: LongName should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -502,6 +536,8 @@ exports[`Story Snapshots: LongName should match snapshot 1`] = `
               "width": 30,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={30}
         />
@@ -510,100 +546,102 @@ exports[`Story Snapshots: LongName should match snapshot 1`] = `
         style={
           {
             "flex": 1,
-            "flexDirection": "column",
-            "justifyContent": "center",
-            "marginRight": 12,
+            "marginRight": 20,
           }
         }
       >
-        <Text
-          numberOfLines={1}
+        <View
           style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 4,
+            }
           }
         >
-          Very Long Display Name That Might Get Truncated
-        </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "flexShrink": 1,
+                  "fontSize": 17,
+                  "fontWeight": "500",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            Very Long Display Name That Might Get Truncated
+          </Text>
+        </View>
       </View>
-      <RNGestureHandlerButton
-        accessibilityLabel="Voice call"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "disabled": false,
-          }
+    </View>
+    <View
+      accessibilityLabel="Voice call"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
         }
-        activeOpacity={0.3}
-        borderless={true}
-        collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#D7DBE0"
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={12}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      testID="new-message-view-item-long.name-call"
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
         style={
           [
             {
-              "alignSelf": "center",
-              "opacity": 1,
-              "paddingHorizontal": 15,
+              "color": "#2F343D",
+              "fontSize": 20,
             },
+            [
+              {
+                "lineHeight": 20,
+              },
+              undefined,
+            ],
             {
-              "cursor": undefined,
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
             },
+            {},
           ]
         }
-        testID="new-message-view-item-long.name-call"
       >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#2F343D",
-                "fontSize": 22,
-              },
-              [
-                {
-                  "lineHeight": 22,
-                },
-                undefined,
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-      </RNGestureHandlerButton>
+        
+      </Text>
     </View>
-  </RNGestureHandlerButton>
+  </View>
 </View>
 `;
 
@@ -617,63 +655,74 @@ exports[`Story Snapshots: NoVoiceCallPermission should match snapshot 1`] = `
     }
   }
 >
-  <RNGestureHandlerButton
-    accessibilityLabel="John Doe"
-    accessibilityRole="button"
-    activeOpacity={0.105}
-    collapsable={false}
-    delayLongPress={600}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
-    rippleColor="#D7DBE0"
+  <View
     style={
       [
         {
-          "backgroundColor": "#FFFFFF",
+          "marginHorizontal": 16,
+          "overflow": "hidden",
         },
         {
-          "cursor": undefined,
+          "alignItems": "center",
+          "flexDirection": "row",
+          "gap": 12,
+          "paddingHorizontal": 16,
         },
+        {
+          "backgroundColor": "#FFFFFF",
+          "height": 54,
+        },
+        undefined,
+        undefined,
       ]
     }
-    testID="new-message-view-item-john.doe"
-    underlayColor="#D7DBE0"
   >
     <View
-      collapsable={false}
-      style={
+      accessibilityLabel="John Doe"
+      accessibilityRole="button"
+      accessibilityState={
         {
-          "backgroundColor": "#D7DBE0",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": undefined,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
+          "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={
         [
           {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "flex": 1,
             "flexDirection": "row",
+            "gap": 12,
           },
-          {
-            "height": 54,
-          },
+          false,
+          undefined,
         ]
       }
+      testID="new-message-view-item-john.doe"
     >
       <View
         accessibilityLabel="john.doe's avatar"
@@ -685,10 +734,7 @@ exports[`Story Snapshots: NoVoiceCallPermission should match snapshot 1`] = `
               "height": 30,
               "width": 30,
             },
-            {
-              "marginHorizontal": 12,
-              "marginVertical": 12,
-            },
+            undefined,
           ]
         }
         testID="avatar"
@@ -711,6 +757,7 @@ exports[`Story Snapshots: NoVoiceCallPermission should match snapshot 1`] = `
           onProgress={[Function]}
           placeholder={[]}
           priority="high"
+          sfEffect={null}
           source={
             [
               {
@@ -728,6 +775,8 @@ exports[`Story Snapshots: NoVoiceCallPermission should match snapshot 1`] = `
               "width": 30,
             }
           }
+          symbolSize={null}
+          symbolWeight={null}
           transition={null}
           width={30}
         />
@@ -736,99 +785,101 @@ exports[`Story Snapshots: NoVoiceCallPermission should match snapshot 1`] = `
         style={
           {
             "flex": 1,
-            "flexDirection": "column",
-            "justifyContent": "center",
-            "marginRight": 12,
+            "marginRight": 20,
           }
         }
       >
-        <Text
-          numberOfLines={1}
+        <View
           style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontFamily": "Inter",
-                "fontSize": 18,
-                "fontVariant": [
-                  "tabular-nums",
-                ],
-                "fontWeight": "500",
-                "lineHeight": 26,
-                "textAlign": "left",
-              },
-              {
-                "color": "#2F343D",
-              },
-            ]
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "gap": 4,
+            }
           }
         >
-          John Doe
-        </Text>
+          <Text
+            numberOfLines={1}
+            style={
+              [
+                {
+                  "flexShrink": 1,
+                  "fontSize": 17,
+                  "fontWeight": "500",
+                },
+                {
+                  "color": "#2F343D",
+                },
+              ]
+            }
+          >
+            John Doe
+          </Text>
+        </View>
       </View>
-      <RNGestureHandlerButton
-        accessibilityLabel="Voice call"
-        accessibilityRole="button"
-        accessibilityState={
-          {
-            "disabled": false,
-          }
+    </View>
+    <View
+      accessibilityLabel="Voice call"
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
         }
-        activeOpacity={0.3}
-        borderless={true}
-        collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#D7DBE0"
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      hitSlop={12}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      testID="new-message-view-item-john.doe-call"
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
         style={
           [
             {
-              "alignSelf": "center",
-              "opacity": 1,
-              "paddingHorizontal": 15,
+              "color": "#2F343D",
+              "fontSize": 20,
             },
+            [
+              {
+                "lineHeight": 20,
+              },
+              undefined,
+            ],
             {
-              "cursor": undefined,
+              "fontFamily": "custom",
+              "fontStyle": "normal",
+              "fontWeight": "normal",
             },
+            {},
           ]
         }
-        testID="new-message-view-item-john.doe-call"
       >
-        <Text
-          allowFontScaling={false}
-          selectable={false}
-          style={
-            [
-              {
-                "color": "#2F343D",
-                "fontSize": 22,
-              },
-              [
-                {
-                  "lineHeight": 22,
-                },
-                undefined,
-              ],
-              {
-                "fontFamily": "custom",
-                "fontStyle": "normal",
-                "fontWeight": "normal",
-              },
-              {},
-            ]
-          }
-        >
-          
-        </Text>
-      </RNGestureHandlerButton>
+        
+      </Text>
     </View>
-  </RNGestureHandlerButton>
+  </View>
 </View>
 `;
diff --git a/app/views/NewMessageView/index.tsx b/app/views/NewMessageView/index.tsx
index a61e7b7f280..c726096e86e 100644
--- a/app/views/NewMessageView/index.tsx
+++ b/app/views/NewMessageView/index.tsx
@@ -20,6 +20,8 @@ import { type NewMessageStackParamList } from '~/stacks/types';
 import { search as runSearch } from '~/lib/methods/search';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+import RowSeparator from '~/containers/NativeListRow/Separator';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
 import Item from './Item';
 import HeaderNewMessage from './HeaderNewMessage';
 import { getUidDirectMessage } from '~/lib/methods/helpers/helpers';
@@ -37,6 +39,7 @@ const NewMessageView = () => {
 	const searchId = useRef(0);
 
 	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceTint);
 
 	const navigation = useNavigation<NativeStackNavigationProp<NewMessageStackParamList, 'NewMessageView'>>();
 	const { bottom } = useSafeAreaInsets();
@@ -110,13 +113,15 @@ const NewMessageView = () => {
 		[isMasterDetail, navigation]
 	);
 
+	const data = search.length > 0 ? search : chats;
+
 	return (
 		<SafeAreaView testID='new-message-view'>
 			<FlatList
-				data={search.length > 0 ? search : chats}
+				data={data}
 				keyExtractor={item => item._id || item.rid}
 				ListHeaderComponent={<HeaderNewMessage maxUsers={maxUsers} onChangeText={handleSearch} />}
-				renderItem={({ item }) => {
+				renderItem={({ item, index }) => {
 					const itemSearch = item as ISearch;
 					const itemModel = item as TSubscriptionModel;
 					const userId = itemSearch.search ? itemSearch._id : getUidDirectMessage(itemModel);
@@ -128,12 +133,14 @@ const NewMessageView = () => {
 							username={itemSearch.search ? itemSearch.username : itemModel.name}
 							onPress={() => goRoom(itemModel)}
 							testID={`new-message-view-item-${item.name}`}
+							isFirst={index === 0}
+							isLast={index === data.length - 1}
 						/>
 					);
 				}}
-				ItemSeparatorComponent={List.Separator}
+				ItemSeparatorComponent={RowSeparator}
 				ListFooterComponent={searching ? () => <ActivityIndicator /> : List.Separator}
-				style={{ backgroundColor: colors.surfaceTint }}
+				style={{ backgroundColor: listBackgroundColor }}
 				contentContainerStyle={{ paddingBottom: bottom }}
 				keyboardShouldPersistTaps='always'
 			/>
diff --git a/app/views/NewMessageView/useStartMediaCall.tsx b/app/views/NewMessageView/useStartMediaCall.tsx
new file mode 100644
index 00000000000..9c68b7f3eae
--- /dev/null
+++ b/app/views/NewMessageView/useStartMediaCall.tsx
@@ -0,0 +1,28 @@
+import { showActionSheetRef } from '~/containers/ActionSheet';
+import { NewMediaCall } from '~/containers/NewMediaCall';
+import { usePeerAutocompleteStore } from '~/lib/services/voip/usePeerAutocompleteStore';
+import { useIsInActiveVoipCall } from '~/lib/services/voip/isInActiveVoipCall';
+import { isSelfUserId } from '~/lib/services/voip/isSelfUserId';
+
+interface IMediaCallPeer {
+	userId: string;
+	name: string;
+	username: string;
+}
+
+export const useStartMediaCall = ({ userId, name, username }: IMediaCallPeer) => {
+	const isInActiveCall = useIsInActiveVoipCall();
+	const isSelf = isSelfUserId(userId);
+
+	return () => {
+		if (!userId || isInActiveCall || isSelf) return;
+		usePeerAutocompleteStore.getState().setSelectedPeer({ type: 'user', value: userId, label: name, username });
+		showActionSheetRef({
+			children: <NewMediaCall />,
+			portraitSnaps: ['60%'],
+			landscapeSnaps: ['90%'],
+			enableContentPanningGesture: false,
+			fullContainer: true
+		});
+	};
+};
diff --git a/app/views/NewServerView/components/CertificatePicker/index.tsx b/app/views/NewServerView/components/CertificatePicker/index.tsx
index 7aca96ae542..ba1f43da8bb 100644
--- a/app/views/NewServerView/components/CertificatePicker/index.tsx
+++ b/app/views/NewServerView/components/CertificatePicker/index.tsx
@@ -1,4 +1,5 @@
-import { Text, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '~/i18n';
 import { type TCertificatePicker } from '~/views/NewServerView/definitions';
@@ -35,9 +36,9 @@ const CertificatePicker = ({ connecting, certificate, chooseCertificate, handleR
 
 	return (
 		<View style={styles.container}>
-			<Text style={[styles.buttonPrompt, { color: colors.fontSecondaryInfo }]}>
+			<PlainText style={[styles.buttonPrompt, { color: colors.fontSecondaryInfo }]}>
 				{certificate ? I18n.t('Your_certificate') : I18n.t('Do_you_have_a_certificate')}
-			</Text>
+			</PlainText>
 			<Button
 				onPress={certificate ? handleRemove : chooseCertificate}
 				testID='new-server-choose-certificate'
diff --git a/app/views/NewServerView/components/ServersHistoryActionSheetContent/index.tsx b/app/views/NewServerView/components/ServersHistoryActionSheetContent/index.tsx
index 07d0f1c3276..5770054489a 100644
--- a/app/views/NewServerView/components/ServersHistoryActionSheetContent/index.tsx
+++ b/app/views/NewServerView/components/ServersHistoryActionSheetContent/index.tsx
@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { A11y } from 'react-native-a11y-order';
 
@@ -42,7 +43,7 @@ export const ServersHistoryActionSheetContent = ({
 	return (
 		<View style={{ paddingBottom: bottom, backgroundColor: colors.surfaceLight }}>
 			<View style={[styles.header, { borderColor: colors.strokeLight }]}>
-				<Text style={[styles.headerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Workspaces')}</Text>
+				<PlainText style={[styles.headerText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Workspaces')}</PlainText>
 			</View>
 			<List.Separator />
 			{serversHistory.map(item => (
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 de1d3b1e0a2..cef6be5c621 100644
--- a/app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap
+++ b/app/views/NewServerView/components/ServersHistoryItem/__snapshots__/ServersHistoryItem.test.tsx.snap
@@ -3,966 +3,1050 @@
 exports[`Story Snapshots: Content should match snapshot 1`] = `
 [
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        1,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://open.rocket.chat-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://open.rocket.chat-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://open.rocket.chat"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://open.rocket.chat, john.doe"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#E4E7EA"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://open.rocket.chat, john.doe"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://open.rocket.chat"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://open.rocket.chat
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  john.doe
-                </Text>
+                  <Text
+                    accessibilityLabel="https://open.rocket.chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    https://open.rocket.chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="john.doe"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    john.doe
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        2,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://superlongservername.tologintoasuperlongservername.rocket.chat-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://superlongservername.tologintoasuperlongservername.rocket.chat-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://superlongservername.tologintoasuperlongservername.rocket.chat"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://superlongservername.tologintoasuperlongservername.rocket.chat, very.long.username.here"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#E4E7EA"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://superlongservername.tologintoasuperlongservername.rocket.chat, very.long.username.here"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://superlongservername.tologintoasuperlongservername.rocket.chat"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://superlongservername.tologintoasuperlongservername.rocket.chat
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  very.long.username.here
-                </Text>
+                  <Text
+                    accessibilityLabel="https://superlongservername.tologintoasuperlongservername.rocket.chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    https://superlongservername.tologintoasuperlongservername.rocket.chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="very.long.username.here"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    very.long.username.here
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        3,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://stable.rocket.chat-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://stable.rocket.chat-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://stable.rocket.chat"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
-              [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
-              ]
-            }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://stable.rocket.chat, admin"
             accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
-          >
-            <View
-              style={
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              [
                 [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
                   },
+                ],
+                undefined,
+              ]
+            }
+            underlayColor="#E4E7EA"
+          >
+            <View
+              accessibilityActions={
+                [
                   {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://stable.rocket.chat, admin"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://stable.rocket.chat"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "test-file-stub",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "test-file-stub",
                       },
                     ]
                   }
-                >
-                  https://stable.rocket.chat
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  admin
-                </Text>
+                  <Text
+                    accessibilityLabel="https://stable.rocket.chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    https://stable.rocket.chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="admin"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    admin
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
 ]
@@ -971,645 +1055,701 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
 exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
 [
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        4,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://open.rocket.chat-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://open.rocket.chat-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://open.rocket.chat"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://open.rocket.chat, john.doe"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#E4E7EA"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://open.rocket.chat, john.doe"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://open.rocket.chat"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://open.rocket.chat
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  john.doe
-                </Text>
+                  <Text
+                    accessibilityLabel="https://open.rocket.chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    https://open.rocket.chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="john.doe"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    john.doe
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        5,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://example.com-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://example.com-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://example.com"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://example.com, user123"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#E4E7EA"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://example.com, user123"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://example.com"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://example.com
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  user123
-                </Text>
+                  <Text
+                    accessibilityLabel="https://example.com"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    https://example.com
+                  </Text>
+                  <Text
+                    accessibilityLabel="user123"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    user123
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
 ]
@@ -1618,966 +1758,1050 @@ exports[`Story Snapshots: SwipeActions should match snapshot 1`] = `
 exports[`Story Snapshots: Themes should match snapshot 1`] = `
 [
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#EC0D2A",
-          },
-        ]
+    handlerTags={
+      [
+        6,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#EC0D2A",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#EC0D2A",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://open.rocket.chat-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#EC0D2A",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://open.rocket.chat-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <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"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           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,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://open.rocket.chat"
-          underlayColor="#E4E7EA"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#E4E7EA",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#FFFFFF",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://open.rocket.chat, john.doe"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#E4E7EA"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://open.rocket.chat, john.doe"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://open.rocket.chat"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#1F2329",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://open.rocket.chat
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#6C727A",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  john.doe
-                </Text>
+                  <Text
+                    accessibilityLabel="https://open.rocket.chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#1F2329",
+                        },
+                      ]
+                    }
+                  >
+                    https://open.rocket.chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="john.doe"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#6C727A",
+                        },
+                      ]
+                    }
+                  >
+                    john.doe
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#BB3E4E",
-          },
-        ]
+    handlerTags={
+      [
+        7,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#BB3E4E",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#BB3E4E",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://open.rocket.chat-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#BB3E4E",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://open.rocket.chat-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          rippleColor="#2D3039"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           style={
             [
-              {
-                "backgroundColor": "#262931",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://open.rocket.chat"
-          underlayColor="#2D3039"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#2D3039",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#262931",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://open.rocket.chat, john.doe"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#2D3039"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://open.rocket.chat, john.doe"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://open.rocket.chat"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#F2F3F5",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://open.rocket.chat
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  john.doe
-                </Text>
+                  <Text
+                    accessibilityLabel="https://open.rocket.chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#F2F3F5",
+                        },
+                      ]
+                    }
+                  >
+                    https://open.rocket.chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="john.doe"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  >
+                    john.doe
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
   <View
-    collapsable={false}
-  >
-    <View
-      pointerEvents="box-none"
-      style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "row",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          {
-            "backgroundColor": "#BB3E4E",
-          },
-        ]
+    handlerTags={
+      [
+        8,
+      ]
+    }
+    onGestureHandlerEvent={[Function]}
+    onGestureHandlerStateChange={[Function]}
+    onGestureHandlerTouchEvent={[Function]}
+    onStartShouldSetResponder={[Function]}
+    pointerEvents="box-none"
+    style={
+      {
+        "display": "contents",
       }
-    >
+    }
+  >
+    <View>
       <View
+        pointerEvents="box-none"
         style={
           [
             {
-              "alignItems": "flex-end",
               "bottom": 0,
-              "justifyContent": "center",
+              "flexDirection": "row",
+              "left": 0,
               "position": "absolute",
+              "right": 0,
               "top": 0,
             },
             {
-              "width": 350,
+              "backgroundColor": "#BB3E4E",
             },
-            [Function],
           ]
         }
       >
-        <RNGestureHandlerButton
-          accessibilityLabel="Delete"
-          accessible={true}
-          activeOpacity={0.105}
-          collapsable={false}
-          delayLongPress={600}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
+        <View
           style={
             [
               {
-                "alignItems": "center",
-                "backgroundColor": "#BB3E4E",
-                "height": "100%",
+                "alignItems": "flex-end",
+                "bottom": 0,
                 "justifyContent": "center",
-                "width": 80,
+                "position": "absolute",
+                "top": 0,
               },
               {
-                "cursor": undefined,
+                "width": 350,
               },
+              [Function],
             ]
           }
-          testID="servers-history-https://open.rocket.chat-delete"
-          underlayColor="black"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityLabel="Delete"
+            accessibilityState={
               {
-                "backgroundColor": "black",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
               }
             }
-          />
-          <Text
-            allowFontScaling={false}
-            selectable={false}
+            accessible={true}
+            activeUnderlayOpacity={0.105}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
             style={
               [
                 {
-                  "color": "#FFFFFF",
-                  "fontSize": 24,
+                  "alignItems": "center",
+                  "height": "100%",
+                  "justifyContent": "center",
+                  "width": 80,
                 },
-                [
-                  {
-                    "lineHeight": 24,
-                  },
-                  undefined,
-                ],
                 {
-                  "fontFamily": "custom",
-                  "fontStyle": "normal",
-                  "fontWeight": "normal",
+                  "backgroundColor": "#BB3E4E",
                 },
-                {},
               ]
             }
+            testID="servers-history-https://open.rocket.chat-delete"
+            underlayColor="black"
           >
-            
-          </Text>
-        </RNGestureHandlerButton>
+            <Text
+              allowFontScaling={false}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#FFFFFF",
+                    "fontSize": 24,
+                  },
+                  [
+                    {
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ],
+                  {
+                    "fontFamily": "custom",
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                  },
+                  {},
+                ]
+              }
+            >
+              
+            </Text>
+          </View>
+        </View>
       </View>
-    </View>
-    <View
-      style={[Function]}
-    >
-      <ExternalKeyboardView
-        canBeFocused={true}
-        enableA11yFocus={false}
-        enableContextMenu={false}
-        group={false}
-        haloEffect={true}
-        hasKeyDownPress={false}
-        hasKeyUpPress={true}
-        hasOnFocusChanged={true}
-        lockFocus={0}
-        onContextMenuPress={[Function]}
-        onFocusChange={[Function]}
-        onKeyUpPress={[Function]}
-        orderIndex={-1}
-        screenAutoA11yFocusDelay={300}
-        style={
-          [
-            undefined,
-            undefined,
-          ]
-        }
+      <View
+        style={[Function]}
       >
-        <RNGestureHandlerButton
-          activeOpacity={1}
-          collapsable={false}
-          delayLongPress={600}
-          enabled={true}
-          handlerTag={-1}
-          handlerType="NativeViewGestureHandler"
-          innerRef={null}
-          onActiveStateChange={[Function]}
-          onGestureHandlerEvent={[Function]}
-          onGestureHandlerStateChange={[Function]}
-          onPress={[Function]}
-          rippleColor="#16181a"
+        <ExternalKeyboardView
+          canBeFocused={true}
+          enableA11yFocus={false}
+          enableContextMenu={false}
+          group={false}
+          haloEffect={true}
+          hasKeyDownPress={false}
+          hasKeyUpPress={true}
+          hasOnFocusChanged={true}
+          lockFocus={0}
+          onContextMenuPress={[Function]}
+          onFocusChange={[Function]}
+          onKeyUpPress={[Function]}
+          orderIndex={-1}
+          screenAutoA11yFocusDelay={300}
           style={
             [
-              {
-                "backgroundColor": "#0d0d0d",
-                "borderRadius": undefined,
-                "margin": undefined,
-                "marginBottom": undefined,
-                "marginEnd": undefined,
-                "marginHorizontal": undefined,
-                "marginLeft": undefined,
-                "marginRight": undefined,
-                "marginStart": undefined,
-                "marginTop": undefined,
-                "marginVertical": undefined,
-              },
-              {
-                "cursor": undefined,
-              },
+              undefined,
+              undefined,
             ]
           }
-          testID="servers-history-https://open.rocket.chat"
-          underlayColor="#16181a"
         >
           <View
-            collapsable={false}
-            style={
+            accessibilityState={
               {
-                "backgroundColor": "#16181a",
-                "borderBottomLeftRadius": undefined,
-                "borderBottomRightRadius": undefined,
-                "borderRadius": undefined,
-                "borderTopLeftRadius": undefined,
-                "borderTopRightRadius": undefined,
-                "bottom": 0,
-                "left": 0,
-                "opacity": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
               }
             }
-          />
-          <View
-            accessibilityActions={
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
+            collapsable={false}
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
               [
-                {
-                  "label": "Delete",
-                  "name": "delete",
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": "#0d0d0d",
+                    "borderRadius": undefined,
+                  },
+                ],
+                undefined,
               ]
             }
-            accessibilityHint="Activate to select server. Available actions: delete"
-            accessibilityLabel="https://open.rocket.chat, john.doe"
-            accessible={true}
-            onAccessibilityAction={[Function]}
-            style={{}}
+            underlayColor="#16181a"
           >
             <View
-              style={
+              accessibilityActions={
                 [
                   {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "padding": 12,
-                  },
-                  {
-                    "height": 68,
+                    "label": "Delete",
+                    "name": "delete",
                   },
                 ]
               }
+              accessibilityHint="Activate to select server. Available actions: delete"
+              accessibilityLabel="https://open.rocket.chat, john.doe"
+              accessible={true}
+              onAccessibilityAction={[Function]}
+              style={{}}
+              testID="servers-history-https://open.rocket.chat"
             >
-              <ViewManagerAdapter_ExpoImage
-                borderRadius={4}
-                containerViewRef={{"current":"Object"}}
-                contentFit="contain"
-                contentPosition={
-                  {
-                    "left": "50%",
-                    "top": "50%",
-                  }
-                }
-                height={44}
-                nativeViewRef={{"current":"NativeComponent"}}
-                onError={[Function]}
-                onLoad={[Function]}
-                onLoadStart={[Function]}
-                onProgress={[Function]}
-                placeholder={[]}
-                source={
+              <View
+                style={
                   [
                     {
-                      "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
+                      "alignItems": "center",
+                      "flexDirection": "row",
+                      "padding": 12,
+                    },
+                    {
+                      "height": 68,
                     },
                   ]
                 }
-                style={
-                  {
-                    "borderRadius": 4,
-                    "height": 44,
-                    "width": 44,
-                  }
-                }
-                transition={null}
-                width={44}
-              />
-              <View
-                style={
-                  {
-                    "flex": 1,
-                    "flexDirection": "column",
-                    "justifyContent": "center",
-                    "paddingLeft": 12,
-                    "paddingRight": 18,
-                  }
-                }
               >
-                <Text
-                  numberOfLines={1}
-                  style={
+                <ViewManagerAdapter_ExpoImage
+                  borderRadius={4}
+                  containerViewRef={{"current":"Object"}}
+                  contentFit="contain"
+                  contentPosition={
+                    {
+                      "left": "50%",
+                      "top": "50%",
+                    }
+                  }
+                  height={44}
+                  nativeViewRef={{"current":"NativeComponent"}}
+                  onError={[Function]}
+                  onLoad={[Function]}
+                  onLoadStart={[Function]}
+                  onProgress={[Function]}
+                  placeholder={[]}
+                  sfEffect={null}
+                  source={
                     [
                       {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 18,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "600",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#F2F3F5",
+                        "uri": "https://open.rocket.chat/images/logo/android-chrome-512x512.png",
                       },
                     ]
                   }
-                >
-                  https://open.rocket.chat
-                </Text>
-                <Text
-                  numberOfLines={1}
                   style={
-                    [
-                      {
-                        "backgroundColor": "transparent",
-                        "fontFamily": "Inter",
-                        "fontSize": 16,
-                        "fontVariant": [
-                          "tabular-nums",
-                        ],
-                        "fontWeight": "400",
-                        "textAlign": "left",
-                      },
-                      {
-                        "color": "#9EA2A8",
-                      },
-                    ]
+                    {
+                      "borderRadius": 4,
+                      "height": 44,
+                      "width": 44,
+                    }
+                  }
+                  symbolSize={null}
+                  symbolWeight={null}
+                  transition={null}
+                  width={44}
+                />
+                <View
+                  style={
+                    {
+                      "flex": 1,
+                      "flexDirection": "column",
+                      "justifyContent": "center",
+                      "paddingLeft": 12,
+                      "paddingRight": 18,
+                    }
                   }
                 >
-                  john.doe
-                </Text>
+                  <Text
+                    accessibilityLabel="https://open.rocket.chat"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 18,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "600",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#F2F3F5",
+                        },
+                      ]
+                    }
+                  >
+                    https://open.rocket.chat
+                  </Text>
+                  <Text
+                    accessibilityLabel="john.doe"
+                    accessibilityRole="text"
+                    accessible={true}
+                    numberOfLines={1}
+                    style={
+                      [
+                        {
+                          "backgroundColor": "transparent",
+                          "fontFamily": "Inter",
+                          "fontSize": 16,
+                          "fontVariant": [
+                            "tabular-nums",
+                          ],
+                          "fontWeight": "400",
+                          "textAlign": "left",
+                        },
+                        {
+                          "color": "#9EA2A8",
+                        },
+                      ]
+                    }
+                  >
+                    john.doe
+                  </Text>
+                </View>
               </View>
             </View>
           </View>
-        </RNGestureHandlerButton>
-      </ExternalKeyboardView>
+        </ExternalKeyboardView>
+      </View>
     </View>
   </View>,
 ]
diff --git a/app/views/NewServerView/components/ServersHistoryItem/index.tsx b/app/views/NewServerView/components/ServersHistoryItem/index.tsx
index 44b5e95c415..ff7e76941d7 100644
--- a/app/views/NewServerView/components/ServersHistoryItem/index.tsx
+++ b/app/views/NewServerView/components/ServersHistoryItem/index.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { PixelRatio, Text, View } from 'react-native';
+import { PixelRatio, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Image } from 'expo-image';
 
 import styles, { ROW_HEIGHT } from './styles';
@@ -39,12 +40,12 @@ const ServersHistoryItem = memo(({ item, onPress, onDeletePress }: IServersHisto
 				<Image source={item.iconURL ? { uri: item.iconURL } : defaultLogo} style={styles.serverIcon} contentFit='contain' />
 
 				<View style={styles.textContainer}>
-					<Text numberOfLines={1} style={[styles.title, { color: colors.fontTitlesLabels }]}>
+					<PlainText numberOfLines={1} style={[styles.title, { color: colors.fontTitlesLabels }]}>
 						{item.url}
-					</Text>
-					<Text numberOfLines={1} style={[styles.subtitle, { color: colors.fontSecondaryInfo }]}>
+					</PlainText>
+					<PlainText numberOfLines={1} style={[styles.subtitle, { color: colors.fontSecondaryInfo }]}>
 						{item.username}
-					</Text>
+					</PlainText>
 				</View>
 			</View>
 		</Touchable>
diff --git a/app/views/NewServerView/index.tsx b/app/views/NewServerView/index.tsx
index 99b885350f6..47cd8063ba0 100644
--- a/app/views/NewServerView/index.tsx
+++ b/app/views/NewServerView/index.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
-import { AccessibilityInfo, BackHandler, Keyboard, Text } from 'react-native';
+import { AccessibilityInfo, BackHandler, Keyboard } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { Image } from 'expo-image';
 import { useForm } from 'react-hook-form';
@@ -10,11 +11,11 @@ import { inviteLinksClear } from '~/actions/inviteLinks';
 import { selectServerRequest, serverFinishAdd, serverRequest } from '~/actions/server';
 import Button from '~/containers/Button';
 import FormContainer, { FormContainerInner } from '~/containers/FormContainer';
-import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import { type TServerHistoryModel } from '~/definitions';
 import I18n from '~/i18n';
 import { useTheme } from '~/theme';
 import { isAndroid, isTablet } from '~/lib/methods/helpers';
+import { outsideHeaderLeftClose } from '~/lib/methods/helpers/navigation';
 import EventEmitter from '~/lib/methods/helpers/events';
 import ServerInput from './components/ServerInput';
 import { getServerById } from '~/lib/database/services/Server';
@@ -99,8 +100,9 @@ const NewServerView = () => {
 		if (previousServer) {
 			return navigation.setOptions({
 				headerTitle: I18n.t('Add_Server'),
-				headerLeft: () =>
-					!connecting ? <HeaderButton.CloseModal navigation={navigation} onPress={close} testID='new-server-view-close' /> : null
+				...(connecting
+					? { headerLeft: () => null, unstable_headerLeftItems: () => [] }
+					: outsideHeaderLeftClose(close, 'new-server-view-close'))
 			});
 		}
 		return navigation.setOptions({
@@ -157,13 +159,13 @@ const NewServerView = () => {
 					source={require('~/static/images/logo_with_name.png')}
 					contentFit='contain'
 				/>
-				<Text
+				<PlainText
 					style={{
 						...styles.title,
 						color: colors.fontTitlesLabels
 					}}>
 					{I18n.t('Add_server')}
-				</Text>
+				</PlainText>
 				<ServerInput
 					error={errors.workspaceUrl?.message}
 					control={control}
diff --git a/app/views/NotificationPreferencesView/index.tsx b/app/views/NotificationPreferencesView/index.tsx
index 36c2f67f831..09bd66f4d6f 100644
--- a/app/views/NotificationPreferencesView/index.tsx
+++ b/app/views/NotificationPreferencesView/index.tsx
@@ -1,11 +1,14 @@
 import { type RouteProp, useNavigation, useRoute } from '@react-navigation/core';
 import { useEffect, useState, type ReactElement } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { type TActionSheetOptionsItem, useActionSheet } from '~/containers/ActionSheet';
 import { CustomIcon } from '~/containers/CustomIcon';
 import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
+import { useNativeListMode } from '~/containers/List/native/context';
+import NativeListPicker from '~/containers/List/native/Picker';
 import SafeAreaView from '~/containers/SafeAreaView';
 import { type IRoomNotifications, type TRoomNotificationsModel } from '~/definitions';
 import I18n from '~/i18n';
@@ -43,6 +46,7 @@ const RenderListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const nativeListMode = useNativeListMode();
 
 	const pref = room[preference]
 		? OPTIONS[preference as TOptions].find(option => option.value === room[preference])
@@ -62,17 +66,40 @@ const RenderListPicker = ({
 
 	const label = option?.label ? I18n.t(option?.label, { defaultValue: option?.label, second: option?.second }) : option?.label;
 
+	if (nativeListMode === 'native') {
+		return (
+			<NativeListPicker
+				title={I18n.t(title)}
+				testID={testID}
+				options={OPTIONS[preference as TOptions].map(i => ({
+					label: I18n.t(i.label, { defaultValue: i.label, second: i.second }),
+					value: i.value.toString()
+				}))}
+				selection={option?.value.toString() ?? ''}
+				onSelectionChange={selected => {
+					const previous = option;
+					onChangeValue(preference, { [preference]: selected }, () => setOption(previous));
+					setOption(OPTIONS[preference as TOptions].find(i => i.value.toString() === selected));
+				}}
+			/>
+		);
+	}
+
 	return (
 		<List.Item
 			title={title}
 			testID={testID}
 			onPress={() => showActionSheet({ options })}
-			right={() => <Text style={[{ ...sharedStyles.textRegular, fontSize: 16 }, { color: colors.fontHint }]}>{label}</Text>}
+			right={() => (
+				<PlainText style={[{ ...sharedStyles.textRegular, fontSize: 16 }, { color: colors.fontHint }]}>{label}</PlainText>
+			)}
 			additionalAccessibilityLabel={label}
 		/>
 	);
 };
 
+const NativeRenderListPicker = asNativeListRow(RenderListPicker);
+
 const RenderSwitch = ({ preference, room, onChangeValue }: IBaseParams) => {
 	const [switchValue, setSwitchValue] = useState(!room[preference]);
 	return (
@@ -137,7 +164,7 @@ const NotificationPreferencesView = (): ReactElement => {
 	};
 
 	return (
-		<SafeAreaView testID='notification-preference-view'>
+		<SafeAreaView testID='notification-preference-view' style={{ paddingTop: 16 }}>
 			<List.Container testID='notification-preference-view-list'>
 				<List.Section>
 					<List.Separator />
@@ -200,7 +227,7 @@ const NotificationPreferencesView = (): ReactElement => {
 
 				<List.Section title='In_App_And_Desktop'>
 					<List.Separator />
-					<RenderListPicker
+					<NativeRenderListPicker
 						preference='desktopNotifications'
 						room={room}
 						title='Alert'
@@ -208,7 +235,7 @@ const NotificationPreferencesView = (): ReactElement => {
 						onChangeValue={handleSaveNotificationSettings}
 					/>
 					<List.Separator />
-					<RenderListPicker
+					<NativeRenderListPicker
 						preference='audioNotificationValue'
 						room={room}
 						title='Sound'
@@ -220,7 +247,7 @@ const NotificationPreferencesView = (): ReactElement => {
 				</List.Section>
 				<List.Section title='Push_Notifications'>
 					<List.Separator />
-					<RenderListPicker
+					<NativeRenderListPicker
 						preference='mobilePushNotifications'
 						room={room}
 						title='Alert'
@@ -239,7 +266,7 @@ const NotificationPreferencesView = (): ReactElement => {
 				</List.Section>
 				<List.Section title='Email'>
 					<List.Separator />
-					<RenderListPicker
+					<NativeRenderListPicker
 						preference='emailNotifications'
 						room={room}
 						title='Alert'
diff --git a/app/views/PickerView/Item.ios.tsx b/app/views/PickerView/Item.ios.tsx
new file mode 100644
index 00000000000..f5717ed5770
--- /dev/null
+++ b/app/views/PickerView/Item.ios.tsx
@@ -0,0 +1,24 @@
+import * as List from '~/containers/List';
+import NativeListRow from '~/containers/NativeListRow';
+import I18n from '~/i18n';
+import { useTheme } from '~/theme';
+import { type IPickerItem } from './Item';
+
+const Item = ({ item, selected, onItemPress, isFirst, isLast }: IPickerItem) => {
+	const { colors } = useTheme();
+	const title = I18n.t(item.label, { defaultValue: item.label, second: item?.second });
+	return (
+		<NativeListRow
+			title={title}
+			onPress={onItemPress}
+			testID={`picker-view-item-${item.value}`}
+			accessibilityLabel={`${title} ${selected ? I18n.t('Checked') : I18n.t('Unchecked')}`}
+			isSelected={selected}
+			isFirst={isFirst}
+			isLast={isLast}
+			trailing={selected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : undefined}
+		/>
+	);
+};
+
+export default Item;
diff --git a/app/views/PickerView/Item.tsx b/app/views/PickerView/Item.tsx
new file mode 100644
index 00000000000..decc31504c0
--- /dev/null
+++ b/app/views/PickerView/Item.tsx
@@ -0,0 +1,28 @@
+import * as List from '~/containers/List';
+import I18n from '~/i18n';
+import { useTheme } from '~/theme';
+import { type IOptionsField } from '../NotificationPreferencesView/options';
+
+export interface IPickerItem {
+	item: IOptionsField;
+	selected: boolean;
+	onItemPress: () => void;
+	isFirst: boolean;
+	isLast: boolean;
+}
+
+const Item = ({ item, selected, onItemPress }: IPickerItem) => {
+	const { colors } = useTheme();
+	return (
+		<List.Item
+			title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
+			right={() => (selected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
+			onPress={onItemPress}
+			translateTitle={false}
+			additionalAccessibilityLabel={selected}
+			additionalAccessibilityLabelCheck
+		/>
+	);
+};
+
+export default Item;
diff --git a/app/views/PickerView.tsx b/app/views/PickerView/index.tsx
similarity index 61%
rename from app/views/PickerView.tsx
rename to app/views/PickerView/index.tsx
index ecd79700e98..33a6a93d6ac 100644
--- a/app/views/PickerView.tsx
+++ b/app/views/PickerView/index.tsx
@@ -1,18 +1,21 @@
 import { type ReactElement, useLayoutEffect, useState } from 'react';
-import { FlatList, StyleSheet, Text, type TextInputProps } from 'react-native';
+import { FlatList, StyleSheet, type TextInputProps } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { textInputDebounceTime } from '../lib/constants/debounceConfig';
-import * as List from '../containers/List';
-import SafeAreaView from '../containers/SafeAreaView';
-import SearchBox from '../containers/SearchBox';
-import I18n from '../i18n';
-import { useAppNavigation, useAppRoute } from '../lib/hooks/navigation';
-import { useDebounce } from '../lib/methods/helpers';
-import { type TNavigation } from '../stacks/stackType';
-import { useTheme } from '../theme';
-import { type IOptionsField } from './NotificationPreferencesView/options';
-import sharedStyles from './Styles';
+import { textInputDebounceTime } from '~/lib/constants/debounceConfig';
+import * as List from '~/containers/List';
+import SafeAreaView from '~/containers/SafeAreaView';
+import SearchBox from '~/containers/SearchBox';
+import I18n from '~/i18n';
+import { useAppNavigation, useAppRoute } from '~/lib/hooks/navigation';
+import { useDebounce } from '~/lib/methods/helpers';
+import { type TNavigation } from '~/stacks/stackType';
+import { useTheme } from '~/theme';
+import sharedStyles from '../Styles';
+import { PlainSeparator } from '~/containers/NativeListRow/Separator';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
+import Item from './Item';
 
 const styles = StyleSheet.create({
 	noResult: {
@@ -23,26 +26,6 @@ const styles = StyleSheet.create({
 	}
 });
 
-interface IItem {
-	item: IOptionsField;
-	selected: boolean;
-	onItemPress: () => void;
-}
-
-const Item = ({ item, selected, onItemPress }: IItem) => {
-	const { colors } = useTheme();
-	return (
-		<List.Item
-			title={I18n.t(item.label, { defaultValue: item.label, second: item?.second })}
-			right={() => (selected ? <List.Icon name='check' color={colors.badgeBackgroundLevel2} /> : null)}
-			onPress={onItemPress}
-			translateTitle={false}
-			additionalAccessibilityLabel={selected}
-			additionalAccessibilityLabelCheck
-		/>
-	);
-};
-
 const RenderSearch = ({ onChangeText }: TextInputProps) => (
 	<>
 		<SearchBox onChangeText={onChangeText} />
@@ -57,6 +40,7 @@ const PickerView = (): ReactElement => {
 	} = useAppRoute<TNavigation, 'PickerView'>();
 
 	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceHover);
 
 	const { bottom } = useSafeAreaInsets();
 	const [data, setData] = useState(paramData);
@@ -93,25 +77,27 @@ const PickerView = (): ReactElement => {
 	};
 
 	return (
-		<SafeAreaView>
+		<SafeAreaView style={{ backgroundColor: listBackgroundColor }}>
 			<FlatList
 				data={data}
 				keyExtractor={item => item.value as string}
-				renderItem={({ item }) => (
+				renderItem={({ item, index }) => (
 					<Item
 						item={item}
 						selected={(paramValue || data[0]?.value) === item.value}
 						onItemPress={() => handleChangeValue(item.value)}
+						isFirst={index === 0}
+						isLast={index === data.length - 1}
 					/>
 				)}
 				onEndReached={handleOnEndReached}
 				onEndReachedThreshold={0.5}
-				ItemSeparatorComponent={List.Separator}
+				ItemSeparatorComponent={PlainSeparator}
 				ListHeaderComponent={<RenderSearch onChangeText={onChangeText} />}
 				contentContainerStyle={{ paddingBottom: bottom }}
 				ListFooterComponent={List.Separator}
 				ListEmptyComponent={() => (
-					<Text style={[styles.noResult, { color: colors.fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
+					<PlainText style={[styles.noResult, { color: colors.fontTitlesLabels }]}>{I18n.t('No_results_found')}</PlainText>
 				)}
 			/>
 		</SafeAreaView>
diff --git a/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx b/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx
index 58cf6780b08..27e13d68d26 100644
--- a/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/ConfirmEmailChangeActionSheetContent/index.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useForm } from 'react-hook-form';
 import { type ReactElement } from 'react';
 
@@ -91,11 +92,13 @@ const ConfirmEmailChangeActionSheetContent = ({
 	return (
 		<View style={sharedStyles.containerScrollView} testID='profile-view-enter-password-sheet'>
 			<View accessible accessibilityLabel={I18n.t('Please_enter_your_password')} style={styles.titleContainer}>
-				<Text style={[styles.titleContainerText, { color: colors.fontDefault }]}>{I18n.t('Please_enter_your_password')}</Text>
+				<PlainText style={[styles.titleContainerText, { color: colors.fontDefault }]}>
+					{I18n.t('Please_enter_your_password')}
+				</PlainText>
 			</View>
-			<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>
+			<PlainText style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>
 				{I18n.t('For_your_security_you_must_enter_your_current_password_to_continue')}
-			</Text>
+			</PlainText>
 			<ControlledFormTextInput
 				control={control}
 				name='password'
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/AlertText.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/AlertText.tsx
index cec25211289..32369dbd7cf 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/AlertText.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/AlertText.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, type TextStyle } from 'react-native';
+import { StyleSheet, type TextStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import sharedStyles from '~/views/Styles';
@@ -19,7 +20,7 @@ interface IAlertText {
 
 const AlertText = ({ text, style }: IAlertText) => {
 	const { colors } = useTheme();
-	return <Text style={[styles.text, { color: colors.fontDanger }, style]}>{text}</Text>;
+	return <PlainText style={[styles.text, { color: colors.fontDanger }, style]}>{text}</PlainText>;
 };
 
 export default AlertText;
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/ConfirmDeleteAccountContent.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/ConfirmDeleteAccountContent.tsx
index a2bb3703fa1..aedc1ab0241 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/ConfirmDeleteAccountContent.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/ConfirmDeleteAccountContent.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { type ReactElement } from 'react';
 
@@ -71,11 +72,13 @@ const ConfirmDeleteAccountContent = ({
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<View accessible accessibilityLabel={i18n.t('Are_you_sure_question_mark')} style={styles.titleContainer}>
 				<CustomIcon name={'warning'} size={32} color={colors.buttonBackgroundDangerDefault} />
-				<Text style={[styles.titleContainerText, { color: colors.fontDefault }]}>{i18n.t('Are_you_sure_question_mark')}</Text>
+				<PlainText style={[styles.titleContainerText, { color: colors.fontDefault }]}>
+					{i18n.t('Are_you_sure_question_mark')}
+				</PlainText>
 			</View>
-			<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>
+			<PlainText style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>
 				{i18n.t('Deleting_a_user_will_delete_all_messages')}
-			</Text>
+			</PlainText>
 			{changeOwnerRooms ? <AlertText text={changeOwnerRooms} style={styles.changeOwnerRoomsAlert} /> : null}
 			{removedRooms ? <AlertText text={removedRooms} style={styles.removedRoomsAlert} /> : null}
 
diff --git a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
index 70fb7fc139d..7c88be9dd58 100644
--- a/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
+++ b/app/views/ProfileView/components/DeleteAccountActionSheetContent/index.tsx
@@ -1,4 +1,5 @@
-import { AccessibilityInfo, Keyboard, StyleSheet, Text, View } from 'react-native';
+import { AccessibilityInfo, Keyboard, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { sha256 } from 'js-sha256';
 import { useForm } from 'react-hook-form';
 import { useDispatch } from 'react-redux';
@@ -96,13 +97,13 @@ const DeleteAccountActionSheetContent = (): ReactElement => {
 		<View style={sharedStyles.containerScrollView} testID='action-sheet-content-with-input-and-submit'>
 			<View accessible accessibilityLabel={i18n.t('Are_you_sure_you_want_to_delete_your_account')} style={styles.titleContainer}>
 				<CustomIcon name={'warning'} size={32} color={colors.buttonBackgroundDangerDefault} />
-				<Text style={[styles.titleContainerText, { color: colors.fontDefault }]}>
+				<PlainText style={[styles.titleContainerText, { color: colors.fontDefault }]}>
 					{i18n.t('Are_you_sure_you_want_to_delete_your_account')}
-				</Text>
+				</PlainText>
 			</View>
-			<Text style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>
+			<PlainText style={[styles.subtitleText, { color: colors.fontTitlesLabels }]}>
 				{i18n.t('For_your_security_you_must_enter_your_current_password_to_continue')}
-			</Text>
+			</PlainText>
 
 			<ControlledFormTextInput
 				control={control}
diff --git a/app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx b/app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx
index e5b76c2bd36..73c882aea48 100644
--- a/app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx
+++ b/app/views/PushTroubleshootView/components/CommunityEditionPushQuota.tsx
@@ -1,7 +1,9 @@
-import { Alert, StyleSheet, Text } from 'react-native';
+import { Alert, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { type ReactElement } from 'react';
 
 import * as List from '~/containers/List';
+import { asNativeListSection } from '~/containers/List/native/rowMarkers';
 import i18n from '~/i18n';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useTheme } from '~/theme';
@@ -10,7 +12,7 @@ import sharedStyles from '~/views/Styles';
 const WARNING_MINIMUM_VALUE = 70;
 const WARNING_MAXIMUM_VALUE = 90;
 
-export default function CommunityEditionPushQuota(): ReactElement | null {
+function CommunityEditionPushQuota(): ReactElement | null {
 	const { colors } = useTheme();
 	const { consumptionPercentage, isCommunityEdition } = useAppSelector(state => ({
 		isCommunityEdition: state.troubleshootingNotification.isCommunityEdition,
@@ -40,7 +42,7 @@ export default function CommunityEditionPushQuota(): ReactElement | null {
 				title='Workspace_consumption'
 				testID='push-troubleshoot-view-workspace-consumption'
 				onPress={alertWorkspaceConsumption}
-				right={() => <Text style={[styles.pickerText, { color: percentageColor }]}>{percentage}</Text>}
+				right={() => <PlainText style={[styles.pickerText, { color: percentageColor }]}>{percentage}</PlainText>}
 				additionalAccessibilityLabel={percentage}
 			/>
 			<List.Separator />
@@ -55,3 +57,5 @@ const styles = StyleSheet.create({
 		fontSize: 16
 	}
 });
+
+export default asNativeListSection(CommunityEditionPushQuota);
diff --git a/app/views/PushTroubleshootView/components/CustomListSection.tsx b/app/views/PushTroubleshootView/components/CustomListSection.tsx
deleted file mode 100644
index 4707fbd7074..00000000000
--- a/app/views/PushTroubleshootView/components/CustomListSection.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import { StyleSheet, useWindowDimensions, View } from 'react-native';
-import { type ReactElement } from 'react';
-
-import { Header } from '~/containers/List';
-
-const styles = StyleSheet.create({
-	container: {
-		marginBottom: 16
-	},
-	headerContainer: {
-		flexDirection: 'row',
-		justifyContent: 'space-between',
-		alignItems: 'center'
-	},
-	statusContainer: {
-		marginRight: 12
-	}
-});
-
-interface ICustomListSection {
-	children: (ReactElement | null)[] | ReactElement | null;
-	title: string;
-	translateTitle?: boolean;
-	statusColor?: string;
-}
-
-const CustomHeader = ({
-	title,
-	translateTitle,
-	statusColor
-}: {
-	title: string;
-	translateTitle?: boolean;
-	statusColor?: string;
-}) => {
-	const { fontScale } = useWindowDimensions();
-	const statusSize = {
-		width: 10 * fontScale,
-		height: 10 * fontScale,
-		borderRadius: 5 * fontScale
-	};
-	return (
-		<View style={styles.headerContainer}>
-			<Header {...{ title, translateTitle }} />
-			{statusColor ? <View style={[styles.statusContainer, { backgroundColor: statusColor }, statusSize]} /> : null}
-		</View>
-	);
-};
-
-const CustomListSection = ({ children, title, translateTitle, statusColor }: ICustomListSection) => (
-	<View style={styles.container}>
-		{title ? <CustomHeader {...{ title, translateTitle, statusColor }} /> : null}
-		{children}
-	</View>
-);
-
-export default CustomListSection;
diff --git a/app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx b/app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx
index c1ab52d07e1..07a81cfb55b 100644
--- a/app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx
+++ b/app/views/PushTroubleshootView/components/DeviceNotificationSettings.tsx
@@ -6,9 +6,10 @@ import i18n from '~/i18n';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { isIOS, showErrorAlert } from '~/lib/methods/helpers';
 import { useTheme } from '~/theme';
-import CustomListSection from './CustomListSection';
+import { CustomIcon } from '~/containers/CustomIcon';
+import { asNativeListSection } from '~/containers/List/native/rowMarkers';
 
-export default function DeviceNotificationSettings(): ReactElement {
+function DeviceNotificationSettings(): ReactElement {
 	const { colors } = useTheme();
 	const { deviceNotificationEnabled } = useAppSelector(state => ({
 		deviceNotificationEnabled: state.troubleshootingNotification.deviceNotificationEnabled
@@ -32,17 +33,24 @@ export default function DeviceNotificationSettings(): ReactElement {
 	};
 
 	return (
-		<CustomListSection
-			title='Device_notification_settings'
-			statusColor={!deviceNotificationEnabled ? colors.userPresenceBusy : colors.userPresenceOnline}>
+		<List.Section title='Device_notification_settings'>
 			<List.Separator />
 			<List.Item
 				title={!deviceNotificationEnabled ? 'Allow_push_notifications_for_rocket_chat' : 'No_further_action_is_needed'}
 				onPress={alertDeviceNotificationSettings}
 				testID='push-troubleshoot-view-allow-push-notifications'
 				disabled={deviceNotificationEnabled}
+				right={() => (
+					<CustomIcon
+						name='status-online'
+						size={16}
+						color={!deviceNotificationEnabled ? colors.userPresenceBusy : colors.userPresenceOnline}
+					/>
+				)}
 			/>
 			<List.Separator />
-		</CustomListSection>
+		</List.Section>
 	);
 }
+
+export default asNativeListSection(DeviceNotificationSettings);
diff --git a/app/views/PushTroubleshootView/components/NotificationDelay.tsx b/app/views/PushTroubleshootView/components/NotificationDelay.tsx
index 808da1d75da..cbfd9ecd4e4 100644
--- a/app/views/PushTroubleshootView/components/NotificationDelay.tsx
+++ b/app/views/PushTroubleshootView/components/NotificationDelay.tsx
@@ -3,8 +3,9 @@ import { type ReactElement } from 'react';
 
 import NewWindowIcon from '~/containers/NewWindowIcon';
 import * as List from '~/containers/List';
+import { asNativeListSection } from '~/containers/List/native/rowMarkers';
 
-export default function NotificationDelay(): ReactElement {
+function NotificationDelay(): ReactElement {
 	const openNotificationDocumentation = () => Linking.openURL('https://go.rocket.chat/i/push-notifications');
 
 	return (
@@ -22,3 +23,5 @@ export default function NotificationDelay(): ReactElement {
 		</List.Section>
 	);
 }
+
+export default asNativeListSection(NotificationDelay);
diff --git a/app/views/PushTroubleshootView/components/PushGatewayConnection.tsx b/app/views/PushTroubleshootView/components/PushGatewayConnection.tsx
index f688fe57ff1..17d04d2dede 100644
--- a/app/views/PushTroubleshootView/components/PushGatewayConnection.tsx
+++ b/app/views/PushTroubleshootView/components/PushGatewayConnection.tsx
@@ -8,9 +8,10 @@ import { usePermissions } from '~/lib/hooks/usePermissions';
 import { compareServerVersion, showErrorAlertWithEMessage } from '~/lib/methods/helpers';
 import { pushTest } from '~/lib/services/restApi';
 import { useTheme } from '~/theme';
-import CustomListSection from './CustomListSection';
+import { CustomIcon } from '~/containers/CustomIcon';
+import { asNativeListSection } from '~/containers/List/native/rowMarkers';
 
-export default function PushGatewayConnection(): ReactElement | null {
+function PushGatewayConnection(): ReactElement | null {
 	const [loading, setLoading] = useState(false);
 	const { colors } = useTheme();
 	const [testPushNotificationsPermission] = usePermissions(['test-push-notifications']);
@@ -48,18 +49,19 @@ export default function PushGatewayConnection(): ReactElement | null {
 	}
 
 	return (
-		<CustomListSection
-			title={!defaultPushGateway ? 'Custom_push_gateway_connection' : 'Push_gateway_connection'}
-			statusColor={statusColor}>
+		<List.Section title={!defaultPushGateway ? 'Custom_push_gateway_connection' : 'Push_gateway_connection'}>
 			<List.Separator />
 			<List.Item
 				title='Test_push_notification'
 				disabled={!pushGatewayEnabled || !testPushNotificationsPermission || loading}
 				onPress={handleTestPushNotification}
 				testID='push-troubleshoot-view-push-gateway-connection'
+				right={() => <CustomIcon name='status-online' size={16} color={statusColor} />}
 			/>
 			<List.Separator />
 			<List.Info info={infoColor} />
-		</CustomListSection>
+		</List.Section>
 	);
 }
+
+export default asNativeListSection(PushGatewayConnection);
diff --git a/app/views/PushTroubleshootView/index.tsx b/app/views/PushTroubleshootView/index.tsx
index 6e2d38fccec..e49964b3332 100644
--- a/app/views/PushTroubleshootView/index.tsx
+++ b/app/views/PushTroubleshootView/index.tsx
@@ -33,7 +33,7 @@ const PushTroubleshootView = ({ navigation }: IPushTroubleshootViewProps) => {
 	}, [navigation]);
 
 	return (
-		<SafeAreaView testID='push-troubleshoot-view'>
+		<SafeAreaView testID='push-troubleshoot-view' style={{ paddingTop: 16 }}>
 			<List.Container testID='push-troubleshoot-view-list'>
 				<DeviceNotificationSettings />
 				{/* <CommunityEditionPushQuota /> */}
diff --git a/app/views/ReadReceiptView/index.tsx b/app/views/ReadReceiptView/index.tsx
index 978efb738a7..7173af51894 100644
--- a/app/views/ReadReceiptView/index.tsx
+++ b/app/views/ReadReceiptView/index.tsx
@@ -1,4 +1,5 @@
-import { FlatList, Text, View, RefreshControl } from 'react-native';
+import { FlatList, View, RefreshControl } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { dequal } from 'dequal';
 import { connect } from 'react-redux';
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -108,7 +109,7 @@ class ReadReceiptView extends Component<IReadReceiptViewProps, IReadReceiptViewS
 		}
 		return (
 			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceTint }]} testID='read-receipt-view'>
-				<Text style={[styles.emptyText, { color: themes[theme].fontHint }]}>{I18n.t('No_Read_Receipts')}</Text>
+				<PlainText style={[styles.emptyText, { color: themes[theme].fontHint }]}>{I18n.t('No_Read_Receipts')}</PlainText>
 			</View>
 		);
 	};
@@ -124,16 +125,16 @@ class ReadReceiptView extends Component<IReadReceiptViewProps, IReadReceiptViewS
 				<Avatar text={item.user.username} size={40} />
 				<View style={styles.infoContainer}>
 					<View style={styles.item}>
-						<Text style={[styles.name, { color: themes[theme].fontTitlesLabels }]}>{item?.user?.name}</Text>
-						<Text style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text>
+						<PlainText style={[styles.name, { color: themes[theme].fontTitlesLabels }]}>{item?.user?.name}</PlainText>
+						<PlainText style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</PlainText>
 					</View>
-					<Text
+					<PlainText
 						style={[
 							styles.username,
 							{
 								color: themes[theme].fontSecondaryInfo
 							}
-						]}>{`@${item.user.username}`}</Text>
+						]}>{`@${item.user.username}`}</PlainText>
 				</View>
 			</View>
 		);
diff --git a/app/views/RegisterView/index.tsx b/app/views/RegisterView/index.tsx
index 6697c9f1448..1b4d3bbdc07 100644
--- a/app/views/RegisterView/index.tsx
+++ b/app/views/RegisterView/index.tsx
@@ -1,5 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
-import { AccessibilityInfo, Keyboard, Text, type TextInput, View } from 'react-native';
+import { AccessibilityInfo, Keyboard, type TextInput, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import parse from 'url-parse';
 import * as yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
@@ -11,10 +12,10 @@ import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { loginRequest } from '~/actions/login';
 import Button from '~/containers/Button';
 import FormContainer, { FormContainerInner } from '~/containers/FormContainer';
-import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import LoginServices from '~/containers/LoginServices';
 import { ControlledFormTextInput } from '~/containers/TextInput';
 import I18n from '~/i18n';
+import { outsideHeaderRightLegal } from '~/lib/methods/helpers/navigation';
 import { getShowLoginButton } from '~/selectors/login';
 import { type OutsideParamList } from '~/stacks/types';
 import { useTheme } from '~/theme';
@@ -168,20 +169,18 @@ const RegisterView = ({ route }: RegisterViewProps) => {
 	useLayoutEffect(() => {
 		navigation.setOptions({
 			title: route?.params?.title,
-			headerRight: () => (
-				<HeaderButton.Legal accessibilityLabel={I18n.t('Legal')} testID='register-view-more' navigation={navigation} />
-			)
+			...outsideHeaderRightLegal(navigation, 'register-view-more')
 		});
-	}, []);
+	}, [navigation, route?.params?.title]);
 
 	return (
 		<FormContainer testID='register-view'>
 			<FormContainerInner accessibilityLabel={I18n.t('Sign_Up')}>
 				<LoginServices separator />
 				<View accessible accessibilityLabel={I18n.t('Sign_Up')}>
-					<Text accessible accessibilityLabel={I18n.t('Sign_Up')} style={[styles.title, { color: colors.fontTitlesLabels }]}>
+					<PlainText accessible accessibilityLabel={I18n.t('Sign_Up')} style={[styles.title, { color: colors.fontTitlesLabels }]}>
 						{I18n.t('Sign_Up')}
-					</Text>
+					</PlainText>
 				</View>
 
 				<View style={styles.inputs}>
@@ -296,9 +295,9 @@ const RegisterView = ({ route }: RegisterViewProps) => {
 
 				{showLoginButton ? (
 					<View style={styles.bottomContainer}>
-						<Text style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
+						<PlainText style={[styles.bottomContainerText, { color: colors.fontSecondaryInfo }]}>
 							{I18n.t('Already_have_an_account')}
-						</Text>
+						</PlainText>
 						<Button title={I18n.t('Login')} type='secondary' onPress={login} style={styles.loginButton} />
 					</View>
 				) : null}
diff --git a/app/views/ReportUserView/UserInfo.tsx b/app/views/ReportUserView/UserInfo.tsx
index fd36c513186..8f503805fbf 100644
--- a/app/views/ReportUserView/UserInfo.tsx
+++ b/app/views/ReportUserView/UserInfo.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import Avatar from '~/containers/Avatar';
 import styles from './styles';
@@ -10,9 +11,9 @@ const UserInfo = ({ username, name }: { username: string; name: string }) => {
 	return (
 		<View style={styles.containerAvatarAndName}>
 			<Avatar text={username} size={32} />
-			<Text style={[styles.nameText, { color: colors.fontDefault }]} numberOfLines={1}>
+			<PlainText style={[styles.nameText, { color: colors.fontDefault }]} numberOfLines={1}>
 				{name || username}
-			</Text>
+			</PlainText>
 		</View>
 	);
 };
diff --git a/app/views/RoomActionsView/components/CallSection.tsx b/app/views/RoomActionsView/components/CallSection.tsx
index f8d8e8ec0be..61529bbbf8d 100644
--- a/app/views/RoomActionsView/components/CallSection.tsx
+++ b/app/views/RoomActionsView/components/CallSection.tsx
@@ -1,13 +1,14 @@
 import { type ReactElement, useEffect, useState } from 'react';
 
 import * as List from '~/containers/List';
+import { asNativeListSection } from '~/containers/List/native/rowMarkers';
 import { useVideoConf } from '~/lib/hooks/useVideoConf';
 import type { TSubscriptionModel } from '~/definitions';
 import { useNewMediaCall } from '~/lib/hooks/useNewMediaCall';
 import { useIsInActiveVoipCall } from '~/lib/services/voip/isInActiveVoipCall';
 import { videoConferenceGetCapabilities } from '~/lib/services/restApi';
 
-export default function CallSection({
+function CallSection({
 	room,
 	disabled,
 	itsMe
@@ -69,3 +70,5 @@ export default function CallSection({
 		</List.Section>
 	);
 }
+
+export default asNativeListSection(CallSection);
diff --git a/app/views/RoomActionsView/components/__snapshots__/CallSection.test.tsx.snap b/app/views/RoomActionsView/components/__snapshots__/CallSection.test.tsx.snap
index 240cacd0add..eca4f9aa107 100644
--- a/app/views/RoomActionsView/components/__snapshots__/CallSection.test.tsx.snap
+++ b/app/views/RoomActionsView/components/__snapshots__/CallSection.test.tsx.snap
@@ -51,60 +51,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            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={{}}
         >
@@ -191,6 +194,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Voice call"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -267,7 +273,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -316,7 +322,7 @@ exports[`Story Snapshots: Disabled should match snapshot 1`] = `
       }
     />
     <ExternalKeyboardView
-      canBeFocused={true}
+      canBeFocused={false}
       enableA11yFocus={false}
       enableContextMenu={false}
       group={false}
@@ -337,60 +343,63 @@ exports[`Story Snapshots: Disabled should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": true,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            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={{}}
         >
@@ -479,6 +488,9 @@ exports[`Story Snapshots: Disabled should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Voice call"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -555,7 +567,7 @@ exports[`Story Snapshots: Disabled should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -625,60 +637,63 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            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={{}}
         >
@@ -765,6 +780,9 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Voice call"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -841,7 +859,7 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
diff --git a/app/views/RoomActionsView/index.tsx b/app/views/RoomActionsView/index.tsx
index 2fd9d029016..ece44ab4f6a 100644
--- a/app/views/RoomActionsView/index.tsx
+++ b/app/views/RoomActionsView/index.tsx
@@ -2,7 +2,8 @@
 import { Q } from '@nozbe/watermelondb';
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import isEmpty from 'lodash/isEmpty';
-import { Share, Text, View } from 'react-native';
+import { Share, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { connect } from 'react-redux';
 import { type Observable, type Subscription } from 'rxjs';
 import { type CompositeNavigationProp } from '@react-navigation/native';
@@ -12,6 +13,7 @@ import { leaveRoom } from '~/actions/room';
 import Avatar from '~/containers/Avatar';
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import * as List from '~/containers/List';
+import Disclosure from '~/containers/NativeListRow/Disclosure';
 import { MarkdownPreview } from '~/containers/markdown';
 import RoomTypeIcon from '~/containers/RoomTypeIcon';
 import SafeAreaView from '~/containers/SafeAreaView';
@@ -49,6 +51,7 @@ import {
 	hasPermission,
 	isGroupChat,
 	compareServerVersion,
+	isIOS,
 	isTeamRoom
 } from '~/lib/methods/helpers';
 import {
@@ -787,17 +790,17 @@ class RoomActionsView extends Component<IRoomActionsViewProps, IRoomActionsViewS
 							}
 						})
 					}
-					style={{ backgroundColor: themes[theme].surfaceRoom }}
+					style={{ backgroundColor: isIOS ? 'transparent' : themes[theme].surfaceRoom }}
 					accessibilityLabel={I18n.t('Room_Info')}
-					enabled={!isGroupChatHandler}
+					disabled={isGroupChatHandler}
 					testID='room-actions-info'>
 					<View style={styles.roomInfoContainer}>
 						<Avatar text={avatar} style={styles.avatar} size={50 * fontScale} type={t} rid={rid} />
 						<View style={styles.roomTitleContainer}>
 							{room.t === 'd' ? (
-								<Text style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+								<PlainText style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 									{room.fname}
-								</Text>
+								</PlainText>
 							) : (
 								<View style={styles.roomTitleRow}>
 									<RoomTypeIcon
@@ -807,9 +810,9 @@ class RoomActionsView extends Component<IRoomActionsViewProps, IRoomActionsViewS
 										sourceType={source}
 										abacAttributes={room.abacAttributes}
 									/>
-									<Text style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+									<PlainText style={[styles.roomTitle, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 										{getRoomTitle(room)}
-									</Text>
+									</PlainText>
 								</View>
 							)}
 							<MarkdownPreview
@@ -832,7 +835,7 @@ class RoomActionsView extends Component<IRoomActionsViewProps, IRoomActionsViewS
 								/>
 							)}
 						</View>
-						{isGroupChatHandler ? null : <List.Icon name='chevron-right' style={styles.actionIndicator} />}
+						{isGroupChatHandler ? null : <Disclosure />}
 					</View>
 				</Touch>
 				<List.Separator />
diff --git a/app/views/RoomActionsView/styles.ts b/app/views/RoomActionsView/styles.ts
index 983a6d5478b..7794f72a8f8 100644
--- a/app/views/RoomActionsView/styles.ts
+++ b/app/views/RoomActionsView/styles.ts
@@ -1,12 +1,13 @@
-import { I18nManager, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 import { PADDING_HORIZONTAL } from '~/containers/List/constants';
+import { isIOS26OrLater } from '~/lib/methods/helpers/deviceInfo';
 import sharedStyles from '../Styles';
 
 export default StyleSheet.create({
 	roomInfoContainer: {
 		paddingHorizontal: PADDING_HORIZONTAL,
-		paddingVertical: 4,
+		paddingVertical: isIOS26OrLater ? 12 : 4,
 		flexDirection: 'row',
 		alignItems: 'center'
 	},
@@ -28,8 +29,5 @@ export default StyleSheet.create({
 		paddingRight: 16,
 		flexDirection: 'row',
 		alignItems: 'center'
-	},
-	actionIndicator: {
-		...(I18nManager.isRTL ? { transform: [{ rotate: '180deg' }] } : {})
 	}
 });
diff --git a/app/views/RoomInfoEditView/SwitchContainer.tsx b/app/views/RoomInfoEditView/SwitchContainer.tsx
index 4d8a43020f5..0f74de43a2b 100644
--- a/app/views/RoomInfoEditView/SwitchContainer.tsx
+++ b/app/views/RoomInfoEditView/SwitchContainer.tsx
@@ -1,5 +1,6 @@
 import { type FC, memo, type ReactElement } from 'react';
-import { Text, type TextStyle, View, type ViewStyle } from 'react-native';
+import { type TextStyle, View, type ViewStyle } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import styles from './styles';
@@ -39,13 +40,13 @@ const SwitchContainer: FC<ISwitchContainer> = memo(
 							accessible
 							accessibilityLabel={`${leftLabelPrimary}. ${leftLabelSecondary ?? ''}. `}
 							style={[styles.switchLabelContainer, labelContainerStyle]}>
-							<Text style={[styles.switchLabelPrimary, { color: colors.fontTitlesLabels }, leftLabelStyle]}>
+							<PlainText style={[styles.switchLabelPrimary, { color: colors.fontTitlesLabels }, leftLabelStyle]}>
 								{leftLabelPrimary}
-							</Text>
+							</PlainText>
 							{leftLabelSecondary && (
-								<Text style={[styles.switchLabelSecondary, { color: colors.fontSecondaryInfo }, leftLabelStyle]}>
+								<PlainText style={[styles.switchLabelSecondary, { color: colors.fontSecondaryInfo }, leftLabelStyle]}>
 									{leftLabelSecondary}
-								</Text>
+								</PlainText>
 							)}
 						</View>
 					)}
diff --git a/app/views/RoomInfoEditView/index.tsx b/app/views/RoomInfoEditView/index.tsx
index 7e366b621c1..df10843b103 100644
--- a/app/views/RoomInfoEditView/index.tsx
+++ b/app/views/RoomInfoEditView/index.tsx
@@ -1,7 +1,8 @@
 import { useLayoutEffect, useState } from 'react';
 import { BlockContext } from '@rocket.chat/ui-kit';
 import { dequal } from 'dequal';
-import { AccessibilityInfo, Alert, Keyboard, ScrollView, Text, View } from 'react-native';
+import { AccessibilityInfo, Alert, Keyboard, ScrollView, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useForm } from 'react-hook-form';
 import { type SetValueConfig } from 'react-hook-form';
@@ -452,7 +453,7 @@ const RoomInfoEditView = ({ navigation, route }: IRoomInfoEditViewProps) => {
 						) : null}
 						{room.broadcast
 							? [
-									<Text style={styles.broadcast}>{I18n.t('Broadcast')}</Text>,
+									<PlainText style={styles.broadcast}>{I18n.t('Broadcast')}</PlainText>,
 									<View style={[styles.divider, { borderColor: colors.strokeLight }]} />
 								]
 							: null}
diff --git a/app/views/RoomInfoView/Direct.tsx b/app/views/RoomInfoView/Direct.tsx
index 68e14a88e00..ae3c6ffbf79 100644
--- a/app/views/RoomInfoView/Direct.tsx
+++ b/app/views/RoomInfoView/Direct.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { type ReactElement } from 'react';
 
 import I18n from '~/i18n';
@@ -15,7 +16,7 @@ const Roles = ({ roles }: { roles?: string[] }) => {
 	if (roles?.length) {
 		return (
 			<View style={styles.item} testID='user-roles'>
-				<Text style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Roles')}</Text>
+				<PlainText style={[styles.itemLabel, { color: colors.fontTitlesLabels }]}>{I18n.t('Roles')}</PlainText>
 				<RoomInfoTagContainer>
 					{roles.map(role =>
 						role ? <RoomInfoTag name={role} key={role} testID={`user-role-${role.replace(/ /g, '-')}`} /> : null
diff --git a/app/views/RoomInfoView/Livechat.tsx b/app/views/RoomInfoView/Livechat.tsx
index 9983a3b119d..ee8a603d69f 100644
--- a/app/views/RoomInfoView/Livechat.tsx
+++ b/app/views/RoomInfoView/Livechat.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement, useEffect, useState } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type ISubscription } from '~/definitions';
 import { type ILivechatDepartment } from '~/definitions/ILivechatDepartment';
@@ -22,7 +23,7 @@ const styles = StyleSheet.create({
 
 const Title = ({ title }: { title: string }) => {
 	const { colors } = useTheme();
-	return <Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</Text>;
+	return <PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</PlainText>;
 };
 
 const Livechat = ({ room, roomUser }: { room: ISubscription; roomUser: ILivechatVisitorModified }): ReactElement => {
diff --git a/app/views/RoomInfoView/components/BaseButton.tsx b/app/views/RoomInfoView/components/BaseButton.tsx
index 4e0401d5cc1..0624f9f5acd 100644
--- a/app/views/RoomInfoView/components/BaseButton.tsx
+++ b/app/views/RoomInfoView/components/BaseButton.tsx
@@ -1,7 +1,7 @@
-import { Text } from 'react-native';
-import { BorderlessButton } from 'react-native-gesture-handler';
+import { PlainText } from '~/containers/PlainText';
 import { type ReactElement } from 'react';
 
+import { BorderlessButton } from '~/containers/GestureButtons';
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
 import { useTheme } from '~/theme';
 import styles from '../styles';
@@ -26,11 +26,11 @@ export function BaseButton({
 
 	if (showIcon)
 		return (
-			<BorderlessButton enabled={enabled} testID={`room-info-view-${iconName}`} onPress={onPress} style={styles.roomButton}>
+			<BorderlessButton disabled={!enabled} testID={`room-info-view-${iconName}`} onPress={onPress} style={styles.roomButton}>
 				<CustomIcon name={iconName} size={30} color={color} />
-				<Text numberOfLines={1} style={[styles.roomButtonText, { color }]}>
+				<PlainText numberOfLines={1} style={[styles.roomButtonText, { color }]}>
 					{label}
-				</Text>
+				</PlainText>
 			</BorderlessButton>
 		);
 	return null;
diff --git a/app/views/RoomInfoView/components/ItemLabel.tsx b/app/views/RoomInfoView/components/ItemLabel.tsx
index e04faf026f4..20ffc659f73 100644
--- a/app/views/RoomInfoView/components/ItemLabel.tsx
+++ b/app/views/RoomInfoView/components/ItemLabel.tsx
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useTheme } from '~/theme';
 import styles from '../styles';
@@ -11,8 +11,8 @@ interface IItemLabel {
 export const ItemLabel = ({ label, testID }: IItemLabel) => {
 	const { colors } = useTheme();
 	return (
-		<Text accessibilityLabel={label} style={[styles.itemLabel, { color: colors.fontTitlesLabels }]} testID={testID}>
+		<PlainText accessibilityLabel={label} style={[styles.itemLabel, { color: colors.fontTitlesLabels }]} testID={testID}>
 			{label}
-		</Text>
+		</PlainText>
 	);
 };
diff --git a/app/views/RoomInfoView/components/RoomInfoABAC.tsx b/app/views/RoomInfoView/components/RoomInfoABAC.tsx
index 995c0369be2..f7ae43490cf 100644
--- a/app/views/RoomInfoView/components/RoomInfoABAC.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoABAC.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import * as List from '~/containers/List';
 import styles from '../styles';
@@ -29,12 +30,14 @@ export const RoomInfoABAC = ({
 					<RoomInfoTag name={I18n.t('ABAC_managed')} icon={teamMain ? 'team-shield' : 'hash-shield'} />
 				</RoomInfoTagContainer>
 
-				<Text style={[styles.abacDescription, { color: colors.fontSecondaryInfo }]}>{I18n.t('ABAC_managed_description')}</Text>
+				<PlainText style={[styles.abacDescription, { color: colors.fontSecondaryInfo }]}>
+					{I18n.t('ABAC_managed_description')}
+				</PlainText>
 
 				<ItemLabel label={I18n.t('ABAC_room_attributes')} />
 				{abacAttributes.map(attribute => (
 					<View key={attribute.key} style={{ gap: 8 }}>
-						<Text style={[styles.abacDescription, { color: colors.fontDefault }]}>{attribute.key}</Text>
+						<PlainText style={[styles.abacDescription, { color: colors.fontDefault }]}>{attribute.key}</PlainText>
 						<RoomInfoTagContainer>
 							{attribute.values.map(value => (
 								<RoomInfoTag name={value} key={value} />
diff --git a/app/views/RoomInfoView/components/RoomInfoTag.tsx b/app/views/RoomInfoView/components/RoomInfoTag.tsx
index 8623c311a7b..904e8d9b5f1 100644
--- a/app/views/RoomInfoView/components/RoomInfoTag.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoTag.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import type { ReactNode } from 'react';
 
 import { useTheme } from '~/theme';
@@ -12,7 +13,7 @@ export const RoomInfoTag = ({ name, icon, testID }: { name: string; icon?: TIcon
 	return (
 		<View style={[styles.roleBadge, { backgroundColor: colors.surfaceSelected }]} testID={testID}>
 			{icon ? <CustomIcon name={icon} size={16} /> : null}
-			<Text style={[styles.role, { color: colors.buttonFontSecondary }]}>{name}</Text>
+			<PlainText style={[styles.role, { color: colors.buttonFontSecondary }]}>{name}</PlainText>
 		</View>
 	);
 };
diff --git a/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx b/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
index 612b3268f26..aa06985bc3e 100644
--- a/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
+++ b/app/views/RoomInfoView/components/RoomInfoViewTitle.tsx
@@ -1,4 +1,5 @@
 import { Text, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { type ReactElement } from 'react';
 
@@ -84,9 +85,9 @@ const RoomInfoViewTitle = ({
 				sourceType={room?.source}
 				abacAttributes={room?.abacAttributes}
 			/>
-			<Text testID='room-info-view-name' style={[styles.roomTitle, { color: colors.fontTitlesLabels }]} key='room-info-name'>
+			<PlainText testID='room-info-view-name' style={[styles.roomTitle, { color: colors.fontTitlesLabels }]} key='room-info-name'>
 				{getRoomTitle(room)}
-			</Text>
+			</PlainText>
 		</View>
 	);
 };
diff --git a/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap b/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap
index c627c22d996..47b0fabef0a 100644
--- a/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap
+++ b/app/views/RoomInfoView/components/__snapshots__/RoomInfoABAC.test.tsx.snap
@@ -94,6 +94,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="ABAC managed"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -118,6 +121,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
             </View>
           </View>
           <Text
+            accessibilityLabel="Only compliant users have access to attribute-based access controlled rooms. Attributes determine room access."
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -141,6 +147,8 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
           </Text>
           <Text
             accessibilityLabel="Room attributes"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -169,6 +177,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Chat sensitivity"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -216,6 +227,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Classified"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -255,6 +269,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Top Secret"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -365,6 +382,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="ABAC managed"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -389,6 +409,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
             </View>
           </View>
           <Text
+            accessibilityLabel="Only compliant users have access to attribute-based access controlled rooms. Attributes determine room access."
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -412,6 +435,8 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
           </Text>
           <Text
             accessibilityLabel="Room attributes"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -440,6 +465,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Attribute"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -487,6 +515,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -526,6 +557,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -565,6 +599,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -604,6 +641,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -643,6 +683,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -682,6 +725,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -721,6 +767,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -760,6 +809,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -799,6 +851,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -838,6 +893,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 10"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -870,6 +928,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Chat sensitivity"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -917,6 +978,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Classified"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -956,6 +1020,9 @@ exports[`Story Snapshots: Black should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Top Secret"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1081,6 +1148,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="ABAC managed"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1105,6 +1175,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
             </View>
           </View>
           <Text
+            accessibilityLabel="Only compliant users have access to attribute-based access controlled rooms. Attributes determine room access."
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -1128,6 +1201,8 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
           </Text>
           <Text
             accessibilityLabel="Room attributes"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -1156,6 +1231,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Chat sensitivity"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1203,6 +1281,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Classified"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1242,6 +1323,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Top Secret"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1352,6 +1436,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="ABAC managed"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -1376,6 +1463,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
             </View>
           </View>
           <Text
+            accessibilityLabel="Only compliant users have access to attribute-based access controlled rooms. Attributes determine room access."
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -1399,6 +1489,8 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
           </Text>
           <Text
             accessibilityLabel="Room attributes"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -1427,6 +1519,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Attribute"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1474,6 +1569,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1513,6 +1611,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1552,6 +1653,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1591,6 +1695,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1630,6 +1737,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1669,6 +1779,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1708,6 +1821,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1747,6 +1863,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1786,6 +1905,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1825,6 +1947,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 10"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1857,6 +1982,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Chat sensitivity"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -1904,6 +2032,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Classified"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1943,6 +2074,9 @@ exports[`Story Snapshots: Dark should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Top Secret"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2068,6 +2202,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="ABAC managed"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2092,6 +2229,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
             </View>
           </View>
           <Text
+            accessibilityLabel="Only compliant users have access to attribute-based access controlled rooms. Attributes determine room access."
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -2115,6 +2255,8 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
           </Text>
           <Text
             accessibilityLabel="Room attributes"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -2143,6 +2285,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Chat sensitivity"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -2190,6 +2335,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Classified"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2229,6 +2377,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Top Secret"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2339,6 +2490,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 
               </Text>
               <Text
+                accessibilityLabel="ABAC managed"
+                accessibilityRole="text"
+                accessible={true}
                 style={
                   [
                     {
@@ -2363,6 +2517,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
             </View>
           </View>
           <Text
+            accessibilityLabel="Only compliant users have access to attribute-based access controlled rooms. Attributes determine room access."
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -2386,6 +2543,8 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
           </Text>
           <Text
             accessibilityLabel="Room attributes"
+            accessibilityRole="text"
+            accessible={true}
             style={
               [
                 {
@@ -2414,6 +2573,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Attribute"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -2461,6 +2623,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 1"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2500,6 +2665,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 2"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2539,6 +2707,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 3"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2578,6 +2749,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 4"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2617,6 +2791,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 5"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2656,6 +2833,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 6"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2695,6 +2875,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 7"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2734,6 +2917,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 8"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2773,6 +2959,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 9"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2812,6 +3001,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Value 10"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2844,6 +3036,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
             }
           >
             <Text
+              accessibilityLabel="Chat sensitivity"
+              accessibilityRole="text"
+              accessible={true}
               style={
                 [
                   {
@@ -2891,6 +3086,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Classified"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2930,6 +3128,9 @@ exports[`Story Snapshots: Light should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Top Secret"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
diff --git a/app/views/RoomInfoView/components/__snapshots__/RoomInfoButtons.test.tsx.snap b/app/views/RoomInfoView/components/__snapshots__/RoomInfoButtons.test.tsx.snap
index 635478e56d7..19b206c086a 100644
--- a/app/views/RoomInfoView/components/__snapshots__/RoomInfoButtons.test.tsx.snap
+++ b/app/views/RoomInfoView/components/__snapshots__/RoomInfoButtons.test.tsx.snap
@@ -17,32 +17,45 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-message"
     >
@@ -73,6 +86,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Message"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -87,33 +103,46 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
       >
         Message
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-phone"
     >
@@ -144,6 +173,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Voice call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -158,33 +190,46 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
       >
         Voice call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[MockFunction]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-video"
     >
@@ -215,6 +260,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Video call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -229,33 +277,46 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
       >
         Video call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-kebab"
     >
@@ -286,6 +347,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="More"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -300,7 +364,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
       >
         More
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -322,32 +386,45 @@ exports[`Story Snapshots: ItsMe should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-message"
     >
@@ -378,6 +455,9 @@ exports[`Story Snapshots: ItsMe should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Message"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -392,33 +472,46 @@ exports[`Story Snapshots: ItsMe should match snapshot 1`] = `
       >
         Message
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[MockFunction]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-video"
     >
@@ -449,6 +542,9 @@ exports[`Story Snapshots: ItsMe should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Video call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -463,7 +559,7 @@ exports[`Story Snapshots: ItsMe should match snapshot 1`] = `
       >
         Video call
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -485,32 +581,45 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-message"
     >
@@ -541,6 +650,9 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Message"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -555,33 +667,46 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
       >
         Message
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-phone"
     >
@@ -612,6 +737,9 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Voice call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -626,33 +754,46 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
       >
         Voice call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[MockFunction]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-video"
     >
@@ -683,6 +824,9 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Video call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -697,33 +841,46 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
       >
         Video call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-kebab"
     >
@@ -754,6 +911,9 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="More"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -768,7 +928,7 @@ exports[`Story Snapshots: NoVoiceCall should match snapshot 1`] = `
       >
         More
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -790,32 +950,45 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-message"
     >
@@ -846,6 +1019,9 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Message"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -860,33 +1036,46 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
       >
         Message
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-phone"
     >
@@ -917,6 +1106,9 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Voice call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -931,33 +1123,46 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
       >
         Voice call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[MockFunction]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-video"
     >
@@ -988,6 +1193,9 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Video call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1002,33 +1210,46 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
       >
         Video call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-ignore"
     >
@@ -1059,6 +1280,9 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Block"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1073,7 +1297,7 @@ exports[`Story Snapshots: OlderServer should match snapshot 1`] = `
       >
         Block
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -1095,32 +1319,45 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-message"
     >
@@ -1151,6 +1388,9 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Message"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1165,33 +1405,46 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
       >
         Message
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-phone"
     >
@@ -1222,6 +1475,9 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Voice call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1236,33 +1492,46 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
       >
         Voice call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[MockFunction]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-video"
     >
@@ -1293,6 +1562,9 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Video call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1307,33 +1579,46 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
       >
         Video call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-kebab"
     >
@@ -1364,6 +1649,9 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="More"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1378,7 +1666,7 @@ exports[`Story Snapshots: WithBlockedUser should match snapshot 1`] = `
       >
         More
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
@@ -1400,32 +1688,45 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
       }
     }
   >
-    <RNGestureHandlerButton
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-message"
     >
@@ -1456,6 +1757,9 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Message"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1470,33 +1774,46 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
       >
         Message
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-phone"
     >
@@ -1527,6 +1844,9 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Voice call"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1541,33 +1861,46 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
       >
         Voice call
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-ignore"
     >
@@ -1598,6 +1931,9 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Block"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1612,33 +1948,46 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
       >
         Block
       </Text>
-    </RNGestureHandlerButton>
-    <RNGestureHandlerButton
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": false,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
       activeOpacity={0.3}
-      borderless={true}
+      animationDuration={0}
       collapsable={false}
-      delayLongPress={600}
-      enabled={true}
-      handlerTag={-1}
-      handlerType="NativeViewGestureHandler"
-      innerRef={null}
-      onActiveStateChange={[Function]}
-      onGestureHandlerEvent={[Function]}
-      onGestureHandlerStateChange={[Function]}
-      onPress={[Function]}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        [
-          {
-            "alignItems": "center",
-            "justifyContent": "space-between",
-            "marginHorizontal": 4,
-            "opacity": 1,
-            "width": 80,
-          },
-          {
-            "cursor": undefined,
-          },
-        ]
+        {
+          "alignItems": "center",
+          "justifyContent": "space-between",
+          "marginHorizontal": 4,
+          "width": 80,
+        }
       }
       testID="room-info-view-warning"
     >
@@ -1669,6 +2018,9 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
         
       </Text>
       <Text
+        accessibilityLabel="Report"
+        accessibilityRole="text"
+        accessible={true}
         numberOfLines={1}
         style={
           [
@@ -1683,7 +2035,7 @@ exports[`Story Snapshots: WithRoomFromRid should match snapshot 1`] = `
       >
         Report
       </Text>
-    </RNGestureHandlerButton>
+    </View>
   </View>
 </View>
 `;
diff --git a/app/views/RoomInfoView/components/__snapshots__/RoomInfoViewAvatar.test.tsx.snap b/app/views/RoomInfoView/components/__snapshots__/RoomInfoViewAvatar.test.tsx.snap
index 510bdb3df62..70a4c147bcf 100644
--- a/app/views/RoomInfoView/components/__snapshots__/RoomInfoViewAvatar.test.tsx.snap
+++ b/app/views/RoomInfoView/components/__snapshots__/RoomInfoViewAvatar.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
       onProgress={[Function]}
       placeholder={[]}
       priority="high"
+      sfEffect={null}
       source={
         [
           {
@@ -63,6 +64,8 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
           "width": 120,
         }
       }
+      symbolSize={null}
+      symbolWeight={null}
       transition={null}
       width={120}
     />
@@ -116,6 +119,7 @@ exports[`Story Snapshots: WithEdit should match snapshot 1`] = `
       onProgress={[Function]}
       placeholder={[]}
       priority="high"
+      sfEffect={null}
       source={
         [
           {
@@ -133,19 +137,37 @@ exports[`Story Snapshots: WithEdit should match snapshot 1`] = `
           "width": 120,
         }
       }
+      symbolSize={null}
+      symbolWeight={null}
       transition={null}
       width={120}
     />
   </View>
-  <RNGestureHandlerButton
+  <View
     accessibilityLabel="Edit room photo"
     accessibilityRole="button"
-    activeOpacity={0.105}
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    activeUnderlayOpacity={0.105}
+    animationDuration={0}
     collapsable={false}
-    delayLongPress={600}
-    enabled={true}
-    handlerTag={-1}
-    handlerType="NativeViewGestureHandler"
+    focusable={true}
     hitSlop={
       {
         "bottom": 4,
@@ -154,51 +176,46 @@ exports[`Story Snapshots: WithEdit should match snapshot 1`] = `
         "top": 4,
       }
     }
-    innerRef={null}
-    onActiveStateChange={[Function]}
-    onGestureHandlerEvent={[Function]}
-    onGestureHandlerStateChange={[Function]}
-    onPress={[Function]}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
     style={
       [
         {
-          "backgroundColor": "#E4E7EA",
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 14,
+        },
+        {
           "borderRadius": 4,
+          "marginBottom": 12,
+        },
+        {
+          "backgroundColor": "#E4E7EA",
+        },
+        {},
+        {
           "height": undefined,
-          "justifyContent": "center",
           "marginBottom": 0,
           "marginTop": 16,
           "paddingHorizontal": 12,
           "paddingVertical": 8,
         },
-        {
-          "cursor": undefined,
-        },
       ]
     }
     testID="avatar-edit-button"
     underlayColor="black"
   >
-    <View
-      collapsable={false}
-      style={
-        {
-          "backgroundColor": "black",
-          "borderBottomLeftRadius": undefined,
-          "borderBottomRightRadius": undefined,
-          "borderRadius": 4,
-          "borderTopLeftRadius": undefined,
-          "borderTopRightRadius": undefined,
-          "bottom": 0,
-          "left": 0,
-          "opacity": 0,
-          "position": "absolute",
-          "right": 0,
-          "top": 0,
-        }
-      }
-    />
     <Text
+      accessibilityLabel="Edit"
+      accessibilityRole="text"
+      accessible={true}
       style={
         [
           {
@@ -229,6 +246,6 @@ exports[`Story Snapshots: WithEdit should match snapshot 1`] = `
     >
       Edit
     </Text>
-  </RNGestureHandlerButton>
+  </View>
 </View>
 `;
diff --git a/app/views/RoomMembersView/components/ActionsSection.ios.tsx b/app/views/RoomMembersView/components/ActionsSection.ios.tsx
new file mode 100644
index 00000000000..24b502aa2a8
--- /dev/null
+++ b/app/views/RoomMembersView/components/ActionsSection.ios.tsx
@@ -0,0 +1,40 @@
+import { View } from 'react-native';
+import { type ReactElement } from 'react';
+
+import NativeListRow from '~/containers/NativeListRow';
+import { CustomIcon } from '~/containers/CustomIcon';
+import Disclosure from '~/containers/NativeListRow/Disclosure.ios';
+import RowSeparator from '~/containers/NativeListRow/Separator';
+import i18n from '~/i18n';
+import { useTheme } from '~/theme';
+import { type IActionsSection, useMemberActions } from './useMemberActions';
+
+export default function ActionsSection(props: IActionsSection): ReactElement | null {
+	const { colors } = useTheme();
+	const actions = useMemberActions(props);
+
+	if (!actions.length) {
+		return null;
+	}
+
+	return (
+		<View style={{ paddingTop: 16, paddingBottom: 24 }}>
+			{actions.map((action, index) => (
+				<View key={action.testID}>
+					{index > 0 ? <RowSeparator /> : null}
+					<NativeListRow
+						title={i18n.t(action.title)}
+						onPress={action.onPress}
+						testID={action.testID}
+						accessibilityLabel={action.disabledReason ?? i18n.t(action.title)}
+						disabled={action.disabled}
+						isFirst={index === 0}
+						isLast={index === actions.length - 1}
+						leading={<CustomIcon name={action.icon} size={24} color={colors.fontDefault} />}
+						trailing={<Disclosure />}
+					/>
+				</View>
+			))}
+		</View>
+	);
+}
diff --git a/app/views/RoomMembersView/components/ActionsSection.tsx b/app/views/RoomMembersView/components/ActionsSection.tsx
index a78300c488d..db0c677c890 100644
--- a/app/views/RoomMembersView/components/ActionsSection.tsx
+++ b/app/views/RoomMembersView/components/ActionsSection.tsx
@@ -1,114 +1,29 @@
-import { type CompositeNavigationProp, useNavigation } from '@react-navigation/native';
-import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { View } from 'react-native';
-import { useDispatch } from 'react-redux';
 import { type ReactElement } from 'react';
 
-import { setLoading } from '~/actions/selectedUsers';
 import * as List from '~/containers/List';
-import { type TSubscriptionModel } from '~/definitions';
-import i18n from '~/i18n';
-import { usePermissions } from '~/lib/hooks/usePermissions';
-import log, { events, logEvent } from '~/lib/methods/helpers/log';
-import { addUsersToRoom } from '~/lib/services/restApi';
-import { type MasterDetailInsideStackParamList } from '~/stacks/MasterDetailStack/types';
-import { type ChatsStackParamList } from '~/stacks/types';
+import { type IActionsSection, useMemberActions } from './useMemberActions';
 
-type TNavigation = CompositeNavigationProp<
-	NativeStackNavigationProp<ChatsStackParamList, 'RoomActionsView'>,
-	NativeStackNavigationProp<MasterDetailInsideStackParamList>
->;
-
-interface IActionsSection {
-	rid: TSubscriptionModel['rid'];
-	t: TSubscriptionModel['t'];
-	joined: boolean;
-	abacAttributes: TSubscriptionModel['abacAttributes'];
-}
-
-export default function ActionsSection({ rid, t, joined, abacAttributes }: IActionsSection): ReactElement {
-	const { navigate, pop } = useNavigation<TNavigation>();
-	const dispatch = useDispatch();
-	const [addUserToJoinedRoomPermission, addUserToAnyCRoomPermission, addUserToAnyPRoomPermission, createInviteLinksPermission] =
-		usePermissions(['add-user-to-joined-room', 'add-user-to-any-c-room', 'add-user-to-any-p-room', 'create-invite-links'], rid);
-
-	const canAddUser =
-		(joined && addUserToJoinedRoomPermission) ||
-		(t === 'c' && addUserToAnyCRoomPermission) ||
-		(t === 'p' && addUserToAnyPRoomPermission) ||
-		false;
-
-	const canInviteUser = createInviteLinksPermission;
-
-	const handleOnPress = ({
-		route,
-		params
-	}: {
-		route: keyof ChatsStackParamList;
-		params: ChatsStackParamList[keyof ChatsStackParamList];
-	}) => {
-		// @ts-ignore
-		navigate(route, params);
-		// @ts-ignore
-		logEvent(events[`RM_GO_${route.replace('View', '').toUpperCase()}`]);
-	};
-
-	const addUser = async () => {
-		try {
-			dispatch(setLoading(true));
-			await addUsersToRoom(rid);
-			pop();
-		} catch (e) {
-			log(e);
-		} finally {
-			dispatch(setLoading(false));
-		}
-	};
+export default function ActionsSection(props: IActionsSection): ReactElement {
+	const actions = useMemberActions(props);
 
 	return (
-		<View style={{ paddingTop: canAddUser || canInviteUser ? 16 : 0, paddingBottom: canAddUser || canInviteUser ? 16 : 0 }}>
-			{['c', 'p'].includes(t) && canAddUser ? (
-				<>
-					<List.Separator />
-					<List.Item
-						title='Add_users'
-						onPress={() =>
-							handleOnPress({
-								route: 'SelectedUsersView',
-								params: {
-									title: i18n.t('Add_users'),
-									nextAction: addUser,
-									showSkipText: false
-								}
-							})
-						}
-						testID='room-actions-add-user'
-						left={() => <List.Icon name='add' />}
-						showActionIndicator
-					/>
-					<List.Separator />
-				</>
-			) : null}
-
-			{['c', 'p'].includes(t) && canInviteUser ? (
-				<>
+		<View style={{ paddingTop: actions.length ? 16 : 0 }}>
+			{actions.map((action, index) => (
+				<View key={action.testID}>
+					{index === 0 ? <List.Separator /> : null}
 					<List.Item
-						title='Invite_users'
-						onPress={() =>
-							handleOnPress({
-								route: 'InviteUsersView',
-								params: { rid }
-							})
-						}
-						testID='room-actions-invite-user'
-						left={() => <List.Icon name='user-add' />}
+						title={action.title}
+						onPress={action.onPress}
+						testID={action.testID}
+						left={() => <List.Icon name={action.icon} />}
 						showActionIndicator
-						disabled={!!abacAttributes}
-						disabledReason={abacAttributes ? i18n.t('ABAC_disabled_action_reason') : undefined}
+						disabled={action.disabled}
+						disabledReason={action.disabledReason}
 					/>
 					<List.Separator />
-				</>
-			) : null}
+				</View>
+			))}
 		</View>
 	);
 }
diff --git a/app/views/RoomMembersView/components/useMemberActions.ts b/app/views/RoomMembersView/components/useMemberActions.ts
new file mode 100644
index 00000000000..225074bafa1
--- /dev/null
+++ b/app/views/RoomMembersView/components/useMemberActions.ts
@@ -0,0 +1,101 @@
+import { type CompositeNavigationProp, useNavigation } from '@react-navigation/native';
+import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useDispatch } from 'react-redux';
+
+import { setLoading } from '~/actions/selectedUsers';
+import { type TIconsName } from '~/containers/CustomIcon';
+import { type TSubscriptionModel } from '~/definitions';
+import i18n from '~/i18n';
+import { usePermissions } from '~/lib/hooks/usePermissions';
+import log, { events, logEvent } from '~/lib/methods/helpers/log';
+import { addUsersToRoom } from '~/lib/services/restApi';
+import { type MasterDetailInsideStackParamList } from '~/stacks/MasterDetailStack/types';
+import { type ChatsStackParamList } from '~/stacks/types';
+
+type TNavigation = CompositeNavigationProp<
+	NativeStackNavigationProp<ChatsStackParamList, 'RoomActionsView'>,
+	NativeStackNavigationProp<MasterDetailInsideStackParamList>
+>;
+
+export interface IActionsSection {
+	rid: TSubscriptionModel['rid'];
+	t: TSubscriptionModel['t'];
+	joined: boolean;
+	abacAttributes: TSubscriptionModel['abacAttributes'];
+}
+
+export interface IMemberAction {
+	title: string;
+	icon: TIconsName;
+	onPress: () => void;
+	testID: string;
+	disabled?: boolean;
+	disabledReason?: string;
+}
+
+export const useMemberActions = ({ rid, t, joined, abacAttributes }: IActionsSection): IMemberAction[] => {
+	const { navigate, pop } = useNavigation<TNavigation>();
+	const dispatch = useDispatch();
+	const [addUserToJoinedRoomPermission, addUserToAnyCRoomPermission, addUserToAnyPRoomPermission, createInviteLinksPermission] =
+		usePermissions(['add-user-to-joined-room', 'add-user-to-any-c-room', 'add-user-to-any-p-room', 'create-invite-links'], rid);
+
+	if (!['c', 'p'].includes(t)) {
+		return [];
+	}
+
+	const canAddUser =
+		(joined && addUserToJoinedRoomPermission) ||
+		(t === 'c' && addUserToAnyCRoomPermission) ||
+		(t === 'p' && addUserToAnyPRoomPermission) ||
+		false;
+
+	const handleOnPress = ({
+		route,
+		params
+	}: {
+		route: keyof ChatsStackParamList;
+		params: ChatsStackParamList[keyof ChatsStackParamList];
+	}) => {
+		// @ts-ignore
+		navigate(route, params);
+		// @ts-ignore
+		logEvent(events[`RM_GO_${route.replace('View', '').toUpperCase()}`]);
+	};
+
+	const addUser = async () => {
+		try {
+			dispatch(setLoading(true));
+			await addUsersToRoom(rid);
+			pop();
+		} catch (e) {
+			log(e);
+		} finally {
+			dispatch(setLoading(false));
+		}
+	};
+
+	const actions: IMemberAction[] = [];
+	if (canAddUser) {
+		actions.push({
+			title: 'Add_users',
+			icon: 'add',
+			testID: 'room-actions-add-user',
+			onPress: () =>
+				handleOnPress({
+					route: 'SelectedUsersView',
+					params: { title: i18n.t('Add_users'), nextAction: addUser, showSkipText: false }
+				})
+		});
+	}
+	if (createInviteLinksPermission) {
+		actions.push({
+			title: 'Invite_users',
+			icon: 'user-add',
+			testID: 'room-actions-invite-user',
+			onPress: () => handleOnPress({ route: 'InviteUsersView', params: { rid } }),
+			disabled: !!abacAttributes,
+			disabledReason: abacAttributes ? i18n.t('ABAC_disabled_action_reason') : undefined
+		});
+	}
+	return actions;
+};
diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx
index 8f3a0d8e7e2..2dd4e858b0c 100644
--- a/app/views/RoomMembersView/index.tsx
+++ b/app/views/RoomMembersView/index.tsx
@@ -1,6 +1,7 @@
 import { type NavigationProp, type RouteProp, useNavigation, useRoute } from '@react-navigation/native';
-import { type ReactElement, useCallback, useEffect, useReducer, useRef } from 'react';
-import { FlatList, Text, View } from 'react-native';
+import { type ReactElement, useCallback, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
+import { FlatList } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { shallowEqual } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -9,17 +10,20 @@ import { sendLoadingEvent } from '~/containers/Loading';
 import ActivityIndicator from '~/containers/ActivityIndicator';
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
-import * as List from '~/containers/List';
 import SafeAreaView from '~/containers/SafeAreaView';
+import RowSeparator from '~/containers/NativeListRow/Separator';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
 import SearchBox from '~/containers/SearchBox';
 import UserItem from '~/containers/UserItem';
 import Radio from '~/containers/Radio';
 import { type IGetRoomRoles, type TSubscriptionModel, type TUserModel } from '~/definitions';
 import I18n from '~/i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import { usePermissions } from '~/lib/hooks/usePermissions';
-import { compareServerVersion, getRoomTitle, isGroupChat, useDebounce } from '~/lib/methods/helpers';
+import { compareServerVersion, getRoomTitle, hasNativeHeaderBar, isGroupChat, useDebounce } from '~/lib/methods/helpers';
+import { headerIcon } from '~/lib/methods/helpers/navigation/headerIcon';
 import { handleIgnore } from '~/lib/methods/helpers/handleIgnore';
 import { showConfirmationAlert } from '~/lib/methods/helpers/info';
 import log from '~/lib/methods/helpers/log';
@@ -73,6 +77,7 @@ const RightIcon = ({ check, label }: { check: boolean; label: string }) => {
 const RoomMembersView = (): ReactElement => {
 	const { showActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceHover);
 
 	const { params } = useRoute<RouteProp<ModalStackParamList, 'RoomMembersView'>>();
 	const navigation = useNavigation<NavigationProp<ModalStackParamList, 'RoomMembersView'>>();
@@ -125,7 +130,7 @@ const RoomMembersView = (): ReactElement => {
 		viewAllTeamsPermission
 	] = usePermissions(['mute-user', 'set-leader', 'set-owner', 'set-moderator', 'remove-user', ...teamPermissions], params.rid);
 
-	useEffect(() => {
+	useLayoutEffect(() => {
 		const subscription = params?.room?.observe && params.room.observe().subscribe(changes => updateState({ room: changes }));
 		setHeader(true);
 		return () => subscription?.unsubscribe();
@@ -250,6 +255,39 @@ const RoomMembersView = (): ReactElement => {
 	};
 
 	const setHeader = (allUsers: boolean) => {
+		if (hasNativeHeaderBar) {
+			navigation.setOptions({
+				title: I18n.t('Members'),
+				headerRight: undefined,
+				headerTransparent: true,
+				headerSearchBarOptions: stackedSearchBarOptions({ onChangeText: debounceFilterChange }),
+				unstable_headerRightItems: () => [
+					{
+						type: 'menu',
+						label: I18n.t('Filter'),
+						accessibilityLabel: I18n.t('Filter'),
+						icon: headerIcon('filter'),
+						menu: {
+							items: [
+								{
+									type: 'action',
+									label: I18n.t('Online'),
+									state: allUsers ? 'off' : 'on',
+									onPress: () => toggleStatus(false)
+								},
+								{
+									type: 'action',
+									label: I18n.t('All'),
+									state: allUsers ? 'on' : 'off',
+									onPress: () => toggleStatus(true)
+								}
+							]
+						}
+					}
+				]
+			});
+			return;
+		}
 		navigation.setOptions({
 			title: I18n.t('Members'),
 			headerRight: () => (
@@ -429,20 +467,22 @@ const RoomMembersView = (): ReactElement => {
 		<SafeAreaView testID='room-members-view'>
 			<FlatList
 				data={state.members}
-				renderItem={({ item }) => (
-					<View style={{ backgroundColor: colors.surfaceRoom }}>
-						<UserItem
-							name={item.name || item.username}
-							username={item.username}
-							onPress={() => onPressUser(item)}
-							testID={`room-members-view-item-${item.username}`}
-						/>
-					</View>
+				contentInsetAdjustmentBehavior={hasNativeHeaderBar ? 'automatic' : undefined}
+				renderItem={({ item, index }) => (
+					<UserItem
+						name={item.name || item.username}
+						username={item.username}
+						onPress={() => onPressUser(item)}
+						testID={`room-members-view-item-${item.username}`}
+						style={{ backgroundColor: colors.surfaceRoom }}
+						isFirst={index === 0}
+						isLast={index === state.members.length - 1}
+					/>
 				)}
-				style={styles.list}
-				contentContainerStyle={{ paddingBottom: bottom }}
+				style={[styles.list, { backgroundColor: listBackgroundColor }]}
+				contentContainerStyle={{ flexGrow: 1, paddingBottom: bottom }}
 				keyExtractor={item => item._id}
-				ItemSeparatorComponent={List.Separator}
+				ItemSeparatorComponent={RowSeparator}
 				ListHeaderComponent={
 					<>
 						<ActionsSection
@@ -451,7 +491,9 @@ const RoomMembersView = (): ReactElement => {
 							t={state.room.t}
 							abacAttributes={state.room.abacAttributes}
 						/>
-						<SearchBox onChangeText={text => debounceFilterChange(text)} testID='room-members-view-search' />
+						{hasNativeHeaderBar ? null : (
+							<SearchBox onChangeText={text => debounceFilterChange(text)} testID='room-members-view-search' />
+						)}
 					</>
 				}
 				ListFooterComponent={() => (state.isLoading ? <ActivityIndicator /> : null)}
@@ -459,7 +501,7 @@ const RoomMembersView = (): ReactElement => {
 				onEndReached={() => fetchMembers()}
 				ListEmptyComponent={() =>
 					state.end ? (
-						<Text style={[styles.noResult, { color: colors.fontTitlesLabels }]}>{I18n.t('No_members_found')}</Text>
+						<PlainText style={[styles.noResult, { color: colors.fontTitlesLabels }]}>{I18n.t('No_members_found')}</PlainText>
 					) : null
 				}
 				{...scrollPersistTaps}
diff --git a/app/views/RoomView/List/components/List.tsx b/app/views/RoomView/List/components/List.tsx
index eb742ecf179..3e2835be6e8 100644
--- a/app/views/RoomView/List/components/List.tsx
+++ b/app/views/RoomView/List/components/List.tsx
@@ -1,14 +1,13 @@
-import { useState } from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
-import Animated, { useAnimatedScrollHandler, useSharedValue } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
+import { type Ref, useState } from 'react';
+import { type NativeScrollEvent, type NativeSyntheticEvent, type ScrollViewProps, StyleSheet, View } from 'react-native';
+import { LegendList } from '@legendapp/list/react-native';
 
 import { useIsScreenReaderEnabled } from '~/lib/hooks/useIsScreenReaderEnabled';
 import { isIOS } from '~/lib/methods/helpers';
 import scrollPersistTaps from '~/lib/methods/helpers/scrollPersistTaps';
 import { isExternalKeyboardConnected } from '~/lib/methods/helpers/externalInput';
 import { MESSAGE_COMPOSER_EXIT_FOCUS_NATIVE_ID } from '~/lib/constants/accessibility';
-import InvertedScrollView from './InvertedScrollView';
+import VisualOrderScrollView from './VisualOrderScrollView';
 import NavBottomFAB from './NavBottomFAB';
 import { type TAnyMessageModel } from '~/definitions';
 import { type IListProps } from '~/views/RoomView/definitions';
@@ -17,21 +16,25 @@ import { useIsAutocompleteVisible } from '~/containers/MessageComposer/ComposerS
 import FloatingDateSeparator from '~/containers/Separator/FloatingDateSeparator';
 import { useFloatingDate } from '../hooks/useFloatingDate';
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList<TAnyMessageModel>);
+type TScrollComponentProps = ScrollViewProps & { ref?: Ref<VisualOrderScrollView> };
 
 const styles = StyleSheet.create({
 	list: {
 		flex: 1
 	},
 	contentContainer: {
-		paddingTop: 10
+		paddingBottom: 10
 	}
 });
 
-const List = ({ flatListRef, jumpToBottom, isAnchored, ...props }: IListProps) => {
+const ESTIMATED_MESSAGE_HEIGHT = 60;
+
+const distanceFromEnd = ({ contentOffset, contentSize, layoutMeasurement }: NativeScrollEvent) =>
+	contentSize.height - layoutMeasurement.height - contentOffset.y;
+
+const List = ({ listRef, jumpToBottom, isAnchored, data, extraData, renderItem, onStartReached }: IListProps) => {
 	const [scrolledPastLimit, setScrolledPastLimit] = useState(false);
 	const isAutocompleteVisible = useIsAutocompleteVisible();
-	const wasScrolledPastLimit = useSharedValue(false);
 	const {
 		ts,
 		opacity: floatingDateOpacity,
@@ -39,20 +42,9 @@ const List = ({ flatListRef, jumpToBottom, isAnchored, ...props }: IListProps) =
 		viewabilityConfigCallbackPairs
 	} = useFloatingDate();
 
-	// Spelled out rather than spread: the worklets babel plugin has to see an object hook's properties statically.
-	const scrollHandler = useAnimatedScrollHandler({
-		onBeginDrag,
-		onMomentumBegin,
-		onEndDrag,
-		onMomentumEnd,
-		onScroll: event => {
-			const isPastLimit = event.contentOffset.y > SCROLL_LIMIT;
-			if (isPastLimit !== wasScrolledPastLimit.value) {
-				wasScrolledPastLimit.value = isPastLimit;
-				scheduleOnRN(setScrolledPastLimit, isPastLimit);
-			}
-		}
-	});
+	const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+		setScrolledPastLimit(distanceFromEnd(event.nativeEvent) > SCROLL_LIMIT);
+	};
 
 	// Anchored window: loaded rows' bottom edge isn't the Live Tail, so force the FAB visible to keep a path back to live.
 	const visible = scrolledPastLimit || !!isAnchored;
@@ -60,31 +52,67 @@ const List = ({ flatListRef, jumpToBottom, isAnchored, ...props }: IListProps) =
 	const isScreenReaderEnabled = useIsScreenReaderEnabled();
 
 	const renderScrollComponent = !isIOS && (isScreenReaderEnabled || isExternalKeyboardConnected());
+
 	return (
 		<View style={styles.list}>
-			<AnimatedFlatList
+			<LegendList<TAnyMessageModel>
 				accessibilityElementsHidden={isAutocompleteVisible}
 				importantForAccessibility={isAutocompleteVisible ? 'no-hide-descendants' : 'yes'}
 				testID='room-view-messages'
-				ref={flatListRef}
+				ref={listRef}
+				data={data}
+				extraData={extraData}
+				renderItem={renderItem}
 				keyExtractor={item => item.id}
+				estimatedItemSize={ESTIMATED_MESSAGE_HEIGHT}
 				contentContainerStyle={styles.contentContainer}
 				style={styles.list}
-				inverted
 				renderScrollComponent={
 					renderScrollComponent
-						? props => <InvertedScrollView {...props} exitFocusNativeId={MESSAGE_COMPOSER_EXIT_FOCUS_NATIVE_ID} />
+						? (scrollProps: TScrollComponentProps) => (
+								<VisualOrderScrollView
+									ref={scrollProps.ref}
+									horizontal={scrollProps.horizontal}
+									style={scrollProps.style}
+									contentContainerStyle={scrollProps.contentContainerStyle}
+									contentOffset={scrollProps.contentOffset}
+									maintainVisibleContentPosition={scrollProps.maintainVisibleContentPosition}
+									scrollEnabled={scrollProps.scrollEnabled}
+									showsVerticalScrollIndicator={scrollProps.showsVerticalScrollIndicator}
+									scrollEventThrottle={scrollProps.scrollEventThrottle}
+									removeClippedSubviews={scrollProps.removeClippedSubviews}
+									testID={scrollProps.testID}
+									accessibilityElementsHidden={scrollProps.accessibilityElementsHidden}
+									importantForAccessibility={scrollProps.importantForAccessibility}
+									keyboardShouldPersistTaps={scrollProps.keyboardShouldPersistTaps}
+									keyboardDismissMode={scrollProps.keyboardDismissMode}
+									onLayout={scrollProps.onLayout}
+									onContentSizeChange={scrollProps.onContentSizeChange}
+									onScroll={scrollProps.onScroll}
+									onScrollBeginDrag={scrollProps.onScrollBeginDrag}
+									onScrollEndDrag={scrollProps.onScrollEndDrag}
+									onMomentumScrollBegin={scrollProps.onMomentumScrollBegin}
+									onMomentumScrollEnd={scrollProps.onMomentumScrollEnd}
+									exitFocusNativeId={MESSAGE_COMPOSER_EXIT_FOCUS_NATIVE_ID}>
+									{scrollProps.children}
+								</VisualOrderScrollView>
+							)
 						: undefined
 				}
-				removeClippedSubviews={isIOS}
-				initialNumToRender={20}
-				onEndReachedThreshold={0.5}
-				maxToRenderPerBatch={5}
-				windowSize={10}
+				alignItemsAtEnd
+				initialScrollAtEnd
+				maintainScrollAtEnd
+				maintainVisibleContentPosition
+				onStartReached={onStartReached}
+				onStartReachedThreshold={0.5}
 				scrollEventThrottle={16}
-				onScroll={scrollHandler}
-				{...props}
-				{...scrollPersistTaps}
+				onScroll={onScroll}
+				onScrollBeginDrag={onBeginDrag}
+				onMomentumScrollBegin={onMomentumBegin}
+				onScrollEndDrag={onEndDrag}
+				onMomentumScrollEnd={onMomentumEnd}
+				keyboardShouldPersistTaps={scrollPersistTaps.keyboardShouldPersistTaps}
+				keyboardDismissMode={scrollPersistTaps.keyboardDismissMode}
 				viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
 			/>
 			<FloatingDateSeparator ts={ts} opacity={floatingDateOpacity} />
diff --git a/app/views/RoomView/List/components/InvertedScrollView.tsx b/app/views/RoomView/List/components/VisualOrderScrollView.tsx
similarity index 66%
rename from app/views/RoomView/List/components/InvertedScrollView.tsx
rename to app/views/RoomView/List/components/VisualOrderScrollView.tsx
index 78b281d4493..77c3d0b594c 100644
--- a/app/views/RoomView/List/components/InvertedScrollView.tsx
+++ b/app/views/RoomView/List/components/VisualOrderScrollView.tsx
@@ -1,12 +1,15 @@
 import { Component, type ComponentType, createRef, type MutableRefObject } from 'react';
-import { Platform, StyleSheet, findNodeHandle, type LayoutChangeEvent, type ScrollViewProps, processColor } from 'react-native';
+import {
+	type HostInstance,
+	StyleSheet,
+	View,
+	findNodeHandle,
+	type LayoutChangeEvent,
+	type ScrollViewProps,
+	processColor
+} from 'react-native';
 import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
 
-// NativeComponentRegistry.get() registers components as proper Fabric host components.
-// requireNativeComponent() uses the legacy interop layer, which breaks Fabric's touch
-// event routing: when Fabric-rendered children (FlatList cells with pressable elements)
-// are nested inside a legacy interop node, Fabric's event router cannot traverse the
-// shadow tree boundary and drops all interaction events. newArchEnabled=true exposes this.
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const NativeComponentRegistry = require('react-native/Libraries/NativeComponent/NativeComponentRegistry') as {
 	get: (name: string, viewConfigProvider: () => object) => ComponentType<any>;
@@ -21,10 +24,8 @@ interface Props extends Omit<ScrollViewProps, 'scrollViewRef'> {
 	exitFocusNativeId?: string;
 }
 
-// Mirrors the Android validAttributes of RCTScrollView (ScrollViewNativeComponent.js)
-// extended with our custom exitFocusNativeId prop.
-const NativeInvertedScrollView = NativeComponentRegistry.get('InvertedScrollView', () => ({
-	uiViewClassName: 'InvertedScrollView',
+const NativeVisualOrderScrollView = NativeComponentRegistry.get('VisualOrderScrollView', () => ({
+	uiViewClassName: 'VisualOrderScrollView',
 	bubblingEventTypes: {},
 	directEventTypes: {
 		topMomentumScrollBegin: { registrationName: 'onMomentumScrollBegin' },
@@ -68,34 +69,21 @@ const NativeInvertedScrollView = NativeComponentRegistry.get('InvertedScrollView
 		borderTopRightRadius: true,
 		borderLeftColor: { process: processColor },
 		pointerEvents: true,
-		isInvertedVirtualizedList: true,
 		exitFocusNativeId: true
 	}
 }));
 
-const NativeInvertedScrollContentView = NativeComponentRegistry.get('InvertedScrollContentView', () => ({
-	uiViewClassName: 'InvertedScrollContentView',
-	bubblingEventTypes: {},
-	directEventTypes: {},
-	validAttributes: {
-		isInvertedContent: true,
-		removeClippedSubviews: true,
-		collapsable: true,
-		collapsableChildren: true
-	}
-}));
-
-interface InvertedScrollViewCommands {
+interface VisualOrderScrollViewCommands {
 	scrollTo: (viewRef: any, x: number, y: number, animated: boolean) => void;
 	scrollToEnd: (viewRef: any, animated: boolean) => void;
 	flashScrollIndicators: (viewRef: any) => void;
 }
 
-const Commands = codegenNativeCommands<InvertedScrollViewCommands>({
+const Commands = codegenNativeCommands<VisualOrderScrollViewCommands>({
 	supportedCommands: ['scrollTo', 'scrollToEnd', 'flashScrollIndicators']
 });
 
-export default class InvertedScrollView extends Component<Props> {
+export default class VisualOrderScrollView extends Component<Props> {
 	private scrollRef = createRef<any>();
 
 	private handleLayout = (e: LayoutChangeEvent) => {
@@ -139,6 +127,13 @@ export default class InvertedScrollView extends Component<Props> {
 		}
 	};
 
+	measure: HostInstance['measure'] = callback => this.scrollRef.current?.measure(callback);
+
+	measureInWindow: HostInstance['measureInWindow'] = callback => this.scrollRef.current?.measureInWindow(callback);
+
+	measureLayout: HostInstance['measureLayout'] = (relativeToNativeNode, onSuccess, onFail) =>
+		this.scrollRef.current?.measureLayout(relativeToNativeNode, onSuccess, onFail);
+
 	getScrollableNode = () => findNodeHandle(this.scrollRef.current);
 
 	getNativeScrollRef = () => this.scrollRef.current;
@@ -146,28 +141,61 @@ export default class InvertedScrollView extends Component<Props> {
 	getScrollResponder = () => this;
 
 	render() {
-		const { horizontal, children, style, contentContainerStyle, onContentSizeChange, ...rest } = this.props;
+		const {
+			horizontal,
+			children,
+			style,
+			contentContainerStyle,
+			onContentSizeChange,
+			contentOffset,
+			maintainVisibleContentPosition,
+			scrollEnabled,
+			showsVerticalScrollIndicator,
+			scrollEventThrottle,
+			removeClippedSubviews,
+			testID,
+			accessibilityElementsHidden,
+			importantForAccessibility,
+			onScroll,
+			onScrollBeginDrag,
+			onScrollEndDrag,
+			onMomentumScrollBegin,
+			onMomentumScrollEnd,
+			exitFocusNativeId
+		} = this.props;
 		const contentStyle = [horizontal ? styles.contentContainerHorizontal : null, contentContainerStyle];
 		const baseStyle = horizontal ? styles.baseHorizontal : styles.baseVertical;
-		const preserveChildren =
-			this.props.maintainVisibleContentPosition != null || (Platform.OS === 'android' && this.props.snapToAlignment != null);
 
 		return (
-			<NativeInvertedScrollView
+			<NativeVisualOrderScrollView
 				ref={this.setNativeRef}
-				{...rest}
+				horizontal={horizontal}
+				contentOffset={contentOffset}
+				maintainVisibleContentPosition={maintainVisibleContentPosition}
+				scrollEnabled={scrollEnabled}
+				showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+				scrollEventThrottle={scrollEventThrottle}
+				removeClippedSubviews={removeClippedSubviews}
+				sendMomentumEvents={!!(onMomentumScrollBegin || onMomentumScrollEnd)}
+				testID={testID}
+				accessibilityElementsHidden={accessibilityElementsHidden}
+				importantForAccessibility={importantForAccessibility}
+				onScroll={onScroll}
+				onScrollBeginDrag={onScrollBeginDrag}
+				onScrollEndDrag={onScrollEndDrag}
+				onMomentumScrollBegin={onMomentumScrollBegin}
+				onMomentumScrollEnd={onMomentumScrollEnd}
+				exitFocusNativeId={exitFocusNativeId}
 				style={StyleSheet.compose(baseStyle, style)}
 				onLayout={this.handleLayout}>
-				<NativeInvertedScrollContentView
+				<View
 					onLayout={onContentSizeChange ? this.handleContentOnLayout : undefined}
 					style={contentStyle}
-					removeClippedSubviews={this.props.removeClippedSubviews}
-					collapsable={false}
-					collapsableChildren={!preserveChildren}
-					isInvertedContent>
+					removeClippedSubviews={removeClippedSubviews}
+					collapsable={false}>
 					{children}
-				</NativeInvertedScrollContentView>
-			</NativeInvertedScrollView>
+				</View>
+			</NativeVisualOrderScrollView>
 		);
 	}
 }
diff --git a/app/views/RoomView/List/hooks/useFloatingDate.test.ts b/app/views/RoomView/List/hooks/__tests__/useFloatingDate.test.ts
similarity index 76%
rename from app/views/RoomView/List/hooks/useFloatingDate.test.ts
rename to app/views/RoomView/List/hooks/__tests__/useFloatingDate.test.ts
index 2f30c9937d1..e0dc3df4744 100644
--- a/app/views/RoomView/List/hooks/useFloatingDate.test.ts
+++ b/app/views/RoomView/List/hooks/__tests__/useFloatingDate.test.ts
@@ -1,6 +1,6 @@
 import { act, renderHook } from '@testing-library/react-native';
 
-import { getHighestIndexViewableTs, useFloatingDate } from './useFloatingDate';
+import { getTopmostViewableTs, useFloatingDate } from '../useFloatingDate';
 
 // The global reanimated mock hands back a plain `{ value }`, which cannot record what the hook animates to.
 // Model just enough of valueSetter to assert the lifecycle: a new animation cancels the pending one, and a
@@ -46,24 +46,24 @@ jest.mock('react-native-reanimated', () => {
 const token = (index: number, ts: Date | null, isViewable = true) =>
 	({ index, isViewable, key: String(index), item: ts ? { ts } : null }) as any;
 
-describe('getHighestIndexViewableTs', () => {
+describe('getTopmostViewableTs', () => {
 	const older = new Date('2017-11-09T10:00:00.000Z');
 	const newer = new Date('2017-11-10T10:00:00.000Z');
 
 	it('returns null when there are no viewable items', () => {
-		expect(getHighestIndexViewableTs([])).toBeNull();
+		expect(getTopmostViewableTs([])).toBeNull();
 	});
 
-	it('returns the ts of the highest index', () => {
-		expect(getHighestIndexViewableTs([token(0, newer), token(1, older)])).toBe(older);
+	it('returns the ts of the lowest index, the row at the top of the screen', () => {
+		expect(getTopmostViewableTs([token(1, newer), token(0, older)])).toBe(older);
 	});
 
 	it('ignores non viewable items', () => {
-		expect(getHighestIndexViewableTs([token(0, newer), token(1, older, false)])).toBe(newer);
+		expect(getTopmostViewableTs([token(0, older, false), token(1, newer)])).toBe(newer);
 	});
 
 	it('ignores items without ts', () => {
-		expect(getHighestIndexViewableTs([token(0, newer), token(1, null)])).toBe(newer);
+		expect(getTopmostViewableTs([token(0, null), token(1, newer)])).toBe(newer);
 	});
 });
 
@@ -79,20 +79,20 @@ describe('useFloatingDate', () => {
 			result.current.viewabilityConfigCallbackPairs[0].onViewableItemsChanged({ viewableItems, changed: [] });
 		});
 
-	it('tracks the highest index viewable row', () => {
+	it('tracks the topmost viewable row', () => {
 		const { result } = renderHook(() => useFloatingDate());
-		emit(result, [token(0, evening), token(1, morning)]);
+		emit(result, [token(0, morning), token(1, evening)]);
 		expect(result.current.ts).toBe(morning);
 	});
 
-	it('keeps ts while the highest index row stays on the same day', () => {
+	it('keeps ts while the topmost row stays on the same day', () => {
 		const { result } = renderHook(() => useFloatingDate());
-		emit(result, [token(0, evening), token(1, morning)]);
 		emit(result, [token(0, morning), token(1, evening)]);
+		emit(result, [token(0, evening), token(1, morning)]);
 		expect(result.current.ts).toBe(morning);
 	});
 
-	it('updates ts when the highest index row crosses a day boundary', () => {
+	it('updates ts when the topmost row crosses a day boundary', () => {
 		const { result } = renderHook(() => useFloatingDate());
 		emit(result, [token(0, morning)]);
 		emit(result, [token(0, dayBefore)]);
@@ -118,7 +118,16 @@ describe('useFloatingDate', () => {
 	const fadeOut = { type: 'timing', toValue: 0, duration: 300 };
 
 	const animationsOf = (result: any) => (result.current.opacity as any).animations;
-	const settle = (ms: number) => act(() => jest.advanceTimersByTime(ms));
+	const scroll = (callback: () => void) =>
+		act(() => {
+			callback();
+			jest.runAllTicks();
+		});
+	const settle = (ms: number) =>
+		act(() => {
+			jest.advanceTimersByTime(ms);
+			jest.runAllTicks();
+		});
 
 	it('keeps viewabilityConfigCallbackPairs identity stable across updates', () => {
 		const { result, rerender } = renderHook(() => useFloatingDate());
@@ -140,7 +149,7 @@ describe('useFloatingDate', () => {
 
 		it('fades in when the user starts dragging', () => {
 			const { result } = renderHook(() => useFloatingDate());
-			act(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
 			expect(animationsOf(result)).toEqual([fadeIn]);
 			expect(result.current.opacity.value).toBe(1);
 		});
@@ -150,10 +159,10 @@ describe('useFloatingDate', () => {
 		// crept towards 1 without arriving.
 		it('issues the fade in once across a momentum event storm', () => {
 			const { result } = renderHook(() => useFloatingDate());
-			act(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
 			for (let i = 0; i < 20; i++) {
-				act(() => result.current.scrollEvents.onMomentumEnd());
-				act(() => result.current.scrollEvents.onMomentumBegin());
+				scroll(() => result.current.scrollEvents.onMomentumEnd());
+				scroll(() => result.current.scrollEvents.onMomentumBegin());
 			}
 			expect(animationsOf(result)).toEqual([fadeIn]);
 			expect(result.current.opacity.value).toBe(1);
@@ -161,8 +170,8 @@ describe('useFloatingDate', () => {
 
 		it('holds at full opacity until the settle delay elapses', () => {
 			const { result } = renderHook(() => useFloatingDate());
-			act(() => result.current.scrollEvents.onBeginDrag());
-			act(() => result.current.scrollEvents.onEndDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onEndDrag());
 			settle(999);
 			expect(animationsOf(result)).toEqual([fadeIn]);
 			settle(1);
@@ -172,11 +181,11 @@ describe('useFloatingDate', () => {
 
 		it('re-arms the settle delay so the fling that follows a drag keeps the pill up', () => {
 			const { result } = renderHook(() => useFloatingDate());
-			act(() => result.current.scrollEvents.onBeginDrag());
-			act(() => result.current.scrollEvents.onEndDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onEndDrag());
 			settle(500);
-			act(() => result.current.scrollEvents.onMomentumBegin());
-			act(() => result.current.scrollEvents.onMomentumEnd());
+			scroll(() => result.current.scrollEvents.onMomentumBegin());
+			scroll(() => result.current.scrollEvents.onMomentumEnd());
 			settle(999);
 			expect(animationsOf(result)).toEqual([fadeIn]);
 			settle(1);
@@ -185,10 +194,10 @@ describe('useFloatingDate', () => {
 
 		it('cancels the pending fade out when scrolling resumes', () => {
 			const { result } = renderHook(() => useFloatingDate());
-			act(() => result.current.scrollEvents.onBeginDrag());
-			act(() => result.current.scrollEvents.onEndDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onEndDrag());
 			settle(500);
-			act(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
 			settle(5000);
 			expect(animationsOf(result)).toEqual([fadeIn]);
 			expect(result.current.opacity.value).toBe(1);
@@ -196,18 +205,18 @@ describe('useFloatingDate', () => {
 
 		it('fades in again after a completed fade out', () => {
 			const { result } = renderHook(() => useFloatingDate());
-			act(() => result.current.scrollEvents.onBeginDrag());
-			act(() => result.current.scrollEvents.onEndDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onEndDrag());
 			settle(HIDE_DELAY_MS);
-			act(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
 			expect(animationsOf(result)).toEqual([fadeIn, fadeOut, fadeIn]);
 			expect(result.current.opacity.value).toBe(1);
 		});
 
 		it('drops the pending fade out on unmount', () => {
 			const { result, unmount } = renderHook(() => useFloatingDate());
-			act(() => result.current.scrollEvents.onBeginDrag());
-			act(() => result.current.scrollEvents.onEndDrag());
+			scroll(() => result.current.scrollEvents.onBeginDrag());
+			scroll(() => result.current.scrollEvents.onEndDrag());
 			unmount();
 			settle(5000);
 			expect(animationsOf(result)).toEqual([fadeIn]);
diff --git a/app/views/RoomView/List/hooks/__tests__/useScroll.test.tsx b/app/views/RoomView/List/hooks/__tests__/useScroll.test.tsx
index 0e328b7eca3..a02cba2caf9 100644
--- a/app/views/RoomView/List/hooks/__tests__/useScroll.test.tsx
+++ b/app/views/RoomView/List/hooks/__tests__/useScroll.test.tsx
@@ -10,8 +10,8 @@ const makeListRef = () => {
 	const scrollToIndex = jest.fn();
 	const scrollToOffset = jest.fn();
 	const scrollToEnd = jest.fn();
-	const flatListRef = { current: { scrollToIndex, scrollToOffset, scrollToEnd } } as unknown as TListRef;
-	return { flatListRef, scrollToIndex, scrollToOffset, scrollToEnd };
+	const listRef = { current: { scrollToIndex, scrollToOffset, scrollToEnd } } as unknown as TListRef;
+	return { listRef, scrollToIndex, scrollToOffset, scrollToEnd };
 };
 
 const makeMessagesIdsRef = (ids: string[]): TMessagesIdsRef => ({ current: ids });
@@ -22,7 +22,7 @@ const renderUseScroll = (
 	fetchMessages = jest.fn(() => Promise.resolve()),
 	initialHighTs: number | null = null
 ) => {
-	const { flatListRef, scrollToIndex, scrollToOffset, scrollToEnd } = makeListRef();
+	const { listRef, scrollToIndex, scrollToOffset, scrollToEnd } = makeListRef();
 	const idsRef = makeMessagesIdsRef(initialRows.map(r => r.id));
 
 	const utils = renderHook(
@@ -30,7 +30,7 @@ const renderUseScroll = (
 			// Keep the ids ref in sync the same way useMessages does (before paint).
 			idsRef.current = rows.map(r => r.id);
 			return useScroll({
-				flatListRef,
+				listRef,
 				messages: rows as unknown as TAnyMessageModel[],
 				messagesIds: idsRef,
 				highTs,
@@ -41,7 +41,7 @@ const renderUseScroll = (
 		{ initialProps: { rows: initialRows, highTs: initialHighTs } }
 	);
 
-	return { ...utils, flatListRef, scrollToIndex, scrollToOffset, scrollToEnd, idsRef, setHighTs, fetchMessages };
+	return { ...utils, listRef, scrollToIndex, scrollToOffset, scrollToEnd, idsRef, setHighTs, fetchMessages };
 };
 
 describe('useScroll', () => {
@@ -91,30 +91,6 @@ describe('useScroll', () => {
 		await waitFor(() => expect(jumpResolved).toBe(true));
 	});
 
-	it('re-scrolls to the target after measurement so an undershot estimate cannot leave it hidden', async () => {
-		const setHighTs = jest.fn();
-		const { result, rerender, scrollToIndex } = renderUseScroll([{ id: 'live-1' }, { id: 'live-2' }], setHighTs);
-
-		act(() => {
-			result.current.jumpToMessage('target', 1500);
-		});
-		act(() => {
-			rerender({ rows: [{ id: 'older' }, { id: 'target' }, { id: 'newer' }] });
-		});
-
-		// First pass: a single scroll toward the target on an ESTIMATED offset (inverted list, no getItemLayout).
-		await waitFor(() => expect(scrollToIndex).toHaveBeenCalledTimes(1));
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ index: 1, viewPosition: 0.5, viewOffset: 100 }));
-
-		// Second pass: once the row has been measured, a corrective scroll re-centers it to the same spot so an
-		// undershooting estimate cannot leave the target hidden above the viewport.
-		act(() => {
-			jest.advanceTimersByTime(100);
-		});
-		expect(scrollToIndex).toHaveBeenCalledTimes(2);
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ index: 1, viewPosition: 0.5, viewOffset: 100 }));
-	});
-
 	it('grows the window (bounded) for a deep anchored target, then scrolls once it appears', async () => {
 		const setHighTs = jest.fn();
 		const fetchMessages = jest.fn(() => Promise.resolve());
@@ -258,183 +234,6 @@ describe('useScroll', () => {
 		expect(fetchMessages).not.toHaveBeenCalled();
 	});
 
-	it('scroll-to-index-failed steps to the measured frontier first, then lands on the actual target index', async () => {
-		const setHighTs = jest.fn();
-		const { result, rerender, scrollToIndex } = renderUseScroll([{ id: 'live-1' }, { id: 'live-2' }], setHighTs);
-
-		act(() => {
-			result.current.jumpToMessage('target', 1500);
-		});
-
-		// Re-observe with the target sitting at a mid-window index (far past the initially-rendered rows).
-		const rows = [{ id: 'm0' }, { id: 'm1' }, { id: 'm2' }, { id: 'target' }, { id: 'm4' }, { id: 'm5' }];
-		act(() => {
-			rerender({ rows });
-		});
-		// The reactive scroll already fired once toward index 3.
-		await waitFor(() => expect(scrollToIndex).toHaveBeenCalledTimes(1));
-		// It also schedules a corrective re-scroll (undershoot fix); drain it so the failure-retry below is isolated.
-		act(() => {
-			jest.runOnlyPendingTimers();
-		});
-		scrollToIndex.mockClear();
-
-		// Simulate the inverted list failing to measure the target's frame: it only measured up to index 1.
-		act(() => {
-			result.current.handleScrollToIndexFailed({
-				index: 3,
-				highestMeasuredFrameIndex: 1,
-				averageItemLength: 50
-			});
-		});
-
-		// The retry is deferred one frame to break the synchronous onScrollToIndexFailed recursion, so
-		// nothing scrolls within this stack frame.
-		expect(scrollToIndex).not.toHaveBeenCalled();
-
-		// First frame: a straight scroll to the unmeasured target would fail without moving the viewport, so
-		// the retry steps to the measured frontier (1) — which DOES advance the render window.
-		act(() => {
-			jest.advanceTimersByTime(50);
-		});
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ index: 1 }));
-
-		// Next frame: re-attempt the ACTUAL target index (3).
-		act(() => {
-			jest.advanceTimersByTime(50);
-		});
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ index: 3 }));
-	});
-
-	it('keeps the header-clearing view offset on a scroll-to-index-failed retry so the target is not hidden behind the header', async () => {
-		const setHighTs = jest.fn();
-		const { result, rerender, scrollToIndex } = renderUseScroll([{ id: 'live-1' }, { id: 'live-2' }], setHighTs);
-
-		act(() => {
-			result.current.jumpToMessage('target', 1500);
-		});
-
-		const rows = [{ id: 'm0' }, { id: 'm1' }, { id: 'm2' }, { id: 'target' }, { id: 'm4' }, { id: 'm5' }];
-		act(() => {
-			rerender({ rows });
-		});
-		// The reactive scroll already landed once, centered and clear of the header.
-		await waitFor(() => expect(scrollToIndex).toHaveBeenCalledTimes(1));
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ viewPosition: 0.5, viewOffset: 100 }));
-		// Drain the corrective re-scroll the reactive effect schedules (undershoot fix) so the retry below stands alone.
-		act(() => {
-			jest.runOnlyPendingTimers();
-		});
-		scrollToIndex.mockClear();
-
-		// The inverted list could not measure the target's frame on that first attempt.
-		act(() => {
-			result.current.handleScrollToIndexFailed({ index: 3, highestMeasuredFrameIndex: 1, averageItemLength: 50 });
-		});
-		act(() => {
-			jest.advanceTimersByTime(100);
-		});
-
-		// The landing on the actual target (after the frontier step) must re-apply the same centering +
-		// header-clearing offset; otherwise the target lands flush at the top edge and sits hidden behind
-		// the room header.
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ index: 3, viewPosition: 0.5, viewOffset: 100 }));
-	});
-
-	it('defers a scroll-to-index-failed retry and caps it so an unmeasurable target cannot recurse into a stack overflow', () => {
-		const setHighTs = jest.fn();
-		const { result, rerender, scrollToIndex } = renderUseScroll([{ id: 'live-1' }, { id: 'live-2' }], setHighTs);
-
-		act(() => {
-			result.current.jumpToMessage('target', 1500);
-		});
-
-		// Target sits at a mid-window index whose frame the inverted list cannot measure yet.
-		const rows = [{ id: 'm0' }, { id: 'm1' }, { id: 'm2' }, { id: 'target' }, { id: 'm4' }];
-		act(() => {
-			rerender({ rows });
-		});
-		scrollToIndex.mockClear();
-
-		// Model a real VirtualizedList: a scrollToIndex toward an unmeasurable frame re-invokes
-		// onScrollToIndexFailed. A synchronous retry would recurse until the call stack overflows; the
-		// mock caps its own re-entry so a regression reports a bounded count instead of crashing the worker.
-		const info = { index: 3, highestMeasuredFrameIndex: 1, averageItemLength: 50 };
-		let reentry = 0;
-		scrollToIndex.mockImplementation(() => {
-			reentry += 1;
-			if (reentry > 100) {
-				return;
-			}
-			result.current.handleScrollToIndexFailed(info);
-		});
-
-		// One failure from the list. The fix must defer the retry, so NOTHING scrolls in this stack frame
-		// (a synchronous retry would have already recursed here).
-		act(() => {
-			result.current.handleScrollToIndexFailed(info);
-		});
-		expect(scrollToIndex).not.toHaveBeenCalled();
-
-		// Drain the deferred retries: each tick may schedule at most one more, and the retry cap guarantees
-		// the chain terminates well below the mock's runaway-recursion ceiling.
-		for (let i = 0; i < 20; i++) {
-			act(() => {
-				jest.runOnlyPendingTimers();
-			});
-		}
-		expect(scrollToIndex.mock.calls.length).toBeLessThan(50);
-	});
-
-	it('climbs the measured frontier across repeated failures until a deep target lands', () => {
-		const setHighTs = jest.fn();
-		const { result, rerender, scrollToIndex } = renderUseScroll([{ id: 'live-1' }, { id: 'live-2' }], setHighTs);
-
-		act(() => {
-			result.current.jumpToMessage('target', 1500);
-		});
-
-		// A deep target: index 8, many rows past the frame the inverted list can initially measure (1).
-		const rows = Array.from({ length: 8 }, (_, i) => ({ id: `m${i}` })).concat([{ id: 'target' }]);
-		act(() => {
-			rerender({ rows });
-		});
-		act(() => {
-			jest.runOnlyPendingTimers();
-		});
-		scrollToIndex.mockClear();
-
-		// Model a real inverted VirtualizedList: scrolling straight to the still-unmeasured target re-invokes
-		// onScrollToIndexFailed with the unchanged frontier, while a scroll to the frontier renders the next
-		// batch and advances it. Landing on the target only succeeds once the frontier has climbed to it.
-		let frontier = 1;
-		let landed = false;
-		scrollToIndex.mockImplementation(({ index }: { index: number }) => {
-			if (index === 8) {
-				if (frontier >= 8) {
-					landed = true;
-					return;
-				}
-				result.current.handleScrollToIndexFailed({ index: 8, highestMeasuredFrameIndex: frontier, averageItemLength: 50 });
-				return;
-			}
-			frontier = Math.min(8, frontier + 2);
-		});
-
-		act(() => {
-			result.current.handleScrollToIndexFailed({ index: 8, highestMeasuredFrameIndex: frontier, averageItemLength: 50 });
-		});
-		for (let i = 0; i < 40; i++) {
-			act(() => {
-				jest.runOnlyPendingTimers();
-			});
-		}
-
-		// Stepping straight to the target every retry (the pre-fix behavior) would exhaust the cap with the
-		// frontier still at 1; climbing the frontier first gets the deep target rendered and landed.
-		expect(landed).toBe(true);
-	});
-
 	it('aborts cleanly and releases the anchor when the target never re-observes within the safety window', async () => {
 		const setHighTs = jest.fn();
 		const { result, scrollToIndex } = renderUseScroll([{ id: 'live-1' }, { id: 'live-2' }], setHighTs);
@@ -461,9 +260,9 @@ describe('useScroll', () => {
 		expect(scrollToIndex).not.toHaveBeenCalled();
 	});
 
-	it('jump-to-bottom from an anchored window pins offset 0 before the release swap, then re-pins on the live emit', () => {
+	it('jump-to-bottom from an anchored window releases the anchor, then scrolls to the end once the live window emits', () => {
 		const setHighTs = jest.fn();
-		const { result, rerender, scrollToOffset } = renderUseScroll(
+		const { result, rerender, scrollToEnd } = renderUseScroll(
 			[{ id: 'anchored-1' }, { id: 'anchored-2' }],
 			setHighTs,
 			undefined,
@@ -474,74 +273,40 @@ describe('useScroll', () => {
 			result.current.jumpToBottom();
 		});
 
-		// Pin the viewport to offset 0 (newest) on the still-settled anchored content BEFORE releasing: the
-		// live emit swaps these rows for a disjoint, shorter key set, and a deep offset would then sit past the
-		// short content (blank list). offset 0 is valid for any non-empty window, so the swap can't strand it.
-		// The release flag is raised so the caller suppresses MVCP across the swap.
 		expect(setHighTs).toHaveBeenCalledWith(null);
-		expect(scrollToOffset).toHaveBeenCalledTimes(1);
-		expect(scrollToOffset).toHaveBeenLastCalledWith({ offset: 0, animated: false });
-		expect(result.current.isReleasing).toBe(true);
+		expect(scrollToEnd).not.toHaveBeenCalled();
 
-		// Live window emits (disjoint rows, anchor now null): re-pin offset 0 in case the swap nudged it, and
-		// drop the release flag so MVCP resumes for normal live-tail following.
 		act(() => {
 			rerender({ rows: [{ id: 'live-1' }, { id: 'live-2' }], highTs: null });
 		});
-		expect(scrollToOffset).toHaveBeenCalledTimes(2);
-		expect(scrollToOffset).toHaveBeenLastCalledWith({ offset: 0, animated: false });
-		expect(result.current.isReleasing).toBe(false);
+		expect(scrollToEnd).toHaveBeenCalledTimes(1);
+		expect(scrollToEnd).toHaveBeenLastCalledWith({ animated: false });
 	});
 
-	it('jump-to-bottom in a live window scrolls to the tail immediately without re-anchoring', () => {
+	it('jump-to-bottom in a live window scrolls to the end immediately without re-anchoring', () => {
 		const setHighTs = jest.fn();
-		const { result, scrollToOffset } = renderUseScroll([{ id: 'a' }, { id: 'b' }], setHighTs, undefined, null);
+		const { result, scrollToEnd } = renderUseScroll([{ id: 'a' }, { id: 'b' }], setHighTs, undefined, null);
 
 		act(() => {
 			result.current.jumpToBottom();
 		});
 
-		// Already live (FAB shown only because scrolled past the limit): no anchor churn, scroll straight to the
-		// tail, and no release transition — MVCP stays on throughout.
 		expect(setHighTs).not.toHaveBeenCalled();
-		expect(scrollToOffset).toHaveBeenCalledWith({ offset: -100 });
-		expect(result.current.isReleasing).toBe(false);
+		expect(scrollToEnd).toHaveBeenCalledWith({ animated: true });
 	});
 
-	it("does not let a completed jump's deferred re-scroll fire after a newer jump supersedes it", () => {
+	it('scrolls to the oldest-first list index of a newest-first message id', () => {
 		const setHighTs = jest.fn();
-		// Both targets start present so each jump resolves synchronously (contiguous, non-anchored).
-		const { result, rerender, scrollToIndex } = renderUseScroll(
-			[{ id: 'a' }, { id: 'target-a' }, { id: 'b' }, { id: 'target-b' }],
+		const { result, scrollToIndex } = renderUseScroll(
+			[{ id: 'newest' }, { id: 'target' }, { id: 'mid' }, { id: 'oldest' }],
 			setHighTs
 		);
 
-		// Jump A: resolves synchronously; its deferred re-scroll is now queued.
-		act(() => {
-			result.current.jumpToMessage('target-a', null);
-		});
-		// Immediate scroll fired once toward A's index (1).
-		expect(scrollToIndex).toHaveBeenCalledTimes(1);
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ index: 1 }));
-
-		// Jump B: starts before the 50 ms timer fires, updating lastJumpTargetId to 'target-b'.
 		act(() => {
-			rerender({ rows: [{ id: 'a' }, { id: 'target-a' }, { id: 'b' }, { id: 'target-b' }] });
-			result.current.jumpToMessage('target-b', null);
-		});
-		// Immediate scroll for B fired (target-b is at index 3).
-		const callCountAfterBJump = scrollToIndex.mock.calls.length;
-		expect(scrollToIndex).toHaveBeenLastCalledWith(expect.objectContaining({ index: 3 }));
-
-		// Advance past 50 ms: A's deferred re-scroll timer fires. The guard must suppress it.
-		act(() => {
-			jest.advanceTimersByTime(100);
+			result.current.jumpToMessage('target', null);
 		});
 
-		// Only B's own deferred re-scroll may have fired (also at index 3), never a call to A's index (1).
-		const aIndex = 1;
-		const staleCallsToA = scrollToIndex.mock.calls.slice(callCountAfterBJump).filter(args => args[0] && args[0].index === aIndex);
-		expect(staleCallsToA).toHaveLength(0);
+		expect(scrollToIndex).toHaveBeenCalledWith(expect.objectContaining({ index: 2, viewPosition: 0.5, viewOffset: 100 }));
 	});
 
 	it('performs a single scroll for a contiguous target already present (no anchor)', async () => {
diff --git a/app/views/RoomView/List/hooks/useFloatingDate.ts b/app/views/RoomView/List/hooks/useFloatingDate.ts
index e50e80bd88f..e98954912a7 100644
--- a/app/views/RoomView/List/hooks/useFloatingDate.ts
+++ b/app/views/RoomView/List/hooks/useFloatingDate.ts
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { type FlatListProps, type ViewToken } from 'react-native';
+import { type ViewabilityConfigCallbackPairs, type ViewToken } from '@legendapp/list/react-native';
 import { type SharedValue, useSharedValue, withTiming } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
 
 import dayjs from '~/lib/dayjs';
 import { type TAnyMessageModel } from '~/definitions';
@@ -10,7 +9,7 @@ const HIDE_DELAY = 1000;
 const FADE_IN_DURATION = 150;
 const FADE_OUT_DURATION = 300;
 
-type TViewabilityConfigCallbackPairs = NonNullable<FlatListProps<TAnyMessageModel>['viewabilityConfigCallbackPairs']>;
+type TViewabilityConfigCallbackPairs = ViewabilityConfigCallbackPairs<TAnyMessageModel>;
 
 interface IFloatingDateScrollEvents {
 	onBeginDrag: () => void;
@@ -26,12 +25,12 @@ interface IUseFloatingDate {
 	viewabilityConfigCallbackPairs: TViewabilityConfigCallbackPairs;
 }
 
-export const getHighestIndexViewableTs = (viewableItems: ViewToken<TAnyMessageModel>[]): Date | string | null =>
+export const getTopmostViewableTs = (viewableItems: ViewToken<TAnyMessageModel>[]): Date | string | null =>
 	viewableItems.reduce<{ index: number; ts: Date | string } | null>((top, { isViewable, index, item }) => {
 		if (!isViewable || !item?.ts || index == null) {
 			return top;
 		}
-		return !top || index > top.index ? { index, ts: item.ts } : top;
+		return !top || index < top.index ? { index, ts: item.ts } : top;
 	}, null)?.ts ?? null;
 
 export const useFloatingDate = (): IUseFloatingDate => {
@@ -45,7 +44,7 @@ export const useFloatingDate = (): IUseFloatingDate => {
 		{
 			viewabilityConfig: { itemVisiblePercentThreshold: 0 },
 			onViewableItemsChanged: ({ viewableItems }) => {
-				const next = getHighestIndexViewableTs(viewableItems);
+				const next = getTopmostViewableTs(viewableItems);
 				// keep the previous date when a fast fling outruns rendering and the batch comes back empty,
 				// so the pill doesn't unmount mid-fade and snap back at full opacity
 				if (!next) {
@@ -88,21 +87,9 @@ export const useFloatingDate = (): IUseFloatingDate => {
 
 	useEffect(() => cancelHide, [cancelHide]);
 
-	const show = useCallback((): void => {
-		'worklet';
-
-		scheduleOnRN(showNow);
-	}, [showNow]);
-
-	const hide = useCallback((): void => {
-		'worklet';
-
-		scheduleOnRN(hideAfterDelay);
-	}, [hideAfterDelay]);
-
 	const scrollEvents = useMemo<IFloatingDateScrollEvents>(
-		() => ({ onBeginDrag: show, onMomentumBegin: show, onEndDrag: hide, onMomentumEnd: hide }),
-		[show, hide]
+		() => ({ onBeginDrag: showNow, onMomentumBegin: showNow, onEndDrag: hideAfterDelay, onMomentumEnd: hideAfterDelay }),
+		[showNow, hideAfterDelay]
 	);
 
 	return { ts, opacity, scrollEvents, viewabilityConfigCallbackPairs };
diff --git a/app/views/RoomView/List/hooks/useScroll.ts b/app/views/RoomView/List/hooks/useScroll.ts
index ed53f23c4c0..756557cb102 100644
--- a/app/views/RoomView/List/hooks/useScroll.ts
+++ b/app/views/RoomView/List/hooks/useScroll.ts
@@ -1,6 +1,6 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
-import { type IListContainerRef, type IListProps, type TListRef, type TMessagesIdsRef } from '~/views/RoomView/definitions';
+import { type IListContainerRef, type TListRef, type TMessagesIdsRef } from '~/views/RoomView/definitions';
 import { type TAnyMessageModel } from '~/definitions';
 
 // Abort a jump whose target never re-observes within this window: release the anchor, drop to the Live
@@ -12,13 +12,6 @@ const HIGHLIGHT_TIMEOUT = 5000;
 // Capped so a target that never materialises aborts via the safety net instead of looping.
 const MAX_JUMP_GROWTH_RETRIES = 5;
 
-// VirtualizedList re-fires onScrollToIndexFailed synchronously, so defer each retry one frame to break
-// the recursion.
-const SCROLL_TO_INDEX_RETRY_DELAY = 50;
-// A deep target can sit ~30 rows past the measured frontier; each retry climbs ~one render batch, so the
-// cap must cover the distance (5 stalled short). Bounded so an unreachable target aborts, not loops.
-const MAX_SCROLL_TO_INDEX_RETRIES = 20;
-
 // animated:false snaps straight to the target instead of smooth-scrolling through every row between here
 // and a deep index — the latter reads as the list "hunting" for the message across several visible scrolls.
 const JUMP_SCROLL_POSITION = {
@@ -37,14 +30,14 @@ interface IPendingJump {
 }
 
 export const useScroll = ({
-	flatListRef,
+	listRef,
 	messages,
 	messagesIds,
 	highTs,
 	setHighTs,
 	fetchMessages
 }: {
-	flatListRef: TListRef;
+	listRef: TListRef;
 	messages: TAnyMessageModel[];
 	messagesIds: TMessagesIdsRef;
 	highTs: number | null;
@@ -54,18 +47,10 @@ export const useScroll = ({
 	const [highlightedMessageId, setHighlightedMessageId] = useState<string | null>(null);
 	const highlightTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);
 	const pendingJump = useRef<IPendingJump | null>(null);
-	// Most recent jump target. onScrollToIndexFailed can fire after completeJump clears pendingJump, so
-	// the retry handler reads this for the target index.
-	const lastJumpTargetId = useRef<string | null>(null);
-	// Bounds the onScrollToIndexFailed retry chain per jump (reset when a new jump starts).
-	const scrollFailRetries = useRef(0);
 	// Bounds the window-growth retries while waiting for a deep Anchored target to re-observe (reset per jump).
 	const jumpGrowthRetries = useRef(0);
 	// A jump-to-bottom deferred until the released live window emits (set when releasing an Anchored Window).
 	const pendingBottom = useRef(false);
-	// True across an Anchored → Live release: suppresses maintainVisibleContentPosition so the disjoint
-	// data swap can't apply a native offset adjustment that drags the pre-pinned viewport off-content.
-	const [isReleasing, setIsReleasing] = useState(false);
 
 	useEffect(
 		() => () => {
@@ -79,22 +64,14 @@ export const useScroll = ({
 		[]
 	);
 
-	// Back to live from an Anchored Window. The release swaps the (tall) anchored rows for the disjoint,
-	// shorter live tail in a single emit; a scroll offset deep enough for the tall content then sits past
-	// the short content, and an inverted list renders that as a blank wedge with the FAB stuck visible.
-	// Park the viewport at offset 0 (newest) BEFORE the swap: offset 0 is valid for any non-empty window,
-	// so the shorter tail cannot strand it, and scrolling the already-settled anchored content sidesteps
-	// the post-shrink layout race a deferred correction loses to. Suppress MVCP across the swap so its
-	// offset adjustment for the disjoint key set cannot drag the viewport back off-content.
+	// Back to live from an Anchored Window: release the bound, then scroll to the end once the live tail emits.
 	const jumpToBottom = () => {
 		if (highTs != null) {
-			flatListRef.current?.scrollToOffset({ offset: 0, animated: false });
 			pendingBottom.current = true;
-			setIsReleasing(true);
 			setHighTs(null);
 			return;
 		}
-		flatListRef.current?.scrollToOffset({ offset: -100 });
+		listRef.current?.scrollToEnd({ animated: true });
 	};
 
 	const setHighlightTimeout = () => {
@@ -143,47 +120,24 @@ export const useScroll = ({
 		}, JUMP_SAFETY_TIMEOUT);
 	};
 
-	const indexOfMessage = (messageId: string | null | undefined) =>
-		messageId ? (messagesIds.current?.findIndex(id => id === messageId) ?? -1) : -1;
-
-	// Re-scroll once the target's row has settled into the measured window. No-op until it has.
-	const reScrollWhenSettled = (targetId: string | null | undefined) => {
-		const index = indexOfMessage(targetId);
-		if (index !== -1) {
-			flatListRef.current?.scrollToIndex({
-				index,
-				...JUMP_SCROLL_POSITION
-			});
-		}
+	// messagesIds is newest-first; the list renders oldest-first.
+	const listIndexOfMessage = (messageId: string) => {
+		const ids = messagesIds.current ?? [];
+		const newestFirstIndex = ids.indexOf(messageId);
+		return newestFirstIndex === -1 ? -1 : ids.length - 1 - newestFirstIndex;
 	};
 
-	// No getItemLayout for these variable-height rows, so the first scroll uses an estimated offset and
-	// can undershoot while the target is unmeasured. It renders the row; a second scroll lands precisely.
-	// Re-read the index in case the window shifted a row between.
-	const scrollToTarget = (messageId: string, index: number) => {
-		flatListRef.current?.scrollToIndex({ index, ...JUMP_SCROLL_POSITION });
-		setTimeout(() => {
-			// A newer jump may now own the scroll; re-reading this old target would yank the list off it.
-			if (lastJumpTargetId.current !== messageId) {
-				return;
-			}
-			reScrollWhenSettled(messageId);
-		}, SCROLL_TO_INDEX_RETRY_DELAY);
+	const scrollToTarget = (index: number) => {
+		listRef.current?.scrollToIndex({ index, ...JUMP_SCROLL_POSITION });
 	};
 
-	// Release settled: the live tail has emitted (keyed on messages so this runs on the first live emit)
-	// and the viewport is already pinned at offset 0 from the pre-swap scroll. Re-pin in case the swap
-	// nudged it, then restore maintainVisibleContentPosition for normal live-tail following (safe at
-	// offset 0 — minIndexForVisible:0 keeps the newest row stable).
 	useLayoutEffect(() => {
 		if (!pendingBottom.current) {
 			return;
 		}
 		pendingBottom.current = false;
-		flatListRef.current?.scrollToOffset({ offset: 0, animated: false });
-		// eslint-disable-next-line react-hooks/set-state-in-effect -- the cascade is the fix: the swap render must paint with MVCP suppressed, the follow-up render restores it
-		setIsReleasing(false);
-	}, [messages, flatListRef]);
+		listRef.current?.scrollToEnd({ animated: false });
+	}, [messages, listRef]);
 
 	// On every re-observe, check whether the pending target has appeared; the first time it has, scroll
 	// once and complete.
@@ -192,7 +146,7 @@ export const useScroll = ({
 		if (!jump || jump.scrolled) {
 			return;
 		}
-		const index = indexOfMessage(jump.messageId);
+		const index = listIndexOfMessage(jump.messageId);
 		if (index === -1) {
 			// Anchored target deeper than the window: grow it by QUERY_SIZE (bounded) to pull it in; the safety
 			// net aborts if it never materialises.
@@ -205,7 +159,7 @@ export const useScroll = ({
 			return;
 		}
 		jump.scrolled = true;
-		scrollToTarget(jump.messageId, index);
+		scrollToTarget(index);
 		completeJump(jump);
 	};
 
@@ -221,42 +175,6 @@ export const useScroll = ({
 		onReObserveRef.current();
 	}, [messages]);
 
-	// The list could not measure the target's frame yet. VirtualizedList re-fires this synchronously with
-	// no getItemLayout, so an inline retry recurses; defer one frame to render more rows, capped so an
-	// unmeasurable target gives up.
-	const handleScrollToIndexFailed: IListProps['onScrollToIndexFailed'] = params => {
-		// Per-jump cap, reset only at jump start; resetting here would let a later failure defeat it.
-		if (scrollFailRetries.current >= MAX_SCROLL_TO_INDEX_RETRIES) {
-			return;
-		}
-		scrollFailRetries.current += 1;
-		setTimeout(() => {
-			// Re-read at fire time so a retry queued by a previous jump can't scroll to a stale index.
-			const targetId = pendingJump.current?.messageId ?? lastJumpTargetId.current;
-			const targetIndex = indexOfMessage(targetId);
-			if (targetIndex === -1) {
-				return;
-			}
-			// Scrolling straight to an unmeasured target doesn't move the viewport, so the window plateaus
-			// short. Step to the measured frontier first (that renders the next batch, advancing
-			// highestMeasuredFrameIndex), then re-attempt — it lands once measured, or re-fires to climb on.
-			if (targetIndex > params.highestMeasuredFrameIndex) {
-				flatListRef.current?.scrollToIndex({
-					index: params.highestMeasuredFrameIndex,
-					animated: false
-				});
-				setTimeout(() => {
-					reScrollWhenSettled(pendingJump.current?.messageId ?? lastJumpTargetId.current);
-				}, SCROLL_TO_INDEX_RETRY_DELAY);
-				return;
-			}
-			flatListRef.current?.scrollToIndex({
-				index: targetIndex,
-				...JUMP_SCROLL_POSITION
-			});
-		}, SCROLL_TO_INDEX_RETRY_DELAY);
-	};
-
 	const jumpToMessage: IListContainerRef['jumpToMessage'] = (messageId, highTsMs) =>
 		new Promise<void>(resolve => {
 			// Cancel any previous in-flight jump before starting a new one.
@@ -269,8 +187,6 @@ export const useScroll = ({
 				previous.resolve();
 			}
 
-			lastJumpTargetId.current = messageId;
-			scrollFailRetries.current = 0;
 			jumpGrowthRetries.current = 0;
 			const anchored = typeof highTsMs === 'number' && Number.isFinite(highTsMs);
 			const jump: IPendingJump = {
@@ -293,10 +209,10 @@ export const useScroll = ({
 			}
 
 			// Target may already be present (contiguous / local): resolve synchronously, still one scroll.
-			const index = indexOfMessage(messageId);
+			const index = listIndexOfMessage(messageId);
 			if (index !== -1 && !anchored) {
 				jump.scrolled = true;
-				scrollToTarget(messageId, index);
+				scrollToTarget(index);
 				completeJump(jump);
 			}
 		});
@@ -317,8 +233,6 @@ export const useScroll = ({
 		jumpToBottom,
 		jumpToMessage,
 		cancelJumpToMessage,
-		handleScrollToIndexFailed,
-		highlightedMessageId,
-		isReleasing
+		highlightedMessageId
 	};
 };
diff --git a/app/views/RoomView/List/index.tsx b/app/views/RoomView/List/index.tsx
index 7700692d83c..9d07bd19c7b 100644
--- a/app/views/RoomView/List/index.tsx
+++ b/app/views/RoomView/List/index.tsx
@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useMemo } from 'react';
 
 import { useDebounce } from '~/lib/methods/helpers';
 import EmptyRoom from './components/EmptyRoom';
@@ -9,7 +9,7 @@ import { useMessages } from './hooks/useMessages';
 import { useScroll } from './hooks/useScroll';
 
 const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
-	({ rid, tmid, t, onLongPress, showMessageInMainThread, hideSystemMessages, flatListRef, serverVersion }, ref) => {
+	({ rid, tmid, t, onLongPress, showMessageInMainThread, hideSystemMessages, listRef, serverVersion }, ref) => {
 		const [messages, messagesIds, fetchMessages, { highTs, setHighTs }] = useMessages({
 			rid,
 			tmid,
@@ -18,21 +18,21 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 			t,
 			serverVersion
 		});
-		const { jumpToBottom, jumpToMessage, cancelJumpToMessage, handleScrollToIndexFailed, highlightedMessageId, isReleasing } =
-			useScroll({
-				flatListRef,
-				messages,
-				messagesIds,
-				highTs,
-				setHighTs,
-				fetchMessages
-			});
+		const { jumpToBottom, jumpToMessage, cancelJumpToMessage, highlightedMessageId } = useScroll({
+			listRef,
+			messages,
+			messagesIds,
+			highTs,
+			setHighTs,
+			fetchMessages
+		});
+		const oldestFirstMessages = useMemo(() => messages.toReversed(), [messages]);
 
-		const onEndReached = useDebounce(() => {
+		const onStartReached = useDebounce(() => {
 			fetchMessages();
 		}, 300);
 
-		useEffect(() => onEndReached.cancel, [onEndReached]);
+		useEffect(() => onStartReached.cancel, [onStartReached]);
 
 		useImperativeHandle(ref, () => ({
 			jumpToMessage,
@@ -43,7 +43,7 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 		const renderItem: IListProps['renderItem'] = ({ item, index }) => (
 			<MessageRow
 				item={item}
-				previousItem={messages[index + 1]}
+				previousItem={oldestFirstMessages[index - 1]}
 				highlightedMessage={highlightedMessageId ?? undefined}
 				onLongPress={onLongPress}
 			/>
@@ -53,21 +53,13 @@ const ListContainer = forwardRef<IListContainerRef, IListContainerProps>(
 			<>
 				<EmptyRoom rid={rid} length={messages.length} />
 				<List
-					flatListRef={flatListRef}
-					data={messages}
+					listRef={listRef}
+					data={oldestFirstMessages}
+					extraData={highlightedMessageId}
 					renderItem={renderItem}
-					onEndReached={onEndReached}
-					onScrollToIndexFailed={handleScrollToIndexFailed}
+					onStartReached={onStartReached}
 					jumpToBottom={jumpToBottom}
 					isAnchored={highTs != null}
-					maintainVisibleContentPosition={
-						isReleasing
-							? undefined
-							: {
-									minIndexForVisible: 0,
-									autoscrollToTopThreshold: 0
-								}
-					}
 				/>
 			</>
 		);
diff --git a/app/views/RoomView/LoadMore/index.tsx b/app/views/RoomView/LoadMore/index.tsx
index ab6ebbf56be..afc8ddfe1cd 100644
--- a/app/views/RoomView/LoadMore/index.tsx
+++ b/app/views/RoomView/LoadMore/index.tsx
@@ -1,5 +1,6 @@
 import { memo, type ReactElement, useEffect } from 'react';
-import { ActivityIndicator, StyleSheet, Text } from 'react-native';
+import { ActivityIndicator, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 
 import { MessageTypeLoad } from '~/lib/constants/messageTypeLoad';
@@ -65,14 +66,14 @@ const LoadMore = memo(
 
 		return (
 			<>
-				<MessageSeparator ts={dateSeparator} unread={showUnreadSeparator} />
-				<Touch onPress={handleLoad} style={styles.button} enabled={!loading}>
+				<Touch onPress={handleLoad} style={styles.button} disabled={loading}>
 					{loading ? (
 						<ActivityIndicator color={colors.fontSecondaryInfo} />
 					) : (
-						<Text style={[styles.text, { color: colors.fontTitlesLabels }]}>{I18n.t(text)}</Text>
+						<PlainText style={[styles.text, { color: colors.fontTitlesLabels }]}>{I18n.t(text)}</PlainText>
 					)}
 				</Touch>
+				<MessageSeparator ts={dateSeparator} unread={showUnreadSeparator} />
 			</>
 		);
 	}
diff --git a/app/views/RoomView/RoomScreen.tsx b/app/views/RoomView/RoomScreen.tsx
index 07cb4ee497a..2c6d0bef0d5 100644
--- a/app/views/RoomView/RoomScreen.tsx
+++ b/app/views/RoomView/RoomScreen.tsx
@@ -8,6 +8,7 @@ import JoinCode from './components/JoinCode';
 import { type IJoinCode, type IRoomScreenProps } from './definitions';
 import { RoomProviders } from './components/RoomProviders';
 import { RoomAnnouncementBanner } from './components/RoomAnnouncementBanner';
+import { RoomBodyFocusAnchor } from './components/RoomBodyFocusAnchor';
 import { RoomFooter } from './components/RoomFooter/RoomFooter';
 import { RoomMessageActions } from './components/RoomMessageActions';
 import { RoomMessageList } from './components/RoomMessageList';
@@ -36,7 +37,7 @@ const RoomScreen = ({ route, rid, t, tmid, roomStore, ready }: IRoomScreenProps)
 		roomScreen,
 		messageComposerRef,
 		listContainerRef,
-		flatListRef,
+		listRef,
 		messageActionsRef,
 		messageErrorActionsRef,
 		onThreadPress,
@@ -87,36 +88,38 @@ const RoomScreen = ({ route, rid, t, tmid, roomStore, ready }: IRoomScreenProps)
 					editCancel={onEditCancel}
 					editRequest={onEditRequest}
 					onSendMessage={sendMessage}>
-					<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='room-view'>
-						{!tmid ? <RoomAnnouncementBanner /> : null}
-						<RoomMessageList
-							tmid={tmid}
-							listContainerRef={listContainerRef}
-							flatListRef={flatListRef}
-							onLongPress={onMessageLongPress}
-							onThreadPress={onThreadPress}
-							onReactionPress={onReactionPress}
-							sendMessage={sendMessage}
-							jumpToMessage={jumpToMessage}
-							closeEmojiAndAction={closeEmojiAndAction}
-							reactionInit={onReactionInit}
-							errorActionsShow={errorActionsShow}
-						/>
-						<RoomFooter messageComposerRef={messageComposerRef} joinCodeRef={joinCodeRef} ready={ready} />
-						<RoomMessageActions
-							tmid={tmid}
-							messageActionsRef={messageActionsRef}
-							messageErrorActionsRef={messageErrorActionsRef}
-							editInit={onEditInit}
-							replyInit={onReplyInit}
-							quoteInit={onQuoteInit}
-							reactionInit={onReactionInit}
-							onReactionPress={onReactionPress}
-							jumpToMessage={jumpToMessage}
-						/>
-						<RoomUploadProgress />
-						<JoinCode ref={joinCodeRef} onJoin={onJoin} rid={roomRid} t={roomType} />
-					</SafeAreaView>
+					<RoomBodyFocusAnchor>
+						<SafeAreaView style={{ backgroundColor: colors.surfaceRoom }} testID='room-view'>
+							{!tmid ? <RoomAnnouncementBanner /> : null}
+							<RoomMessageActions
+								tmid={tmid}
+								messageActionsRef={messageActionsRef}
+								messageErrorActionsRef={messageErrorActionsRef}
+								editInit={onEditInit}
+								replyInit={onReplyInit}
+								quoteInit={onQuoteInit}
+								reactionInit={onReactionInit}
+								onReactionPress={onReactionPress}
+								jumpToMessage={jumpToMessage}>
+								<RoomMessageList
+									tmid={tmid}
+									listContainerRef={listContainerRef}
+									listRef={listRef}
+									onLongPress={onMessageLongPress}
+									onThreadPress={onThreadPress}
+									onReactionPress={onReactionPress}
+									sendMessage={sendMessage}
+									jumpToMessage={jumpToMessage}
+									closeEmojiAndAction={closeEmojiAndAction}
+									reactionInit={onReactionInit}
+									errorActionsShow={errorActionsShow}
+								/>
+							</RoomMessageActions>
+							<RoomFooter messageComposerRef={messageComposerRef} joinCodeRef={joinCodeRef} ready={ready} />
+							<RoomUploadProgress />
+							<JoinCode ref={joinCodeRef} onJoin={onJoin} rid={roomRid} t={roomType} />
+						</SafeAreaView>
+					</RoomBodyFocusAnchor>
 				</RoomProviders>
 			</RoomScreenContext.Provider>
 		</RoomStoreContext.Provider>
diff --git a/app/views/RoomView/components/Banner.tsx b/app/views/RoomView/components/Banner.tsx
index 3db22cc62c1..c61d4ab14d0 100644
--- a/app/views/RoomView/components/Banner.tsx
+++ b/app/views/RoomView/components/Banner.tsx
@@ -1,8 +1,9 @@
 import { memo, useState } from 'react';
-import { Text } from 'react-native';
-import { BorderlessButton, GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
+import { PlainText } from '~/containers/PlainText';
+import { GestureHandlerRootView, ScrollView } from 'react-native-gesture-handler';
 import Modal from 'react-native-modal';
 
+import { BorderlessButton } from '~/containers/GestureButtons';
 import Markdown, { MarkdownPreview } from '~/containers/markdown';
 import { CustomIcon } from '~/containers/CustomIcon';
 import styles from '../styles';
@@ -41,7 +42,7 @@ const Banner = memo(({ text, title, bannerClosed, closeBanner }: IBannerProps) =
 					animationIn='fadeIn'
 					animationOut='fadeOut'>
 					<GestureHandlerRootView style={[styles.modalView, { backgroundColor: colors.surfaceNeutral }]}>
-						<Text style={[styles.bannerModalTitle, { color: colors.fontSecondaryInfo }]}>{title}</Text>
+						<PlainText style={[styles.bannerModalTitle, { color: colors.fontSecondaryInfo }]}>{title}</PlainText>
 						<ScrollView style={styles.modalScrollView}>
 							<Markdown msg={text} />
 						</ScrollView>
diff --git a/app/views/RoomView/components/JoinCode.tsx b/app/views/RoomView/components/JoinCode.tsx
index d91eb4f81f6..e2ab71c3ac7 100644
--- a/app/views/RoomView/components/JoinCode.tsx
+++ b/app/views/RoomView/components/JoinCode.tsx
@@ -1,5 +1,6 @@
 import { memo, useImperativeHandle, useState } from 'react';
-import { InteractionManager, StyleSheet, Text, type TextInput, View } from 'react-native';
+import { InteractionManager, StyleSheet, type TextInput, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import Modal from 'react-native-modal';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
@@ -66,7 +67,7 @@ const JoinCode = memo(({ rid, t, onJoin, ref }: IJoinCodeProps) => {
 	useImperativeHandle(ref, () => ({ show }));
 
 	return (
-		<Modal avoidKeyboard useNativeDriver isVisible={visible} hideModalContentWhileAnimating>
+		<Modal avoidKeyboard isVisible={visible}>
 			<GestureHandlerRootView style={styles.container} testID='join-code'>
 				<View
 					style={[
@@ -74,7 +75,7 @@ const JoinCode = memo(({ rid, t, onJoin, ref }: IJoinCodeProps) => {
 						isMasterDetail && [sharedStyles.modalFormSheet, styles.tablet],
 						{ backgroundColor: colors.surfaceRoom }
 					]}>
-					<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('Insert_Join_Code')}</Text>
+					<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>{I18n.t('Insert_Join_Code')}</PlainText>
 					<FormTextInput
 						value={code}
 						inputRef={(e: TextInput | null) => {
diff --git a/app/views/RoomView/components/RightButtons/HeaderCallButton.tsx b/app/views/RoomView/components/RightButtons/HeaderCallButton.tsx
index de7a9c68316..c884c12b757 100644
--- a/app/views/RoomView/components/RightButtons/HeaderCallButton.tsx
+++ b/app/views/RoomView/components/RightButtons/HeaderCallButton.tsx
@@ -1,10 +1,7 @@
-import { type ReactElement, useEffect, useRef } from 'react';
+import { type ReactElement } from 'react';
 
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
-import { useVideoConf } from '~/lib/hooks/useVideoConf';
-import { useNewMediaCall } from '~/lib/hooks/useNewMediaCall';
-
-const DOUBLE_TAP_WINDOW_MS = 300;
+import { useHeaderCallPress } from './useHeaderCallPress';
 
 export const HeaderCallButton = ({
 	rid,
@@ -15,61 +12,19 @@ export const HeaderCallButton = ({
 	disabled: boolean;
 	accessibilityLabel: string;
 }): ReactElement | null => {
-	const { showInitCallActionSheet, callEnabled, disabledTooltip } = useVideoConf(rid);
-	const { openNewMediaCall, startCallImmediate, hasMediaCallPermission, isInActiveCall } = useNewMediaCall(rid);
-
-	const lastTapRef = useRef(0);
-	const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-	useEffect(
-		() => () => {
-			if (pendingTimerRef.current) {
-				clearTimeout(pendingTimerRef.current);
-				pendingTimerRef.current = null;
-			}
-		},
-		[]
-	);
+	const { callPresent, isCallDisabled, onPressCall } = useHeaderCallPress(rid);
 
-	const handleVoipPress = () => {
-		const now = Date.now();
-		if (pendingTimerRef.current && now - lastTapRef.current < DOUBLE_TAP_WINDOW_MS) {
-			clearTimeout(pendingTimerRef.current);
-			pendingTimerRef.current = null;
-			lastTapRef.current = 0;
-			startCallImmediate();
-			return;
-		}
-		lastTapRef.current = now;
-		pendingTimerRef.current = setTimeout(() => {
-			pendingTimerRef.current = null;
-			openNewMediaCall();
-		}, DOUBLE_TAP_WINDOW_MS);
-	};
-
-	if (hasMediaCallPermission) {
-		return (
-			<HeaderButton.Item
-				accessibilityLabel={accessibilityLabel}
-				disabled={disabled || isInActiveCall}
-				iconName='phone'
-				onPress={handleVoipPress}
-				testID='room-view-header-call'
-			/>
-		);
-	}
-
-	if (callEnabled) {
-		return (
-			<HeaderButton.Item
-				accessibilityLabel={accessibilityLabel}
-				disabled={disabledTooltip || disabled || isInActiveCall}
-				iconName='phone'
-				onPress={showInitCallActionSheet}
-				testID='room-view-header-call'
-			/>
-		);
+	if (!callPresent) {
+		return null;
 	}
 
-	return null;
+	return (
+		<HeaderButton.Item
+			accessibilityLabel={accessibilityLabel}
+			disabled={disabled || isCallDisabled}
+			iconName='phone'
+			onPress={onPressCall}
+			testID='room-view-header-call'
+		/>
+	);
 };
diff --git a/app/views/RoomView/components/RightButtons/RightButtons.tsx b/app/views/RoomView/components/RightButtons/RightButtons.tsx
index d147c1a75b1..aac8363051d 100644
--- a/app/views/RoomView/components/RightButtons/RightButtons.tsx
+++ b/app/views/RoomView/components/RightButtons/RightButtons.tsx
@@ -4,6 +4,7 @@ import { useShallow } from 'zustand/react/shallow';
 
 import { type RoomStore } from '~/views/RoomView/definitions';
 import { fromSubscription } from '~/views/RoomView/stores/RoomStoreContext';
+import { getRoomHeaderMode } from '~/views/RoomView/helpers/getRoomHeaderMode';
 import { OmnichannelRightButtons } from './OmnichannelRightButtons';
 import { RoomRightButtons } from './RoomRightButtons';
 import { ThreadRightButtons } from './ThreadRightButtons';
@@ -24,22 +25,15 @@ const RightButtons = ({ rid, tmid, roomStore }: IRightButtonsProps): ReactElemen
 		}))
 	);
 
-	if (!rid) {
-		return null;
-	}
+	const mode = getRoomHeaderMode({ rid, tmid, t, status, membership });
 
-	if (membership === 'invited') {
+	if (!rid || mode === 'none') {
 		return null;
 	}
-
-	if (t === 'l') {
-		if (status === 'queued' || membership !== 'subscribed') {
-			return null;
-		}
+	if (mode === 'omnichannel') {
 		return <OmnichannelRightButtons rid={rid} roomStore={roomStore} />;
 	}
-
-	if (tmid) {
+	if (mode === 'thread' && tmid) {
 		return <ThreadRightButtons tmid={tmid} />;
 	}
 
diff --git a/app/views/RoomView/components/RightButtons/RoomRightButtons.tsx b/app/views/RoomView/components/RightButtons/RoomRightButtons.tsx
index d7dfc8f6179..d28c9b69013 100644
--- a/app/views/RoomView/components/RightButtons/RoomRightButtons.tsx
+++ b/app/views/RoomView/components/RightButtons/RoomRightButtons.tsx
@@ -1,27 +1,11 @@
 import { type ReactElement } from 'react';
-import { useStore } from 'zustand';
-import { useShallow } from 'zustand/react/shallow';
-import { useNavigation } from '@react-navigation/native';
 
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
-import { type ISubscription, type SubscriptionType, type TSubscriptionModel, type TUserStatus } from '~/definitions';
 import i18n from '~/i18n';
-import { getRoomTitle, isGroupChat } from '~/lib/methods/helpers';
-import { events, logEvent } from '~/lib/methods/helpers/log';
-import getRoomAccessibilityLabel from '~/lib/helpers/getRoomAccessibilityLabel';
-import { useAppSelector } from '~/lib/hooks/useAppSelector';
-import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
-import { usePermissions } from '~/lib/hooks/usePermissions';
-import { useSetting } from '~/lib/hooks/useSetting';
-import { getUserSelector } from '~/selectors/login';
 import { useTheme } from '~/theme';
 import { type RoomStore } from '~/views/RoomView/definitions';
-import { isSubscriptionModel } from '~/definitions/TRoom';
-import { fromSubscription } from '~/views/RoomView/stores/RoomStoreContext';
-import { useE2EEStatus } from '~/views/RoomView/hooks/useE2EEStatus';
-import { useSubscriptionUnreads } from '~/views/RoomView/hooks/useSubscriptionUnreads';
-import { navigateToScreen, type TRoomStackNavigation } from '~/views/RoomView/services/navigateToScreen';
 import { HeaderCallButton } from './HeaderCallButton';
+import { useRoomRightButtonsData } from './useRoomRightButtonsData';
 
 interface IRoomRightButtonsProps {
 	rid: string;
@@ -29,87 +13,24 @@ interface IRoomRightButtonsProps {
 }
 
 export const RoomRightButtons = ({ rid, roomStore }: IRoomRightButtonsProps): ReactElement => {
-	const navigation = useNavigation<TRoomStackNavigation>();
-	const isMasterDetail = useMasterDetail();
 	const { colors } = useTheme();
-
-	const userId = useAppSelector(state => getUserSelector(state).id);
-	const threadsEnabled = useSetting('Threads_enabled') as boolean;
-	const issuesWithNotifications = useAppSelector(state => state.troubleshootingNotification.issuesWithNotifications);
-
-	const { t, status, roomName, roomIsGroupChat, teamMain, encrypted, disableNotifications } = useStore(
-		roomStore,
-		useShallow(s => {
-			const room = s.room;
-			return {
-				t: room.t as SubscriptionType,
-				status: fromSubscription(r => r.status, undefined)(s),
-				roomName: getRoomTitle(room),
-				roomIsGroupChat: isGroupChat(room as ISubscription),
-				teamMain: fromSubscription(r => !!r.teamMain, false)(s),
-				encrypted: fromSubscription(r => r.encrypted, undefined)(s),
-				disableNotifications: (room as ISubscription).disableNotifications
-			};
-		})
-	);
-	const { hasE2EEWarning } = useE2EEStatus(roomStore);
-	const { tunread, tunreadUser, tunreadGroup, isSelfDm } = useSubscriptionUnreads(roomStore, userId);
-	const [canToggleEncryption] = usePermissions(['toggle-room-e2e-encryption'], rid);
-
-	const goThreadsView = () => {
-		logEvent(events.ROOM_GO_THREADS);
-		navigateToScreen({ navigation, isMasterDetail, screen: 'ThreadMessagesView', params: { rid, t } });
-	};
-
-	const navigateToNotificationOrPushTroubleshoot = () => {
-		const room = roomStore.getState().room;
-		if (!isSubscriptionModel(room)) {
-			return;
-		}
-		if (!issuesWithNotifications) {
-			navigateToScreen({
-				navigation,
-				isMasterDetail,
-				screen: 'NotificationPrefView',
-				params: { rid, room: room as TSubscriptionModel }
-			});
-		} else {
-			navigateToScreen({ navigation, isMasterDetail, screen: 'PushTroubleshootView' });
-		}
-	};
-
-	const goSearchView = () => {
-		logEvent(events.ROOM_GO_SEARCH);
-		navigateToScreen({
-			navigation,
-			isMasterDetail,
-			screen: 'SearchMessagesView',
-			params: isMasterDetail ? { rid, t, encrypted, showCloseModal: true } : { rid, t, encrypted }
-		});
-	};
-
-	const goE2EEToggleRoomView = () => {
-		logEvent(events.ROOM_GO_E2EE);
-		navigateToScreen({ navigation, isMasterDetail, screen: 'E2EEToggleRoomView', params: { rid } });
-	};
-
-	const threadsAccessibilityLabel = () => {
-		if (!tunread.length) {
-			return i18n.t('Threads');
-		}
-		if (tunreadUser?.length) {
-			return i18n.t('Threads_dm_unread', { unread: tunreadUser?.length });
-		}
-		if (tunreadGroup?.length) {
-			return i18n.t('Threads_group_unread', { unread: tunreadGroup?.length });
-		}
-		return i18n.t('Threads_unread', { unread: tunread?.length });
-	};
-
-	const accessibilityRoomName =
-		!roomIsGroupChat && t === 'd' && !!userId
-			? roomName
-			: getRoomAccessibilityLabel({ type: t, userId, isGroupChat: roomIsGroupChat, status: status as TUserStatus, teamMain });
+	const {
+		threadsEnabled,
+		issuesWithNotifications,
+		disableNotifications,
+		hasE2EEWarning,
+		canToggleEncryption,
+		isSelfDm,
+		tunread,
+		tunreadUser,
+		tunreadGroup,
+		callAccessibilityLabel,
+		goThreadsView,
+		navigateToNotificationOrPushTroubleshoot,
+		goSearchView,
+		goE2EEToggleRoomView,
+		threadsAccessibilityLabel
+	} = useRoomRightButtonsData(rid, roomStore);
 
 	return (
 		<HeaderButton.Container>
@@ -130,16 +51,10 @@ export const RoomRightButtons = ({ rid, roomStore }: IRoomRightButtonsProps): Re
 					disabled={hasE2EEWarning}
 				/>
 			) : null}
-			{!isSelfDm ? (
-				<HeaderCallButton
-					accessibilityLabel={i18n.t('Call_room_name', { roomName: accessibilityRoomName })}
-					rid={rid}
-					disabled={hasE2EEWarning}
-				/>
-			) : null}
+			{!isSelfDm ? <HeaderCallButton accessibilityLabel={callAccessibilityLabel} rid={rid} disabled={hasE2EEWarning} /> : null}
 			{threadsEnabled ? (
 				<HeaderButton.Item
-					accessibilityLabel={threadsAccessibilityLabel()}
+					accessibilityLabel={threadsAccessibilityLabel}
 					iconName='threads'
 					onPress={goThreadsView}
 					testID='room-view-header-threads'
diff --git a/app/views/RoomView/components/RightButtons/__tests__/RoomRightButtons.test.tsx b/app/views/RoomView/components/RightButtons/__tests__/RoomRightButtons.test.tsx
index db2d60dbb2e..02342646251 100644
--- a/app/views/RoomView/components/RightButtons/__tests__/RoomRightButtons.test.tsx
+++ b/app/views/RoomView/components/RightButtons/__tests__/RoomRightButtons.test.tsx
@@ -20,8 +20,8 @@ jest.mock('~/lib/hooks/useMasterDetail', () => ({
 
 jest.mock('~/theme', () => ({ useTheme: () => ({ colors: { fontDanger: '#f00' } }) }));
 jest.mock('~/lib/helpers/getRoomAccessibilityLabel', () => ({ __esModule: true, default: () => 'channel label' }));
+
 jest.mock('~/lib/methods/helpers', () => ({
-	...jest.requireActual('~/lib/methods/helpers'),
 	getRoomTitle: () => 'Room Title',
 	isGroupChat: () => false
 }));
@@ -68,6 +68,21 @@ jest.mock('~/lib/hooks/usePermissions', () => ({
 	usePermissions: () => [mockCanToggleEncryption]
 }));
 
+let mockCallEnabled = false;
+jest.mock('~/lib/hooks/useVideoConf', () => ({
+	useVideoConf: () => ({ showInitCallActionSheet: jest.fn(), callEnabled: mockCallEnabled, disabledTooltip: false })
+}));
+
+let mockHasMediaCallPermission = false;
+jest.mock('~/lib/hooks/useNewMediaCall', () => ({
+	useNewMediaCall: () => ({
+		openNewMediaCall: jest.fn(),
+		startCallImmediate: jest.fn(),
+		hasMediaCallPermission: mockHasMediaCallPermission,
+		isInActiveCall: false
+	})
+}));
+
 jest.mock('~/containers/Header/components/HeaderButton', () => {
 	const ReactActual = jest.requireActual('react');
 	return {
@@ -123,21 +138,22 @@ describe('RoomRightButtons', () => {
 		mockHasE2EEWarning = false;
 		mockUnreads = { tunread: [], tunreadUser: [], tunreadGroup: [], isSelfDm: false };
 		mockCanToggleEncryption = false;
+		mockCallEnabled = true;
+		mockHasMediaCallPermission = false;
 	});
 
-	it('renders the call, threads and search buttons for a regular channel', () => {
-		renderRoomRightButtons();
-
-		expect(screen.getByTestId('room-view-header-threads')).toHaveProp('iconName', 'threads');
-		expect(screen.getByTestId('room-view-search')).toHaveProp('accessibilityLabel', 'Search messages');
-		expect(screen.queryByTestId('room-view-header-encryption')).not.toBeOnTheScreen();
-		expect(screen.queryByTestId('room-view-push-troubleshoot')).not.toBeOnTheScreen();
-	});
+	it('renders every present item directly with no overflow menu', () => {
+		mockHasE2EEWarning = true;
+		mockCanToggleEncryption = true;
+		mockAppState = { ...mockAppState, troubleshootingNotification: { issuesWithNotifications: true } };
 
-	it('labels the call button with the room accessibility name', () => {
 		renderRoomRightButtons();
 
-		expect(screen.getByTestId('header-call-button-stub')).toHaveProp('accessibilityLabel', 'Call channel label');
+		expect(screen.getByTestId('room-view-header-encryption')).toBeOnTheScreen();
+		expect(screen.getByTestId('room-view-push-troubleshoot')).toBeOnTheScreen();
+		expect(screen.getByTestId('room-view-header-threads')).toBeOnTheScreen();
+		expect(screen.getByTestId('room-view-search')).toBeOnTheScreen();
+		expect(screen.queryByTestId('room-view-header-more')).not.toBeOnTheScreen();
 	});
 
 	it('hides the call button on a self DM', () => {
@@ -147,29 +163,14 @@ describe('RoomRightButtons', () => {
 		renderRoomRightButtons();
 
 		expect(screen.queryByTestId('header-call-button-stub')).not.toBeOnTheScreen();
-		expect(screen.getByTestId('room-view-search')).toBeOnTheScreen();
 	});
 
-	it('enables the encryption button and disables the others on an e2ee warning with permission', () => {
-		mockHasE2EEWarning = true;
-		mockCanToggleEncryption = true;
-		mockAppState = { ...mockAppState, troubleshootingNotification: { issuesWithNotifications: true } };
-
-		renderRoomRightButtons();
-
-		expect(screen.getByTestId('room-view-header-encryption')).toHaveProp('disabled', false);
-		expect(screen.getByTestId('room-view-header-threads')).toHaveProp('disabled', true);
-		expect(screen.getByTestId('room-view-search')).toHaveProp('disabled', true);
-		expect(screen.getByTestId('header-call-button-stub')).toHaveProp('disabled', true);
-		expect(screen.getByTestId('room-view-push-troubleshoot')).toHaveProp('disabled', true);
-	});
-
-	it('disables the encryption button on an e2ee warning without permission', () => {
-		mockHasE2EEWarning = true;
+	it('hides the threads button when threads are disabled', () => {
+		mockThreadsEnabled = false;
 
 		renderRoomRightButtons();
 
-		expect(screen.getByTestId('room-view-header-encryption')).toHaveProp('disabled', true);
+		expect(screen.queryByTestId('room-view-header-threads')).not.toBeOnTheScreen();
 	});
 
 	it.each([false, true])('routes notification issues to push troubleshooting (master-detail: %s)', isMasterDetail => {
@@ -179,7 +180,6 @@ describe('RoomRightButtons', () => {
 
 		renderRoomRightButtons();
 
-		expect(screen.getByTestId('room-view-push-troubleshoot')).toHaveProp('color', '#f00');
 		fireEvent.press(screen.getByTestId('room-view-push-troubleshoot'));
 		expect(mockNavigation.navigate).toHaveBeenCalledWith(
 			...(isMasterDetail
@@ -188,120 +188,28 @@ describe('RoomRightButtons', () => {
 		);
 	});
 
-	it.each([false, true])('routes disabled Room notifications to preferences (master-detail: %s)', isMasterDetail => {
-		mockIsMasterDetail = isMasterDetail;
-		mockRoomState = { room: { id: 'rid-1', rid: 'rid-1', t: 'c', name: 'general', disableNotifications: true } };
-
-		renderRoomRightButtons();
-
-		expect(screen.getByTestId('room-view-push-troubleshoot')).toHaveProp('color', '');
-		fireEvent.press(screen.getByTestId('room-view-push-troubleshoot'));
-		const params = { rid: 'rid-1', room: mockRoomState.room };
-		expect(mockNavigation.navigate).toHaveBeenCalledWith(
-			...(isMasterDetail ? ['ModalStackNavigator', { screen: 'NotificationPrefView', params }] : ['NotificationPrefView', params])
-		);
-	});
-
-	it('does not navigate from the notification button without a subscription', () => {
-		mockRoomState = { room: { rid: 'rid-1', t: 'c', name: 'general', disableNotifications: true } };
-
-		renderRoomRightButtons();
-
-		fireEvent.press(screen.getByTestId('room-view-push-troubleshoot'));
-
-		expect(mockNavigation.navigate).not.toHaveBeenCalled();
-	});
-
-	it('hides the threads button when threads are disabled', () => {
-		mockThreadsEnabled = false;
-
-		renderRoomRightButtons();
-
-		expect(screen.queryByTestId('room-view-header-threads')).not.toBeOnTheScreen();
-		expect(screen.getByTestId('room-view-search')).toBeOnTheScreen();
-	});
-
-	it('labels the threads button without unreads', () => {
-		renderRoomRightButtons();
-
-		expect(screen.getByTestId('room-view-header-threads')).toHaveProp('accessibilityLabel', 'Threads');
-	});
-
-	it('labels the threads button with the direct mention unread count', () => {
-		mockUnreads = { ...mockUnreads, tunread: ['tm-1'], tunreadUser: ['tm-1'] };
-
-		renderRoomRightButtons();
-
-		expect(screen.getByTestId('room-view-header-threads')).toHaveProp('accessibilityLabel', 'Threads, 1 unread, direct mention');
-	});
-
-	it('labels the threads button with the group mention unread count', () => {
-		mockUnreads = { ...mockUnreads, tunread: ['tm-1'], tunreadGroup: ['tm-1'] };
-
-		renderRoomRightButtons();
-
-		expect(screen.getByTestId('room-view-header-threads')).toHaveProp('accessibilityLabel', 'Threads, 1 unread, group mention');
-	});
-
-	it('labels the threads button with the plain unread count', () => {
-		mockUnreads = { ...mockUnreads, tunread: ['tm-1', 'tm-2'] };
-
-		renderRoomRightButtons();
-
-		expect(screen.getByTestId('room-view-header-threads')).toHaveProp('accessibilityLabel', 'Threads, 2 unread');
-	});
-
-	it('navigates to the threads and search screens on stack mode', () => {
+	it('navigates to the threads screen', () => {
 		mockRoomState = { room: { id: 'rid-1', rid: 'rid-1', t: 'c', name: 'general', encrypted: true } };
 
 		renderRoomRightButtons();
 
 		fireEvent.press(screen.getByTestId('room-view-header-threads'));
 		expect(mockNavigation.navigate).toHaveBeenCalledWith('ThreadMessagesView', { rid: 'rid-1', t: 'c' });
-
-		fireEvent.press(screen.getByTestId('room-view-search'));
-		expect(mockNavigation.navigate).toHaveBeenCalledWith('SearchMessagesView', { rid: 'rid-1', t: 'c', encrypted: true });
-	});
-
-	it('navigates through the modal stack on master-detail mode', () => {
-		mockIsMasterDetail = true;
-		mockRoomState = { room: { id: 'rid-1', rid: 'rid-1', t: 'c', name: 'general', encrypted: true } };
-
-		renderRoomRightButtons();
-
-		fireEvent.press(screen.getByTestId('room-view-header-threads'));
-		expect(mockNavigation.navigate).toHaveBeenCalledWith('ModalStackNavigator', {
-			screen: 'ThreadMessagesView',
-			params: { rid: 'rid-1', t: 'c' }
-		});
-
-		fireEvent.press(screen.getByTestId('room-view-search'));
-		expect(mockNavigation.navigate).toHaveBeenCalledWith('ModalStackNavigator', {
-			screen: 'SearchMessagesView',
-			params: { rid: 'rid-1', t: 'c', encrypted: true, showCloseModal: true }
-		});
 	});
 
-	it.each([false, true])('offers encryption navigation while other buttons are disabled (master-detail: %s)', isMasterDetail => {
-		mockIsMasterDetail = isMasterDetail;
+	it('offers encryption navigation while other items are disabled', () => {
 		mockHasE2EEWarning = true;
 		mockCanToggleEncryption = true;
 		mockAppState = { ...mockAppState, troubleshootingNotification: { issuesWithNotifications: true } };
 		mockRoomState = { room: { id: 'rid-1', rid: 'rid-1', t: 'c', name: 'general' } };
 		renderRoomRightButtons();
 
-		expect(screen.getByTestId('room-view-header-threads')).toHaveProp('disabled', true);
-		expect(screen.getByTestId('room-view-search')).toHaveProp('disabled', true);
-		expect(screen.getByTestId('room-view-push-troubleshoot')).toHaveProp('disabled', true);
-		expect(screen.getByTestId('room-view-header-encryption')).toHaveProp('disabled', false);
+		const encryptionButton = screen.getByTestId('room-view-header-encryption');
+		expect(encryptionButton).toHaveProp('disabled', false);
 
-		fireEvent.press(screen.getByTestId('room-view-header-encryption'));
+		fireEvent.press(encryptionButton);
 		expect(logEvent).toHaveBeenCalledTimes(1);
 		expect(logEvent).toHaveBeenCalledWith(events.ROOM_GO_E2EE);
-		expect(mockNavigation.navigate).toHaveBeenCalledWith(
-			...(isMasterDetail
-				? ['ModalStackNavigator', { screen: 'E2EEToggleRoomView', params: { rid: 'rid-1' } }]
-				: ['E2EEToggleRoomView', { rid: 'rid-1' }])
-		);
+		expect(mockNavigation.navigate).toHaveBeenCalledWith('E2EEToggleRoomView', { rid: 'rid-1' });
 	});
 });
diff --git a/app/views/RoomView/components/RightButtons/useHeaderCallPress.ts b/app/views/RoomView/components/RightButtons/useHeaderCallPress.ts
new file mode 100644
index 00000000000..1a8645379ef
--- /dev/null
+++ b/app/views/RoomView/components/RightButtons/useHeaderCallPress.ts
@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react';
+
+import { useNewMediaCall } from '~/lib/hooks/useNewMediaCall';
+import { useVideoConf } from '~/lib/hooks/useVideoConf';
+
+const DOUBLE_TAP_WINDOW_MS = 300;
+
+export const useHeaderCallPress = (rid: string) => {
+	const { showInitCallActionSheet, callEnabled, disabledTooltip } = useVideoConf(rid);
+	const { openNewMediaCall, startCallImmediate, hasMediaCallPermission, isInActiveCall } = useNewMediaCall(rid);
+
+	const lastTapRef = useRef(0);
+	const pendingTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	useEffect(
+		() => () => {
+			if (pendingTimerRef.current) {
+				clearTimeout(pendingTimerRef.current);
+				pendingTimerRef.current = null;
+			}
+		},
+		[]
+	);
+
+	const onPressMediaCall = () => {
+		const now = Date.now();
+		if (pendingTimerRef.current && now - lastTapRef.current < DOUBLE_TAP_WINDOW_MS) {
+			clearTimeout(pendingTimerRef.current);
+			pendingTimerRef.current = null;
+			lastTapRef.current = 0;
+			startCallImmediate();
+			return;
+		}
+		lastTapRef.current = now;
+		pendingTimerRef.current = setTimeout(() => {
+			pendingTimerRef.current = null;
+			openNewMediaCall();
+		}, DOUBLE_TAP_WINDOW_MS);
+	};
+
+	if (hasMediaCallPermission) {
+		return {
+			callPresent: true,
+			isCallDisabled: isInActiveCall,
+			onPressCall: onPressMediaCall
+		};
+	}
+
+	if (callEnabled) {
+		return {
+			callPresent: true,
+			isCallDisabled: disabledTooltip || isInActiveCall,
+			onPressCall: showInitCallActionSheet
+		};
+	}
+
+	return {
+		callPresent: false,
+		isCallDisabled: true,
+		onPressCall: () => {}
+	};
+};
diff --git a/app/views/RoomView/components/RightButtons/useRoomRightButtonsData.ts b/app/views/RoomView/components/RightButtons/useRoomRightButtonsData.ts
new file mode 100644
index 00000000000..1ffecb0d94e
--- /dev/null
+++ b/app/views/RoomView/components/RightButtons/useRoomRightButtonsData.ts
@@ -0,0 +1,121 @@
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/react/shallow';
+import { useNavigation } from '@react-navigation/native';
+
+import { type SubscriptionType, type TUserStatus } from '~/definitions';
+import { isSubscriptionModel } from '~/definitions/TRoom';
+import i18n from '~/i18n';
+import getRoomAccessibilityLabel from '~/lib/helpers/getRoomAccessibilityLabel';
+import { useAppSelector } from '~/lib/hooks/useAppSelector';
+import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { usePermissions } from '~/lib/hooks/usePermissions';
+import { useSetting } from '~/lib/hooks/useSetting';
+import { getRoomTitle, isGroupChat } from '~/lib/methods/helpers';
+import { events, logEvent } from '~/lib/methods/helpers/log';
+import { getUserSelector } from '~/selectors/login';
+import { type RoomStore } from '~/views/RoomView/definitions';
+import { useE2EEStatus } from '~/views/RoomView/hooks/useE2EEStatus';
+import { useSubscriptionUnreads } from '~/views/RoomView/hooks/useSubscriptionUnreads';
+import { fromSubscription } from '~/views/RoomView/stores/RoomStoreContext';
+import { navigateToScreen, type TRoomStackNavigation } from '~/views/RoomView/services/navigateToScreen';
+
+const getThreadsAccessibilityLabel = (tunread: string[], tunreadUser?: string[], tunreadGroup?: string[]) => {
+	if (!tunread.length) {
+		return i18n.t('Threads');
+	}
+	if (tunreadUser?.length) {
+		return i18n.t('Threads_dm_unread', { unread: tunreadUser.length });
+	}
+	if (tunreadGroup?.length) {
+		return i18n.t('Threads_group_unread', { unread: tunreadGroup.length });
+	}
+	return i18n.t('Threads_unread', { unread: tunread.length });
+};
+
+export const useRoomRightButtonsData = (rid: string, roomStore: RoomStore) => {
+	const navigation = useNavigation<TRoomStackNavigation>();
+	const isMasterDetail = useMasterDetail();
+
+	const userId = useAppSelector(state => getUserSelector(state).id);
+	const threadsEnabled = useSetting('Threads_enabled') as boolean;
+	const issuesWithNotifications = useAppSelector(state => state.troubleshootingNotification.issuesWithNotifications);
+
+	const { t, status, roomName, roomIsGroupChat, teamMain, encrypted, disableNotifications } = useStore(
+		roomStore,
+		useShallow(s => {
+			const room = s.room;
+			return {
+				t: room.t as SubscriptionType,
+				status: fromSubscription(r => r.status, undefined)(s),
+				roomName: getRoomTitle(room),
+				roomIsGroupChat: isGroupChat(room),
+				teamMain: fromSubscription(r => !!r.teamMain, false)(s),
+				encrypted: fromSubscription(r => r.encrypted, undefined)(s),
+				disableNotifications: fromSubscription(r => r.disableNotifications, undefined)(s)
+			};
+		})
+	);
+	const { hasE2EEWarning } = useE2EEStatus(roomStore);
+	const { tunread, tunreadUser, tunreadGroup, isSelfDm } = useSubscriptionUnreads(roomStore, userId);
+	const [canToggleEncryption] = usePermissions(['toggle-room-e2e-encryption'], rid);
+
+	const goThreadsView = () => {
+		logEvent(events.ROOM_GO_THREADS);
+		navigateToScreen({ navigation, isMasterDetail, screen: 'ThreadMessagesView', params: { rid, t } });
+	};
+
+	const navigateToNotificationOrPushTroubleshoot = () => {
+		if (issuesWithNotifications) {
+			navigateToScreen({ navigation, isMasterDetail, screen: 'PushTroubleshootView' });
+			return;
+		}
+		const room = roomStore.getState().room;
+		if (isSubscriptionModel(room)) {
+			navigateToScreen({
+				navigation,
+				isMasterDetail,
+				screen: 'NotificationPrefView',
+				params: { rid, room }
+			});
+		}
+	};
+
+	const goSearchView = () => {
+		logEvent(events.ROOM_GO_SEARCH);
+		navigateToScreen({
+			navigation,
+			isMasterDetail,
+			screen: 'SearchMessagesView',
+			params: isMasterDetail ? { rid, t, encrypted, showCloseModal: true } : { rid, t, encrypted }
+		});
+	};
+
+	const goE2EEToggleRoomView = () => {
+		logEvent(events.ROOM_GO_E2EE);
+		navigateToScreen({ navigation, isMasterDetail, screen: 'E2EEToggleRoomView', params: { rid } });
+	};
+
+	const accessibilityRoomName =
+		!roomIsGroupChat && t === 'd' && !!userId
+			? roomName
+			: getRoomAccessibilityLabel({ type: t, userId, isGroupChat: roomIsGroupChat, status: status as TUserStatus, teamMain });
+	const callAccessibilityLabel = i18n.t('Call_room_name', { roomName: accessibilityRoomName });
+
+	return {
+		threadsEnabled,
+		issuesWithNotifications,
+		disableNotifications,
+		hasE2EEWarning,
+		canToggleEncryption,
+		isSelfDm,
+		tunread,
+		tunreadUser,
+		tunreadGroup,
+		callAccessibilityLabel,
+		goThreadsView,
+		navigateToNotificationOrPushTroubleshoot,
+		goSearchView,
+		goE2EEToggleRoomView,
+		threadsAccessibilityLabel: getThreadsAccessibilityLabel(tunread, tunreadUser, tunreadGroup)
+	};
+};
diff --git a/app/views/RoomView/components/RoomBodyFocusAnchor.tsx b/app/views/RoomView/components/RoomBodyFocusAnchor.tsx
new file mode 100644
index 00000000000..13675e34b65
--- /dev/null
+++ b/app/views/RoomView/components/RoomBodyFocusAnchor.tsx
@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import { StyleSheet } from 'react-native';
+import { KeyboardFocusView } from 'react-native-external-keyboard';
+
+import { isIOS } from '~/lib/methods/helpers';
+import { isInviteSubscription } from '~/lib/methods/isInviteSubscription';
+import { useIsAccessibilityNavigationEnabled } from '~/lib/hooks/useIsAccessibilityNavigationEnabled';
+import { fromSubscription, useRoomStore } from '../stores/RoomStoreContext';
+
+const styles = StyleSheet.create({
+	anchor: {
+		width: 1,
+		height: 1
+	}
+});
+
+interface IRoomBodyFocusAnchorProps {
+	children: ReactNode;
+}
+
+export const RoomBodyFocusAnchor = ({ children }: IRoomBodyFocusAnchorProps) => {
+	const disabled = useRoomStore(fromSubscription(isInviteSubscription, false));
+	const accessibilityNavigationEnabled = useIsAccessibilityNavigationEnabled();
+
+	if (!isIOS) {
+		return <>{children}</>;
+	}
+
+	return (
+		<>
+			<KeyboardFocusView
+				autoFocus={accessibilityNavigationEnabled && !disabled}
+				enableA11yFocus={accessibilityNavigationEnabled && !disabled}
+				focusable={!disabled}
+				canBeFocused={!disabled}
+				style={styles.anchor}
+			/>
+			{children}
+		</>
+	);
+};
diff --git a/app/views/RoomView/components/RoomFooter/AirgappedWs.tsx b/app/views/RoomView/components/RoomFooter/AirgappedWs.tsx
index ec4fafc3795..b9b90792725 100644
--- a/app/views/RoomView/components/RoomFooter/AirgappedWs.tsx
+++ b/app/views/RoomView/components/RoomFooter/AirgappedWs.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import I18n from '~/i18n';
@@ -11,10 +12,12 @@ export const AirgappedWs = () => {
 
 	return (
 		<View style={[styles.readOnly, { paddingBottom: bottom }]}>
-			<Text style={[styles.previewMode, { color: colors.fontDefault }]}>{I18n.t('AirGapped_workspace_read_only_title')}</Text>
-			<Text style={[styles.readOnlyDescription, { color: colors.fontDefault }]}>
+			<PlainText style={[styles.previewMode, { color: colors.fontDefault }]}>
+				{I18n.t('AirGapped_workspace_read_only_title')}
+			</PlainText>
+			<PlainText style={[styles.readOnlyDescription, { color: colors.fontDefault }]}>
 				{I18n.t('AirGapped_workspace_read_only_description')}
-			</Text>
+			</PlainText>
 		</View>
 	);
 };
diff --git a/app/views/RoomView/components/RoomFooter/FooterAction.tsx b/app/views/RoomView/components/RoomFooter/FooterAction.tsx
index 4685b4cae33..a91b99ddd19 100644
--- a/app/views/RoomView/components/RoomFooter/FooterAction.tsx
+++ b/app/views/RoomView/components/RoomFooter/FooterAction.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import Touch from '~/containers/Touch';
@@ -26,11 +27,11 @@ export const FooterAction = ({
 
 	return (
 		<View style={[styles.joinRoomContainer, { paddingBottom: bottom }]} testID={testID}>
-			<Text style={[styles.previewMode, { color: colors.fontTitlesLabels }]}>{title}</Text>
+			<PlainText style={[styles.previewMode, { color: colors.fontTitlesLabels }]}>{title}</PlainText>
 			<Touch onPress={onPress} style={[styles.joinRoomButton, { backgroundColor: colors.fontHint }]} disabled={loading}>
-				<Text style={[styles.joinRoomText, { color: colors.fontWhite }]} testID={buttonTestID}>
+				<PlainText style={[styles.joinRoomText, { color: colors.fontWhite }]} testID={buttonTestID}>
 					{buttonLabel}
-				</Text>
+				</PlainText>
 			</Touch>
 		</View>
 	);
diff --git a/app/views/RoomView/components/RoomFooter/Preview.tsx b/app/views/RoomView/components/RoomFooter/Preview.tsx
index d3daf049d6d..5ff7d75d359 100644
--- a/app/views/RoomView/components/RoomFooter/Preview.tsx
+++ b/app/views/RoomView/components/RoomFooter/Preview.tsx
@@ -1,4 +1,5 @@
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '~/theme';
@@ -11,7 +12,7 @@ export const Preview = ({ message }: IFooterPreviewProps) => {
 
 	return (
 		<View style={[styles.readOnly, { paddingBottom: bottom }]}>
-			<Text style={[styles.previewMode, { color: colors.fontTitlesLabels }]}>{message}</Text>
+			<PlainText style={[styles.previewMode, { color: colors.fontTitlesLabels }]}>{message}</PlainText>
 		</View>
 	);
 };
diff --git a/app/views/RoomView/components/RoomMessageActions.tsx b/app/views/RoomView/components/RoomMessageActions.tsx
index 00f50ac5fb7..741061bc9f0 100644
--- a/app/views/RoomView/components/RoomMessageActions.tsx
+++ b/app/views/RoomView/components/RoomMessageActions.tsx
@@ -17,7 +17,8 @@ export const RoomMessageActions = ({
 	quoteInit,
 	reactionInit,
 	onReactionPress,
-	jumpToMessage
+	jumpToMessage,
+	children
 }: IRoomMessageActionsProps) => {
 	const roomStore = useRoomStoreApi();
 	const isSubscribed = useRoomStore(s => isSubscriptionModel(s.room));
@@ -27,7 +28,7 @@ export const RoomMessageActions = ({
 	const getRoom = () => roomStore.getState().room as TSubscriptionModel;
 
 	if (!isSubscribed) {
-		return null;
+		return children;
 	}
 
 	return (
@@ -43,8 +44,9 @@ export const RoomMessageActions = ({
 				reactionInit={reactionInit}
 				onReactionPress={onReactionPress}
 				jumpToMessage={jumpToMessage}
-				isReadOnly={readOnly}
-			/>
+				isReadOnly={readOnly}>
+				{children}
+			</MessageActions>
 			<MessageErrorActions ref={messageErrorActionsRef} tmid={tmid} />
 		</>
 	);
diff --git a/app/views/RoomView/components/RoomMessageList.tsx b/app/views/RoomView/components/RoomMessageList.tsx
index 3616cd94f74..ded90dc0c20 100644
--- a/app/views/RoomView/components/RoomMessageList.tsx
+++ b/app/views/RoomView/components/RoomMessageList.tsx
@@ -27,7 +27,7 @@ const getHideSystemMessages = (room: TRoomOrPreview, Hide_System_Messages?: stri
 export const RoomMessageList = ({
 	tmid,
 	listContainerRef,
-	flatListRef,
+	listRef,
 	onLongPress,
 	onThreadPress,
 	onReactionPress,
@@ -73,7 +73,7 @@ export const RoomMessageList = ({
 				autoTranslateLanguage={autoTranslateLanguage}>
 				<List
 					ref={listContainerRef}
-					flatListRef={flatListRef}
+					listRef={listRef}
 					rid={rid}
 					t={t}
 					tmid={tmid}
diff --git a/app/views/RoomView/components/RoomPlaceholder.tsx b/app/views/RoomView/components/RoomPlaceholder.tsx
index 264ce2f57f9..74eadcd0c17 100644
--- a/app/views/RoomView/components/RoomPlaceholder.tsx
+++ b/app/views/RoomView/components/RoomPlaceholder.tsx
@@ -1,5 +1,6 @@
 import { type ReactElement, type ReactNode } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
 import { useTheme } from '~/theme';
@@ -58,8 +59,10 @@ export const RoomPlaceholder = ({ icon, title, description, detail, testID, chil
 					<View style={[styles.icon, { backgroundColor: colors.surfaceNeutral }]}>
 						<CustomIcon name={icon} size={42} color={colors.fontSecondaryInfo} />
 					</View>
-					<Text style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</Text>
-					<Text style={[styles.description, { color: colors.fontDefault }, !detail && styles.gapBottom]}>{description}</Text>
+					<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]}>{title}</PlainText>
+					<PlainText style={[styles.description, { color: colors.fontDefault }, !detail && styles.gapBottom]}>
+						{description}
+					</PlainText>
 					{detail ? <View style={styles.gapBottom}>{detail}</View> : null}
 				</View>
 				{children}
diff --git a/app/views/RoomView/components/UploadProgress.tsx b/app/views/RoomView/components/UploadProgress.tsx
index b69da03dfa7..5d2eb00fa96 100644
--- a/app/views/RoomView/components/UploadProgress.tsx
+++ b/app/views/RoomView/components/UploadProgress.tsx
@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Q } from '@nozbe/watermelondb';
 import { type Observable, type Subscription } from 'rxjs';
 import { A11y } from 'react-native-a11y-order';
@@ -217,9 +218,9 @@ class UploadProgress extends Component<IUploadProgressProps, IUploadProgressStat
 							</Text>
 							<A11y.Index index={2}>
 								<TouchableOpacity onPress={() => this.tryAgain(item)}>
-									<Text style={[styles.tryAgainButtonText, { color: themes[theme!].badgeBackgroundLevel2 }]}>
+									<PlainText style={[styles.tryAgainButtonText, { color: themes[theme!].badgeBackgroundLevel2 }]}>
 										{I18n.t('Try_again')}
-									</Text>
+									</PlainText>
 								</TouchableOpacity>
 							</A11y.Index>
 						</View>
diff --git a/app/views/RoomView/components/__tests__/RightButtons.test.tsx b/app/views/RoomView/components/__tests__/RightButtons.test.tsx
index 8170c55440f..58ffd041956 100644
--- a/app/views/RoomView/components/__tests__/RightButtons.test.tsx
+++ b/app/views/RoomView/components/__tests__/RightButtons.test.tsx
@@ -19,7 +19,23 @@ jest.mock('~/lib/helpers/getRoomAccessibilityLabel', () => ({ __esModule: true,
 jest.mock('~/lib/methods/helpers', () => ({
 	...jest.requireActual('~/lib/methods/helpers'),
 	getRoomTitle: () => 'Room Title',
-	isGroupChat: () => false
+	isGroupChat: () => false,
+	isTablet: true,
+	hasNativeHeaderBar: false
+}));
+jest.mock('~/lib/hooks/useVideoConf', () => ({
+	useVideoConf: () => ({ showInitCallActionSheet: jest.fn(), callEnabled: false, disabledTooltip: false })
+}));
+jest.mock('~/lib/hooks/useNewMediaCall', () => ({
+	useNewMediaCall: () => ({
+		openNewMediaCall: jest.fn(),
+		startCallImmediate: jest.fn(),
+		hasMediaCallPermission: false,
+		isInActiveCall: false
+	})
+}));
+jest.mock('~/views/RoomView/hooks/useGoRoomActionsView', () => ({
+	useGoRoomActionsView: () => jest.fn()
 }));
 
 let mockAppState = {
diff --git a/app/views/RoomView/definitions.ts b/app/views/RoomView/definitions.ts
index 09e9f971dc5..fd4e95ede9e 100644
--- a/app/views/RoomView/definitions.ts
+++ b/app/views/RoomView/definitions.ts
@@ -1,6 +1,5 @@
-import { type Ref, type RefObject } from 'react';
-import { type FlatListProps } from 'react-native';
-import { type FlatList } from 'react-native-gesture-handler';
+import { type ReactNode, type Ref, type RefObject } from 'react';
+import { type LegendListProps, type LegendListRef } from '@legendapp/list/react-native';
 import { type StoreApi } from 'zustand';
 
 import { type ChatsStackParamList } from '~/stacks/types';
@@ -58,15 +57,15 @@ export interface IUseE2EEStatusResult {
 	hasE2EEWarning: boolean;
 }
 
-export type TListRef = RefObject<FlatList<TAnyMessageModel> | null>;
+export type TListRef = RefObject<LegendListRef | null>;
 
 export type TMessagesIdsRef = RefObject<string[]>;
 
-export interface IListProps extends Omit<
-	FlatListProps<TAnyMessageModel>,
-	'onScroll' | 'viewabilityConfigCallbackPairs' | 'onViewableItemsChanged' | 'viewabilityConfig'
+export interface IListProps extends Pick<
+	LegendListProps<TAnyMessageModel>,
+	'data' | 'renderItem' | 'onStartReached' | 'extraData'
 > {
-	flatListRef: TListRef;
+	listRef: TListRef;
 	jumpToBottom: () => void;
 	isAnchored?: boolean;
 }
@@ -82,7 +81,7 @@ export interface IListContainerProps {
 	rid: string;
 	t: RoomType;
 	tmid?: string;
-	flatListRef: TListRef;
+	listRef: TListRef;
 	hideSystemMessages: string[];
 	showMessageInMainThread: boolean;
 	serverVersion: string | null;
@@ -215,7 +214,7 @@ export interface IRoomMessageListProps
 		Pick<IRoomMessageHandlersInput, 'onThreadPress' | 'onReactionPress' | 'sendMessage'> {
 	tmid?: string;
 	listContainerRef: RefObject<IListContainerRef | null>;
-	flatListRef: TListRef;
+	listRef: TListRef;
 	onLongPress: IListContainerProps['onLongPress'];
 }
 
@@ -226,6 +225,7 @@ export type IRoomMessageActionsProps = Pick<
 	tmid?: string;
 	messageActionsRef: RefObject<IMessageActions | null>;
 	messageErrorActionsRef: RefObject<IMessageErrorActions | null>;
+	children?: ReactNode;
 };
 
 export interface IUseRoomMessagingParams {
diff --git a/app/views/RoomView/helpers/__tests__/roomHeaderActions.test.ts b/app/views/RoomView/helpers/__tests__/roomHeaderActions.test.ts
new file mode 100644
index 00000000000..6b54d3f1e1c
--- /dev/null
+++ b/app/views/RoomView/helpers/__tests__/roomHeaderActions.test.ts
@@ -0,0 +1,48 @@
+import { splitRoomHeaderActions } from '../roomHeaderActions';
+
+describe('splitRoomHeaderActions', () => {
+	it('keeps every present item visible when at or under the cap', () => {
+		const { visibleKeys, overflowKeys } = splitRoomHeaderActions({ threads: true, call: true });
+
+		expect(visibleKeys).toEqual(['threads', 'call']);
+		expect(overflowKeys).toEqual([]);
+	});
+
+	it('ranks threads ahead of call so an unread badge always keeps a bar item', () => {
+		const { visibleKeys, overflowKeys } = splitRoomHeaderActions({ threads: true, call: true, encryption: true });
+
+		expect(visibleKeys).toEqual(['threads', 'call']);
+		expect(overflowKeys).toEqual(['encryption']);
+	});
+
+	it('demotes the lowest-ranked items to overflow when every warning is active at once', () => {
+		const { visibleKeys, overflowKeys } = splitRoomHeaderActions({
+			threads: true,
+			call: true,
+			encryption: true,
+			notifications: true
+		});
+
+		expect(visibleKeys).toEqual(['threads', 'call']);
+		expect(overflowKeys).toEqual(['encryption', 'notifications']);
+	});
+
+	it('promotes call to the visible cluster once threads is absent', () => {
+		const { visibleKeys, overflowKeys } = splitRoomHeaderActions({
+			threads: false,
+			call: true,
+			encryption: true,
+			notifications: true
+		});
+
+		expect(visibleKeys).toEqual(['call', 'encryption']);
+		expect(overflowKeys).toEqual(['notifications']);
+	});
+
+	it('returns nothing visible or overflowing when no conditional item is present', () => {
+		const { visibleKeys, overflowKeys } = splitRoomHeaderActions({});
+
+		expect(visibleKeys).toEqual([]);
+		expect(overflowKeys).toEqual([]);
+	});
+});
diff --git a/app/views/RoomView/helpers/getRoomHeaderMode.ts b/app/views/RoomView/helpers/getRoomHeaderMode.ts
new file mode 100644
index 00000000000..71e90274cf9
--- /dev/null
+++ b/app/views/RoomView/helpers/getRoomHeaderMode.ts
@@ -0,0 +1,28 @@
+import { type RoomMembership } from '../definitions';
+
+export type TRoomHeaderMode = 'none' | 'omnichannel' | 'thread' | 'room';
+
+export const getRoomHeaderMode = ({
+	rid,
+	tmid,
+	t,
+	status,
+	membership
+}: {
+	rid?: string;
+	tmid?: string;
+	t?: string;
+	status?: string;
+	membership: RoomMembership;
+}): TRoomHeaderMode => {
+	if (!rid || membership === 'invited') {
+		return 'none';
+	}
+	if (t === 'l') {
+		return status === 'queued' || membership !== 'subscribed' ? 'none' : 'omnichannel';
+	}
+	if (tmid) {
+		return 'thread';
+	}
+	return 'room';
+};
diff --git a/app/views/RoomView/helpers/roomHeaderActions.ts b/app/views/RoomView/helpers/roomHeaderActions.ts
new file mode 100644
index 00000000000..dd6e63fdf46
--- /dev/null
+++ b/app/views/RoomView/helpers/roomHeaderActions.ts
@@ -0,0 +1,13 @@
+export const ROOM_HEADER_ACTION_PRIORITY = ['threads', 'call', 'encryption', 'notifications'] as const;
+export type TRoomHeaderActionKey = (typeof ROOM_HEADER_ACTION_PRIORITY)[number];
+export const MAX_VISIBLE_ROOM_HEADER_ACTIONS = 2;
+
+export const splitRoomHeaderActions = (
+	present: Partial<Record<TRoomHeaderActionKey, boolean>>
+): { visibleKeys: TRoomHeaderActionKey[]; overflowKeys: TRoomHeaderActionKey[] } => {
+	const presentKeys = ROOM_HEADER_ACTION_PRIORITY.filter(key => present[key]);
+	return {
+		visibleKeys: presentKeys.slice(0, MAX_VISIBLE_ROOM_HEADER_ACTIONS),
+		overflowKeys: presentKeys.slice(MAX_VISIBLE_ROOM_HEADER_ACTIONS)
+	};
+};
diff --git a/app/views/RoomView/hooks/__tests__/useHeader.test.tsx b/app/views/RoomView/hooks/__tests__/useHeader.test.tsx
index 98bb91ca015..11b232cf492 100644
--- a/app/views/RoomView/hooks/__tests__/useHeader.test.tsx
+++ b/app/views/RoomView/hooks/__tests__/useHeader.test.tsx
@@ -1,19 +1,36 @@
 import { act, renderHook } from '@testing-library/react-native';
+
 import { createStore } from 'zustand';
 
 import { type RoomState, type RoomStore } from '~/views/RoomView/definitions';
 import { useHeader } from '../useHeader';
+import { useNativeRoomHeader } from '../useNativeRoomHeader';
+import { useNativeBackButton } from '../useNativeBackButton';
+
+jest.mock('../useNativeRoomHeader', () => ({ useNativeRoomHeader: jest.fn() }));
+jest.mock('../useNativeBackButton', () => ({ useNativeBackButton: jest.fn() }));
+const mockNativeRightItems: unknown[] = [];
+jest.mock('../useRoomHeaderRightItems', () => ({ useRoomHeaderRightItems: jest.fn(() => mockNativeRightItems) }));
 
 let mockTestStore: RoomStore;
+let mockIsIOS = false;
 
 jest.mock('../useGoRoomActionsView', () => ({ useGoRoomActionsView: jest.fn(() => jest.fn()) }));
 jest.mock('~/views/RoomView/components/LeftButtons', () => ({ __esModule: true, default: 'LeftButtons' }));
 jest.mock('~/views/RoomView/components/RightButtons/RightButtons', () => ({ __esModule: true, default: 'RightButtons' }));
 jest.mock('~/containers/RoomHeader', () => ({ __esModule: true, default: 'RoomHeader' }));
+let mockIsTablet = false;
 jest.mock('~/lib/methods/helpers', () => ({
 	getRoomTitle: jest.fn(() => 'Room Title'),
-	isGroupChat: jest.fn(() => false)
+	isGroupChat: jest.fn(() => false),
+	get hasNativeHeaderBar() {
+		return mockIsIOS;
+	},
+	get isTablet() {
+		return mockIsTablet;
+	}
 }));
+jest.mock('~/lib/hooks/useMasterDetail', () => ({ useMasterDetail: () => mockIsTablet }));
 jest.mock('~/lib/methods/isInviteSubscription', () => ({
 	isInviteSubscription: jest.fn(() => false)
 }));
@@ -45,6 +62,8 @@ describe('useHeader', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockTestStore = makeRoomStore();
+		mockIsIOS = false;
+		mockIsTablet = false;
 	});
 
 	it('sets only the headerLeft spacer and returns when rid is missing', () => {
@@ -95,4 +114,75 @@ describe('useHeader', () => {
 		expect(() => titleOptions.headerTitle()).not.toThrow();
 		expect(() => sideOptions.headerRight()).not.toThrow();
 	});
+
+	describe('on iOS', () => {
+		beforeEach(() => {
+			mockIsIOS = true;
+		});
+
+		it('leaves the native header empty when rid is missing', () => {
+			renderHook(() => useHeader({ rid: undefined, tmid: undefined, name: 'general', roomStore: mockTestStore }));
+
+			expect(mockSetOptions).not.toHaveBeenCalled();
+		});
+
+		it('sets unstable_headerRightItems and keeps the native back button instead of headerLeft/headerRight', () => {
+			renderHook(() => useHeader({ rid: 'rid-1', tmid: undefined, name: 'general', roomStore: mockTestStore }));
+
+			const sideOptions = mockSetOptions.mock.calls[0][0];
+			expect(typeof sideOptions.unstable_headerRightItems).toBe('function');
+			expect(sideOptions.unstable_headerRightItems()).toBe(mockNativeRightItems);
+			expect(sideOptions).not.toHaveProperty('headerLeft');
+			expect(sideOptions).not.toHaveProperty('headerRight');
+		});
+	});
+
+	describe('on iPad', () => {
+		beforeEach(() => {
+			mockIsIOS = true;
+			mockIsTablet = true;
+		});
+
+		it('uses the native right items like iPhone', () => {
+			renderHook(() => useHeader({ rid: 'rid-1', tmid: undefined, name: 'general', roomStore: mockTestStore }));
+
+			const sideOptions = mockSetOptions.mock.calls[0][0];
+			expect(sideOptions.unstable_headerRightItems()).toBe(mockNativeRightItems);
+			expect(sideOptions).not.toHaveProperty('headerRight');
+		});
+
+		it('shows the room avatar without the shared glass background', () => {
+			renderHook(() => useHeader({ rid: 'rid-1', tmid: undefined, name: 'general', roomStore: mockTestStore }));
+
+			const [avatarItem] = mockSetOptions.mock.calls[0][0].unstable_headerLeftItems();
+			expect(avatarItem.type).toBe('custom');
+			expect(avatarItem.hidesSharedBackground).toBe(true);
+			expect(avatarItem.element.type).toBe('LeftButtons');
+		});
+
+		it('disables the native back button while the avatar holds the left slot', () => {
+			renderHook(() => useHeader({ rid: 'rid-1', tmid: undefined, name: 'general', roomStore: mockTestStore }));
+
+			expect(useNativeBackButton).toHaveBeenLastCalledWith(false, 'rid-1');
+		});
+
+		it('keeps the native back button on a thread', () => {
+			renderHook(() => useHeader({ rid: 'rid-1', tmid: 'tmid-1', name: 'Thread', roomStore: mockTestStore }));
+
+			expect(mockSetOptions.mock.calls[0][0]).not.toHaveProperty('unstable_headerLeftItems');
+		});
+	});
+});
+
+describe('native title availability', () => {
+	it.each([
+		[true, true],
+		[false, false]
+	])('uses the native title when the native header bar is %s', (nativeHeaderBar, native) => {
+		jest.clearAllMocks();
+		mockIsIOS = nativeHeaderBar;
+		renderHook(() => useHeader({ rid: 'rid-1', roomStore: makeRoomStore() }));
+		expect(useNativeRoomHeader).toHaveBeenCalledWith(native, expect.any(Object), undefined, null, expect.any(Function));
+		expect(mockSetOptions.mock.calls.some(([options]) => typeof options.headerTitle === 'function')).toBe(!native);
+	});
 });
diff --git a/app/views/RoomView/hooks/__tests__/useNativeBackButton.test.ts b/app/views/RoomView/hooks/__tests__/useNativeBackButton.test.ts
new file mode 100644
index 00000000000..c640b2bae32
--- /dev/null
+++ b/app/views/RoomView/hooks/__tests__/useNativeBackButton.test.ts
@@ -0,0 +1,65 @@
+import { renderHook } from '@testing-library/react-native';
+
+import { useNativeBackButton } from '../useNativeBackButton';
+
+const mockSetOptions = jest.fn();
+const mockGoBack = jest.fn();
+let mockCanGoBack = true;
+let mockUnreads: number | null = null;
+const mockUseUnreadsCount = jest.fn((_rid?: string) => mockUnreads);
+
+jest.mock('@react-navigation/native', () => ({
+	useNavigation: () => ({ setOptions: mockSetOptions, goBack: mockGoBack, canGoBack: () => mockCanGoBack })
+}));
+jest.mock('../useUnreadsCount', () => ({ useUnreadsCount: (rid?: string) => mockUseUnreadsCount(rid) }));
+
+const renderBackItem = (unreads: number | null) => {
+	mockUnreads = unreads;
+	renderHook(() => useNativeBackButton(true, 'rid'));
+	const options = mockSetOptions.mock.lastCall[0];
+	expect(options.headerBackVisible).toBe(false);
+	const [backItem] = options.unstable_headerLeftItems();
+	return backItem;
+};
+
+beforeEach(() => {
+	jest.clearAllMocks();
+	mockUnreads = null;
+	mockCanGoBack = true;
+});
+
+it('replaces the back button with a chevron labelled with the unread count', () => {
+	const backItem = renderBackItem(7);
+	expect(mockUseUnreadsCount).toHaveBeenCalledWith('rid');
+	expect(backItem).toMatchObject({
+		label: '7',
+		icon: { type: 'sfSymbol', name: 'chevron.backward' },
+		showsLabelWithIcon: true
+	});
+});
+
+it('caps the count at +99', () => {
+	expect(renderBackItem(150).label).toBe('+99');
+});
+
+it('shows only the chevron without unreads', () => {
+	expect(renderBackItem(0).label).toBe('');
+});
+
+it('goes back when pressed', () => {
+	renderBackItem(3).onPress();
+	expect(mockGoBack).toHaveBeenCalledTimes(1);
+});
+
+it('does nothing when disabled', () => {
+	mockUnreads = 3;
+	renderHook(() => useNativeBackButton(false, 'rid'));
+	expect(mockUseUnreadsCount).toHaveBeenCalledWith(undefined);
+	expect(mockSetOptions).not.toHaveBeenCalled();
+});
+
+it('clears custom left items when it cannot go back', () => {
+	mockCanGoBack = false;
+	renderHook(() => useNativeBackButton(true, 'rid'));
+	expect(mockSetOptions).toHaveBeenCalledWith({ unstable_headerLeftItems: undefined });
+});
diff --git a/app/views/RoomView/hooks/__tests__/useNativeRoomHeader.test.ts b/app/views/RoomView/hooks/__tests__/useNativeRoomHeader.test.ts
new file mode 100644
index 00000000000..1531d94a1c6
--- /dev/null
+++ b/app/views/RoomView/hooks/__tests__/useNativeRoomHeader.test.ts
@@ -0,0 +1,125 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native';
+import { Image } from 'react-native';
+
+import { IconSet } from '~/containers/CustomIcon';
+import { getUserPresence } from '~/lib/methods/getUsersPresence';
+import { type IHeaderFields } from '../useHeader';
+import { useNativeRoomHeader } from '../useNativeRoomHeader';
+
+const mockSetOptions = jest.fn();
+const mockNavigation = { setOptions: mockSetOptions };
+let mockState: any;
+
+jest.mock('@react-navigation/native', () => ({ useNavigation: () => mockNavigation }));
+jest.mock('~/lib/hooks/useAppSelector', () => ({ useAppSelector: (select: (state: any) => unknown) => select(mockState) }));
+jest.mock('~/containers/CustomIcon', () => ({
+	IconSet: { getImageSource: jest.fn(async (name, size, color) => ({ uri: `${name}:${color}`, width: size, height: size })) },
+	hasIcon: () => true
+}));
+jest.mock('~/lib/hooks/usePreviewFormatText', () => ({ __esModule: true, default: (text: string) => text.replaceAll('*', '') }));
+jest.mock('~/lib/hooks/useUserStatusColor', () => ({ useUserStatusColor: (status: string) => status }));
+jest.mock('~/lib/methods/getUsersPresence', () => ({ getUserPresence: jest.fn() }));
+jest.mock('~/lib/methods/helpers/formatStatusExpiry', () => ({ formatStatusExpiry: (expiry?: string) => expiry }));
+jest.mock('~/lib/methods/helpers/log', () => ({ __esModule: true, default: jest.fn() }));
+jest.mock('~/theme', () => ({ useTheme: () => ({ colors: { fontTitlesLabels: 'title', fontSecondaryInfo: 'subtitle' } }) }));
+jest.mock('~/i18n', () => ({ __esModule: true, default: { t: (key: string) => key } }));
+
+const fields: IHeaderFields = {
+	title: 'Room',
+	parentTitle: 'Parent',
+	teamMain: false,
+	subtitle: '*Topic*',
+	type: 'c',
+	isGroupChat: false,
+	abacAttributes: undefined,
+	disabled: false
+};
+const latestOptions = () => mockSetOptions.mock.calls.at(-1)?.[0];
+
+beforeEach(() => {
+	jest.clearAllMocks();
+	mockState = {
+		meteor: { connected: true, connecting: false },
+		server: { loading: false },
+		settings: {},
+		activeUsers: {},
+		usersTyping: []
+	};
+});
+
+it('sets the title before the room icon is ready and adds the icon when it loads', async () => {
+	renderHook(() => useNativeRoomHeader(true, { ...fields, type: 'p', title: 'Shown' }));
+	expect(mockSetOptions.mock.calls[0][0]).toMatchObject({ headerTitle: 'Shown', headerSubtitle: 'Topic' });
+	await waitFor(() => expect(latestOptions().headerTitleImageSource?.uri).toBe('channel-private:title'));
+	expect(latestOptions().headerTitle).toBe('Shown');
+});
+
+it('shows plain topic text and the room icon', async () => {
+	renderHook(() => useNativeRoomHeader(true, fields));
+	await waitFor(() => expect(latestOptions().headerTitleImageSource?.uri).toBe('channel-public:title'));
+	expect(latestOptions()).toMatchObject({ headerTitle: 'Room', headerSubtitle: 'Topic', headerSubtitleImageSource: undefined });
+});
+
+it('keeps the parent subtitle and moves its icon below the Thread title while users type', async () => {
+	mockState.usersTyping = ['Alice'];
+	renderHook(() => useNativeRoomHeader(true, { ...fields, title: '*Thread*', parentTitle: '*Parent*' }, 'thread'));
+	await waitFor(() => expect(latestOptions().headerSubtitleImageSource?.uri).toBe('channel-public:title'));
+	expect(latestOptions()).toMatchObject({ headerTitle: 'Thread', headerSubtitle: '*Parent*', headerTitleImageSource: undefined });
+});
+
+it('clears the expiry clock during typing and updates the colored presence image', async () => {
+	mockState.activeUsers.user = { status: 'online', statusText: 'Working', statusExpiresAt: 'future' };
+	const { rerender } = renderHook(() => useNativeRoomHeader(true, { ...fields, type: 'd' }, undefined, 'user'));
+	await waitFor(() => expect(latestOptions().headerSubtitleImageSource?.uri).toBe('clock:subtitle'));
+	expect(latestOptions().headerTitleImageSource.uri).toBe('status-online:online');
+	mockState = { ...mockState, usersTyping: ['Alice', 'Bob'], activeUsers: { user: { status: 'busy' } } };
+	rerender({});
+	await waitFor(() => expect(latestOptions().headerTitleImageSource?.uri).toBe('status-busy:busy'));
+	expect(latestOptions().headerSubtitle).toBe('Alice and Bob are_typing...');
+	expect(latestOptions().headerSubtitleImageSource).toBeUndefined();
+});
+
+it('requests missing direct-message presence but respects disabled broadcasting', async () => {
+	const { rerender } = renderHook(() => useNativeRoomHeader(true, { ...fields, type: 'd' }, undefined, 'user'));
+	await act(async () => {});
+	expect(getUserPresence).toHaveBeenCalledWith('user');
+	jest.mocked(getUserPresence).mockClear();
+	mockState.settings.Presence_broadcast_disabled = true;
+	rerender({});
+	await act(async () => {});
+	expect(getUserPresence).not.toHaveBeenCalled();
+});
+
+it('does not configure or render native images when disabled', async () => {
+	renderHook(() => useNativeRoomHeader(false, fields));
+	await act(async () => {});
+	expect(mockSetOptions).not.toHaveBeenCalled();
+	expect(IconSet.getImageSource).not.toHaveBeenCalled();
+});
+
+it('uses supported Omnichannel app images and falls back when decoding fails', async () => {
+	const getSize = jest.spyOn(Image, 'getSize').mockImplementation(() => Promise.resolve({ width: 24, height: 24 }));
+	mockState.server.server = 'https://chat.example';
+	let sourceType = { type: 'app', id: 'app-id', sidebarIcon: 'icon.png' } as IHeaderFields['sourceType'];
+	const { rerender } = renderHook(() => useNativeRoomHeader(true, { ...fields, type: 'l', sourceType }));
+	await waitFor(() => expect(latestOptions().headerTitleImageSource?.uri).toContain('get-sidebar-icon?icon=icon.png'));
+	getSize.mockImplementation(() => Promise.reject(new Error('Unsupported image')));
+	sourceType = { ...sourceType, sidebarIcon: 'icon.svg' } as IHeaderFields['sourceType'];
+	rerender({});
+	await waitFor(() => expect(latestOptions().headerTitleImageSource?.uri).toBe('omnichannel:offline'));
+	getSize.mockRestore();
+});
+
+it('opens room actions when the title is pressed', async () => {
+	const onTitlePress = jest.fn();
+	renderHook(() => useNativeRoomHeader(true, fields, undefined, undefined, onTitlePress));
+	await waitFor(() => expect(latestOptions().onHeaderTitlePress).toBeInstanceOf(Function));
+	latestOptions().onHeaderTitlePress({ nativeEvent: {} });
+	expect(onTitlePress).toHaveBeenCalledWith();
+});
+
+it('does not make the title pressable for invite subscriptions', async () => {
+	renderHook(() => useNativeRoomHeader(true, { ...fields, disabled: true }, undefined, undefined, jest.fn()));
+	await waitFor(() => expect(latestOptions().headerTitleImageSource?.uri).toBe('channel-public:title'));
+	expect(latestOptions().onHeaderTitlePress).toBeUndefined();
+});
diff --git a/app/views/RoomView/hooks/__tests__/useRoomHeaderRightItems.test.ts b/app/views/RoomView/hooks/__tests__/useRoomHeaderRightItems.test.ts
new file mode 100644
index 00000000000..ac8cf10c0f6
--- /dev/null
+++ b/app/views/RoomView/hooks/__tests__/useRoomHeaderRightItems.test.ts
@@ -0,0 +1,99 @@
+import { renderHook } from '@testing-library/react-native';
+import { type NativeStackHeaderItem, type NativeStackHeaderItemMenu } from '@react-navigation/native-stack';
+
+import { type RoomStore } from '~/views/RoomView/definitions';
+import { closeLivechat } from '~/views/RoomView/services/closeLivechat';
+import { useRoomHeaderRightItems } from '../useRoomHeaderRightItems';
+
+jest.mock('@react-navigation/native', () => ({ useNavigation: () => ({ navigate: jest.fn() }) }));
+jest.mock('~/lib/hooks/useMasterDetail', () => ({ useMasterDetail: () => false }));
+jest.mock('~/lib/hooks/useSetting', () => ({ useSetting: () => false }));
+jest.mock('~/lib/hooks/useAppSelector', () => ({ useAppSelector: () => 'user-1' }));
+jest.mock('~/theme', () => ({ useTheme: () => ({ colors: {} }) }));
+jest.mock('~/lib/methods/helpers/navigation/headerIcon', () => ({
+	headerIcon: (name: string) => ({ type: 'image', source: name })
+}));
+
+let mockRoomState: Record<string, unknown>;
+jest.mock('zustand', () => ({
+	useStore: (_store: unknown, selector: (state: Record<string, unknown>) => unknown) => selector(mockRoomState)
+}));
+jest.mock('zustand/react/shallow', () => ({ useShallow: (selector: unknown) => selector }));
+
+let mockCanPlaceLivechatOnHold = false;
+jest.mock('~/ee/omnichannel/hooks/useCanReturnQueue', () => ({ useCanReturnQueue: () => false }));
+jest.mock('../useCanPlaceLivechatOnHold', () => ({ useCanPlaceLivechatOnHold: () => mockCanPlaceLivechatOnHold }));
+jest.mock('../useThreadFollowing', () => ({ useThreadFollowing: () => false }));
+jest.mock('~/views/RoomView/services/closeLivechat', () => ({ closeLivechat: jest.fn() }));
+jest.mock('~/views/RoomView/services/placeLivechatOnHold', () => ({ placeLivechatOnHold: jest.fn() }));
+jest.mock('~/lib/services/restApi', () => ({ returnLivechat: jest.fn() }));
+
+const mockGoSearchView = jest.fn();
+let mockButtonsData: Record<string, unknown>;
+jest.mock('../../components/RightButtons/useRoomRightButtonsData', () => ({
+	useRoomRightButtonsData: () => mockButtonsData
+}));
+let mockCallPresent = false;
+jest.mock('../../components/RightButtons/useHeaderCallPress', () => ({
+	useHeaderCallPress: () => ({ callPresent: mockCallPresent, isCallDisabled: true, onPressCall: jest.fn() })
+}));
+
+const roomStore = {} as RoomStore;
+
+const moreMenuOf = (items: NativeStackHeaderItem[]) => {
+	const more = items[items.length - 1] as NativeStackHeaderItemMenu;
+	expect(more.type).toBe('menu');
+	return more.menu.items.map(item => item as Extract<typeof item, { type: 'action' }>);
+};
+
+describe('useRoomHeaderRightItems', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockCanPlaceLivechatOnHold = false;
+		mockCallPresent = false;
+		mockRoomState = { room: { t: 'c' }, membership: 'subscribed', canForwardGuest: false };
+		mockButtonsData = {
+			threadsEnabled: false,
+			hasE2EEWarning: false,
+			tunread: [],
+			threadsAccessibilityLabel: 'Threads',
+			callAccessibilityLabel: 'Call',
+			goSearchView: mockGoSearchView
+		};
+	});
+
+	it('lists search in the room more menu and runs the chosen action', () => {
+		const { result } = renderHook(() => useRoomHeaderRightItems('rid-1', undefined, roomStore));
+		const actions = moreMenuOf(result.current);
+
+		expect(actions.map(action => action.label)).toEqual(['Search messages']);
+		actions[0].onPress();
+		expect(mockGoSearchView).toHaveBeenCalled();
+	});
+
+	it('moves overflowing header actions into the menu, keeping disabled state', () => {
+		mockButtonsData = { ...mockButtonsData, threadsEnabled: true, hasE2EEWarning: true, canToggleEncryption: false };
+		mockCallPresent = true;
+
+		const { result } = renderHook(() => useRoomHeaderRightItems('rid-1', undefined, roomStore));
+		const actions = moreMenuOf(result.current);
+
+		expect(actions.map(action => [action.label, !!action.disabled])).toEqual([
+			['Encrypted', true],
+			['Search messages', true]
+		]);
+	});
+
+	it('shows omnichannel options with close as the destructive last item', () => {
+		mockRoomState = { room: { t: 'l' }, membership: 'subscribed', canForwardGuest: true };
+		mockCanPlaceLivechatOnHold = true;
+
+		const { result } = renderHook(() => useRoomHeaderRightItems('rid-1', undefined, roomStore));
+		const actions = moreMenuOf(result.current);
+
+		expect(actions.map(action => action.label)).toEqual(['Place chat on hold', 'Forward chat', 'Close']);
+		expect(actions[2].destructive).toBe(true);
+		actions[2].onPress();
+		expect(closeLivechat).toHaveBeenCalledWith(expect.objectContaining({ rid: 'rid-1' }));
+	});
+});
diff --git a/app/views/RoomView/hooks/useHeader.tsx b/app/views/RoomView/hooks/useHeader.tsx
index e11e5343274..a7be644d1ca 100644
--- a/app/views/RoomView/hooks/useHeader.tsx
+++ b/app/views/RoomView/hooks/useHeader.tsx
@@ -1,11 +1,13 @@
 import { useLayoutEffect } from 'react';
 import { PixelRatio, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import { type NativeStackHeaderItem } from '@react-navigation/native-stack';
 import { useShallow } from 'zustand/react/shallow';
 import { useStore } from 'zustand';
 
 import RoomHeader from '~/containers/RoomHeader';
-import { getRoomTitle, isGroupChat } from '~/lib/methods/helpers';
+import { getRoomTitle, hasNativeHeaderBar, isGroupChat } from '~/lib/methods/helpers';
+import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import { isInviteSubscription } from '~/lib/methods/isInviteSubscription';
 import { type IOmnichannelSource, type ISubscription, type IVisitor } from '~/definitions';
 import LeftButtons from '../components/LeftButtons';
@@ -14,6 +16,9 @@ import { type IRoomViewProps } from '../definitions';
 import { type RoomStore } from '../definitions';
 import { fromSubscription } from '../stores/RoomStoreContext';
 import { useGoRoomActionsView } from './useGoRoomActionsView';
+import { useNativeRoomHeader } from './useNativeRoomHeader';
+import { useNativeBackButton } from './useNativeBackButton';
+import { useRoomHeaderRightItems } from './useRoomHeaderRightItems';
 
 interface IUseHeaderParams {
 	rid?: string;
@@ -23,7 +28,7 @@ interface IUseHeaderParams {
 	roomStore: RoomStore;
 }
 
-interface IHeaderFields {
+export interface IHeaderFields {
 	prid?: string;
 	title: string;
 	parentTitle: string;
@@ -66,21 +71,45 @@ export const useHeader = ({ rid, tmid, name: roomName, roomStore }: IUseHeaderPa
 	);
 	const roomUserId = useStore(roomStore, s => s.roomUserId);
 	const goRoomActionsView = useGoRoomActionsView(roomStore);
+	useNativeRoomHeader(!!rid && hasNativeHeaderBar, headerFields, tmid, roomUserId, goRoomActionsView);
+	const isMasterDetail = useMasterDetail();
+	const showsAvatar = isMasterDetail && !tmid;
+	useNativeBackButton(!!rid && hasNativeHeaderBar && !showsAvatar, rid);
+	const nativeRightItems = useRoomHeaderRightItems(hasNativeHeaderBar ? rid : undefined, tmid, roomStore);
 
 	useLayoutEffect(() => {
+		if (!rid && hasNativeHeaderBar) {
+			return;
+		}
+
 		if (!rid) {
 			const height = 37 * PixelRatio.getFontScale();
 			navigation.setOptions({ headerLeft: () => <View style={{ height }} /> });
 			return;
 		}
+
+		if (hasNativeHeaderBar) {
+			const avatarItem: NativeStackHeaderItem = {
+				type: 'custom',
+				element: <LeftButtons rid={rid} tmid={tmid} roomStore={roomStore} />,
+				hidesSharedBackground: true
+			};
+			navigation.setOptions(
+				showsAvatar
+					? { unstable_headerLeftItems: () => [avatarItem], unstable_headerRightItems: () => nativeRightItems }
+					: { unstable_headerRightItems: () => nativeRightItems }
+			);
+			return;
+		}
+
 		navigation.setOptions({
 			headerLeft: () => <LeftButtons rid={rid} tmid={tmid} roomStore={roomStore} />,
 			headerRight: () => <RightButtons rid={rid} tmid={tmid} roomStore={roomStore} />
 		});
-	}, [rid, tmid, navigation, roomStore]);
+	}, [rid, tmid, navigation, roomStore, nativeRightItems, showsAvatar]);
 
 	useLayoutEffect(() => {
-		if (!rid) {
+		if (!rid || hasNativeHeaderBar) {
 			return;
 		}
 
diff --git a/app/views/RoomView/hooks/useHeaderImage.ts b/app/views/RoomView/hooks/useHeaderImage.ts
new file mode 100644
index 00000000000..c8bf45f5b38
--- /dev/null
+++ b/app/views/RoomView/hooks/useHeaderImage.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+import { Image, type ImageSourcePropType } from 'react-native';
+
+import { IconSet, type TIconsName } from '~/containers/CustomIcon';
+import log from '~/lib/methods/helpers/log';
+
+const iconImageCache = new Map<string, ImageSourcePropType>();
+
+export const useHeaderIconImage = (name: TIconsName | undefined, color: string, size: number) => {
+	const [image, setImage] = useState<{ name: TIconsName; color: string; source: ImageSourcePropType }>();
+	const cacheKey = `${name}:${color}:${size}`;
+	const cachedSource = name ? iconImageCache.get(cacheKey) : undefined;
+	useEffect(() => {
+		let cancelled = false;
+		if (name && !iconImageCache.has(cacheKey)) {
+			IconSet.getImageSource(name, size, color)
+				.then(source => {
+					if (source) {
+						iconImageCache.set(cacheKey, source);
+					}
+					if (!cancelled && source) {
+						setImage({ name, color, source });
+					}
+				})
+				.catch(log);
+		}
+		return () => {
+			cancelled = true;
+		};
+	}, [name, color, size, cacheKey]);
+	if (cachedSource) {
+		return cachedSource;
+	}
+	return image?.name === name && image?.color === color ? image?.source : undefined;
+};
+
+export const useHeaderRemoteImage = (uri?: string) => {
+	const [image, setImage] = useState<{ uri: string; width: number; height: number }>();
+	useEffect(() => {
+		let cancelled = false;
+		if (uri) {
+			Image.getSize(uri)
+				.then(({ width, height }) => {
+					if (!cancelled) {
+						setImage({ uri, width, height });
+					}
+				})
+				.catch(log);
+		}
+		return () => {
+			cancelled = true;
+		};
+	}, [uri]);
+	return image?.uri === uri ? image : undefined;
+};
diff --git a/app/views/RoomView/hooks/useNativeBackButton.ts b/app/views/RoomView/hooks/useNativeBackButton.ts
new file mode 100644
index 00000000000..ca3afe5c0c3
--- /dev/null
+++ b/app/views/RoomView/hooks/useNativeBackButton.ts
@@ -0,0 +1,41 @@
+import { useLayoutEffect } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { type NativeStackHeaderItem } from '@react-navigation/native-stack';
+
+import i18n from '~/i18n';
+import { useTheme } from '~/theme';
+import { type IRoomViewProps } from '../definitions';
+import { useUnreadsCount } from './useUnreadsCount';
+
+export const formatUnreadsCount = (unreadsCount: number | null) => {
+	if (!unreadsCount) {
+		return '';
+	}
+	return unreadsCount > 99 ? '+99' : unreadsCount.toString();
+};
+
+export const useNativeBackButton = (enabled: boolean, rid?: string) => {
+	const navigation = useNavigation<IRoomViewProps['navigation']>();
+	const { colors } = useTheme();
+	const unreadsLabel = formatUnreadsCount(useUnreadsCount(enabled ? rid : undefined));
+
+	useLayoutEffect(() => {
+		if (!enabled) {
+			return;
+		}
+		if (!navigation.canGoBack()) {
+			navigation.setOptions({ unstable_headerLeftItems: undefined });
+			return;
+		}
+		const backItem: NativeStackHeaderItem = {
+			type: 'button',
+			label: unreadsLabel,
+			icon: { type: 'sfSymbol', name: 'chevron.backward' },
+			showsLabelWithIcon: true,
+			tintColor: colors.fontDefault,
+			accessibilityLabel: unreadsLabel ? `${i18n.t('Back')}, ${unreadsLabel} ${i18n.t('Unread')}` : i18n.t('Back'),
+			onPress: () => navigation.goBack()
+		};
+		navigation.setOptions({ headerBackVisible: false, unstable_headerLeftItems: () => [backItem] });
+	}, [colors.fontDefault, enabled, navigation, unreadsLabel]);
+};
diff --git a/app/views/RoomView/hooks/useNativeRoomHeader.ts b/app/views/RoomView/hooks/useNativeRoomHeader.ts
new file mode 100644
index 00000000000..04b94c7ae42
--- /dev/null
+++ b/app/views/RoomView/hooks/useNativeRoomHeader.ts
@@ -0,0 +1,161 @@
+import { useEffect, useLayoutEffect } from 'react';
+import { shallowEqual } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+
+import { hasIcon, type TIconsName } from '~/containers/CustomIcon';
+import {
+	getOmnichannelIconName,
+	getOmnichannelSidebarIconUri,
+	getRoomTypeIconName
+} from '~/containers/RoomTypeIcon/roomTypeIconName';
+import { STATUS_I18N_KEYS, type TUserStatus } from '~/definitions';
+import { type IActiveUser } from '~/reducers/activeUsers';
+import I18n from '~/i18n';
+import { useAppSelector } from '~/lib/hooks/useAppSelector';
+import usePreviewFormatText from '~/lib/hooks/usePreviewFormatText';
+import { useUserStatusColor } from '~/lib/hooks/useUserStatusColor';
+import { getUserPresence } from '~/lib/methods/getUsersPresence';
+import { formatStatusExpiry } from '~/lib/methods/helpers/formatStatusExpiry';
+import { useTheme } from '~/theme';
+import { type IRoomViewProps } from '../definitions';
+import { type IHeaderFields } from './useHeader';
+import { useHeaderIconImage, useHeaderRemoteImage } from './useHeaderImage';
+
+const TITLE_FONT_SIZE = 17;
+const SUBTITLE_FONT_SIZE = 12;
+
+const getRoomIcon = (fields: IHeaderFields, isDirectMessage: boolean, status: TUserStatus): TIconsName => {
+	if (isDirectMessage) {
+		const statusIcon = `status-${status}`;
+		return hasIcon(statusIcon) ? (statusIcon as TIconsName) : 'status-offline';
+	}
+	if (fields.type === 'l' && !fields.prid) {
+		return getOmnichannelIconName(fields.sourceType);
+	}
+	return getRoomTypeIconName({
+		type: fields.type,
+		teamMain: fields.teamMain,
+		isDiscussion: !!fields.prid,
+		isGroupChat: fields.isGroupChat,
+		abacAttributes: fields.abacAttributes
+	});
+};
+
+const getSubtitle = ({
+	fields,
+	tmid,
+	usersTyping,
+	connected,
+	connecting,
+	activeUser
+}: {
+	fields: IHeaderFields;
+	tmid?: string;
+	usersTyping: string[];
+	connected: boolean;
+	connecting: boolean;
+	activeUser?: IActiveUser;
+}) => {
+	if (tmid) {
+		return fields.parentTitle;
+	}
+	if (usersTyping.length) {
+		const names = usersTyping.join(usersTyping.length === 2 ? ` ${I18n.t('and')} ` : ', ');
+		return `${names} ${I18n.t(usersTyping.length > 1 ? 'are_typing' : 'is_typing')}...`;
+	}
+	if (connecting) {
+		return I18n.t('Connecting');
+	}
+	if (!connected) {
+		return I18n.t('Waiting_for_network');
+	}
+	if (fields.type === 'd') {
+		if (!activeUser) {
+			return undefined;
+		}
+		const presenceKey = STATUS_I18N_KEYS[activeUser.status];
+		return activeUser.statusText || (presenceKey ? I18n.t(presenceKey) : undefined);
+	}
+	return fields.subtitle;
+};
+
+const useRoomHeaderPresence = (enabled: boolean, fields: IHeaderFields, roomUserId?: string | null) => {
+	const connected = useAppSelector(state => state.meteor.connected);
+	const presenceDisabled = useAppSelector(state => state.settings.Presence_broadcast_disabled);
+	const activeUser = useAppSelector(state => (roomUserId ? state.activeUsers[roomUserId] : undefined), shallowEqual);
+	const isDirectMessage = fields.type === 'd' && !fields.isGroupChat && !!roomUserId && !fields.prid;
+	const status: TUserStatus = presenceDisabled ? 'disabled' : !connected ? 'offline' : (activeUser?.status ?? 'loading');
+	const visitorStatus = connected ? fields.visitor?.status : undefined;
+	const statusColor = useUserStatusColor(fields.type === 'l' ? (visitorStatus ?? 'offline') : status);
+
+	useEffect(() => {
+		if (enabled && isDirectMessage && connected && status === 'loading' && roomUserId) {
+			getUserPresence(roomUserId);
+		}
+	}, [enabled, isDirectMessage, connected, status, roomUserId]);
+
+	return { connected, activeUser, isDirectMessage, status, statusColor };
+};
+
+const useRoomHeaderContent = (
+	fields: IHeaderFields,
+	tmid: string | undefined,
+	activeUser: IActiveUser | undefined,
+	connected: boolean
+) => {
+	const connecting = useAppSelector(state => state.meteor.connecting || state.server.loading);
+	const usersTyping = useAppSelector(state => state.usersTyping, shallowEqual);
+	const typing = !tmid && usersTyping.length > 0;
+	const subtitle = getSubtitle({ fields, tmid, usersTyping, connected, connecting, activeUser });
+	const plainTitle = usePreviewFormatText(fields.title ?? '');
+	const formattedSubtitle = usePreviewFormatText(subtitle ?? '');
+	const hasStatusExpiry = fields.type === 'd' && connected && !!formatStatusExpiry(activeUser?.statusExpiresAt);
+	return {
+		title: tmid || fields.prid ? plainTitle : fields.title,
+		subtitle: tmid || typing ? subtitle : formattedSubtitle,
+		showClock: !tmid && !typing && !!subtitle && hasStatusExpiry
+	};
+};
+
+export const useNativeRoomHeader = (
+	enabled: boolean,
+	fields: IHeaderFields,
+	tmid?: string,
+	roomUserId?: string | null,
+	onTitlePress?: () => void
+) => {
+	const navigation = useNavigation<IRoomViewProps['navigation']>();
+	const { colors } = useTheme();
+	const { connected, activeUser, isDirectMessage, status, statusColor } = useRoomHeaderPresence(enabled, fields, roomUserId);
+
+	const { title, subtitle, showClock } = useRoomHeaderContent(fields, tmid, activeUser, connected);
+
+	const roomIcon = getRoomIcon(fields, isDirectMessage, status);
+	const glyphImage = useHeaderIconImage(
+		enabled && fields.type ? roomIcon : undefined,
+		isDirectMessage || fields.type === 'l' ? statusColor : colors.fontTitlesLabels,
+		TITLE_FONT_SIZE
+	);
+	const server = useAppSelector(state => state.server.server);
+	const remoteUri =
+		enabled && connected && fields.type === 'l' ? getOmnichannelSidebarIconUri(server, fields.sourceType) : undefined;
+	const remoteImage = useHeaderRemoteImage(remoteUri);
+	const roomImage = remoteImage ?? glyphImage;
+	const clockImage = useHeaderIconImage(enabled && showClock ? 'clock' : undefined, colors.fontSecondaryInfo, SUBTITLE_FONT_SIZE);
+	const subtitleImage = tmid ? roomImage : clockImage;
+
+	useLayoutEffect(() => {
+		if (enabled) {
+			navigation.setOptions({
+				headerTitle: title,
+				headerSubtitle: subtitle || undefined,
+				headerTitleImageSource: tmid ? undefined : roomImage,
+				headerSubtitleImageSource: subtitleImage,
+				headerTitleStyle: { color: colors.fontTitlesLabels },
+				headerSubtitleColor: colors.fontSecondaryInfo,
+				headerTitleTestID: 'room-header',
+				onHeaderTitlePress: onTitlePress && !fields.disabled ? () => onTitlePress() : undefined
+			});
+		}
+	}, [enabled, navigation, title, subtitle, tmid, roomImage, subtitleImage, colors, onTitlePress, fields.disabled]);
+};
diff --git a/app/views/RoomView/hooks/useRoomHeaderRightItems.ts b/app/views/RoomView/hooks/useRoomHeaderRightItems.ts
new file mode 100644
index 00000000000..dfe598ad898
--- /dev/null
+++ b/app/views/RoomView/hooks/useRoomHeaderRightItems.ts
@@ -0,0 +1,289 @@
+import { useNavigation } from '@react-navigation/native';
+import { type NativeStackHeaderItem, type NativeStackHeaderItemMenuAction } from '@react-navigation/native-stack';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/react/shallow';
+
+import i18n from '~/i18n';
+import { type TIconsName } from '~/containers/CustomIcon';
+import { useAppSelector } from '~/lib/hooks/useAppSelector';
+import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { useCanReturnQueue } from '~/ee/omnichannel/hooks/useCanReturnQueue';
+import { useSetting } from '~/lib/hooks/useSetting';
+import { showConfirmationAlert, showErrorAlert } from '~/lib/methods/helpers';
+import { events, logEvent } from '~/lib/methods/helpers/log';
+import { headerIcon } from '~/lib/methods/helpers/navigation/headerIcon';
+import { toggleFollowThread } from '~/lib/methods/toggleFollowThread';
+import { returnLivechat } from '~/lib/services/restApi';
+import { getUserSelector } from '~/selectors/login';
+import { useTheme } from '~/theme';
+import { type RoomStore } from '../definitions';
+import { fromSubscription } from '../stores/RoomStoreContext';
+import { closeLivechat } from '../services/closeLivechat';
+import { placeLivechatOnHold } from '../services/placeLivechatOnHold';
+import { navigateToScreen, type TRoomStackNavigation } from '../services/navigateToScreen';
+import { getRoomHeaderMode } from '../helpers/getRoomHeaderMode';
+import { splitRoomHeaderActions, type TRoomHeaderActionKey } from '../helpers/roomHeaderActions';
+import { useCanPlaceLivechatOnHold } from './useCanPlaceLivechatOnHold';
+import { useThreadFollowing } from './useThreadFollowing';
+import { useRoomRightButtonsData } from '../components/RightButtons/useRoomRightButtonsData';
+import { useHeaderCallPress } from '../components/RightButtons/useHeaderCallPress';
+
+const EMPTY_ITEMS: NativeStackHeaderItem[] = [];
+const VISIBLE_ORDER: TRoomHeaderActionKey[] = ['encryption', 'notifications', 'call', 'threads'];
+
+interface IRoomHeaderAction {
+	label: string;
+	icon: TIconsName;
+	disabled: boolean;
+	badge?: { value: number; style: { backgroundColor: string } };
+	tintColor?: string;
+	onPress: () => void;
+}
+
+const getTunreadBadgeColor = (
+	tunreadUser: string[],
+	tunreadGroup: string[],
+	colors: { badgeBackgroundLevel4: string; badgeBackgroundLevel3: string; fontInfo: string }
+) => {
+	if (tunreadUser.length) return colors.badgeBackgroundLevel4;
+	if (tunreadGroup.length) return colors.badgeBackgroundLevel3;
+	return colors.fontInfo;
+};
+
+const useOmnichannelRightItems = (rid: string, roomStore: RoomStore, enabled: boolean): NativeStackHeaderItem[] => {
+	const navigation = useNavigation<TRoomStackNavigation>();
+	const isMasterDetail = useMasterDetail();
+	const livechatRequestComment = useSetting('Livechat_request_comment_when_closing_conversation') as boolean;
+
+	const departmentId = useStore(
+		roomStore,
+		fromSubscription(room => room.departmentId, undefined)
+	);
+	const canForwardGuest = useStore(roomStore, s => s.canForwardGuest);
+	const canReturnQueue = useCanReturnQueue(enabled);
+	const canPlaceLivechatOnHold = useCanPlaceLivechatOnHold(roomStore);
+
+	const handleReturnLivechat = () => {
+		showConfirmationAlert({
+			message: i18n.t('Would_you_like_to_return_the_inquiry'),
+			confirmationText: i18n.t('Yes'),
+			onPress: async () => {
+				try {
+					await returnLivechat(rid, departmentId);
+				} catch (e: any) {
+					showErrorAlert(e.reason, i18n.t('Oops'));
+				}
+			}
+		});
+	};
+
+	const moreActions: NativeStackHeaderItemMenuAction[] = [];
+	if (canPlaceLivechatOnHold) {
+		moreActions.push({
+			type: 'action',
+			label: i18n.t('Place_chat_on_hold'),
+			icon: headerIcon('pause'),
+			onPress: () => placeLivechatOnHold({ rid, navigation })
+		});
+	}
+	if (canForwardGuest) {
+		moreActions.push({
+			type: 'action',
+			label: i18n.t('Forward_Chat'),
+			icon: headerIcon('chat-forward'),
+			onPress: () => navigateToScreen({ navigation, isMasterDetail, screen: 'ForwardLivechatView', params: { rid } })
+		});
+	}
+	if (canReturnQueue) {
+		moreActions.push({
+			type: 'action',
+			label: i18n.t('Return_to_waiting_line'),
+			icon: headerIcon('move-to-the-queue'),
+			onPress: handleReturnLivechat
+		});
+	}
+	moreActions.push({
+		type: 'action',
+		label: i18n.t('Close'),
+		icon: headerIcon('chat-close'),
+		destructive: true,
+		onPress: () => closeLivechat({ rid, departmentId, isMasterDetail, livechatRequestComment, navigation })
+	});
+
+	if (!enabled) {
+		return EMPTY_ITEMS;
+	}
+
+	return [
+		{
+			type: 'menu',
+			label: i18n.t('More'),
+			accessibilityLabel: i18n.t('More'),
+			icon: headerIcon('kebab'),
+			menu: { items: moreActions }
+		}
+	];
+};
+
+const useThreadRightItems = (tmid: string | undefined, enabled: boolean): NativeStackHeaderItem[] => {
+	const userId = useAppSelector(state => getUserSelector(state).id);
+	const isFollowingThread = useThreadFollowing(tmid, userId);
+
+	const onToggleFollowThread = () => {
+		logEvent(events.ROOM_TOGGLE_FOLLOW_THREADS);
+		if (tmid) {
+			toggleFollowThread(tmid, isFollowingThread);
+		}
+	};
+
+	if (!enabled) {
+		return EMPTY_ITEMS;
+	}
+
+	return [
+		{
+			type: 'button',
+			label: i18n.t(isFollowingThread ? 'Unfollow_thread' : 'Follow_thread'),
+			accessibilityLabel: i18n.t(isFollowingThread ? 'Unfollow_thread' : 'Follow_thread'),
+			icon: headerIcon(isFollowingThread ? 'notification' : 'notification-disabled'),
+			onPress: onToggleFollowThread
+		}
+	];
+};
+
+const useRoomRightItems = (rid: string, roomStore: RoomStore, enabled: boolean): NativeStackHeaderItem[] => {
+	const { colors } = useTheme();
+	const {
+		threadsEnabled,
+		issuesWithNotifications,
+		disableNotifications,
+		hasE2EEWarning,
+		canToggleEncryption,
+		isSelfDm,
+		tunread,
+		tunreadUser,
+		tunreadGroup,
+		callAccessibilityLabel,
+		goThreadsView,
+		navigateToNotificationOrPushTroubleshoot,
+		goSearchView,
+		goE2EEToggleRoomView,
+		threadsAccessibilityLabel
+	} = useRoomRightButtonsData(rid, roomStore);
+	const { callPresent: callPresentRaw, isCallDisabled, onPressCall } = useHeaderCallPress(rid);
+	const callPresent = !isSelfDm && callPresentRaw;
+
+	const { visibleKeys, overflowKeys } = splitRoomHeaderActions({
+		threads: threadsEnabled,
+		call: callPresent,
+		encryption: hasE2EEWarning,
+		notifications: issuesWithNotifications || disableNotifications
+	});
+
+	const tunreadBadge =
+		threadsEnabled && tunread.length
+			? { value: tunread.length, style: { backgroundColor: getTunreadBadgeColor(tunreadUser ?? [], tunreadGroup ?? [], colors) } }
+			: undefined;
+
+	const actions: Record<TRoomHeaderActionKey, IRoomHeaderAction> = {
+		threads: {
+			label: threadsAccessibilityLabel,
+			icon: 'threads',
+			disabled: hasE2EEWarning,
+			badge: tunreadBadge,
+			onPress: goThreadsView
+		},
+		call: {
+			label: callAccessibilityLabel,
+			icon: 'phone',
+			disabled: hasE2EEWarning || isCallDisabled,
+			onPress: onPressCall
+		},
+		encryption: {
+			label: i18n.t('Encrypted'),
+			icon: 'encrypted',
+			disabled: !canToggleEncryption,
+			onPress: goE2EEToggleRoomView
+		},
+		notifications: {
+			label: i18n.t('Troubleshooting'),
+			icon: 'notification-disabled',
+			tintColor: issuesWithNotifications ? colors.fontDanger : undefined,
+			disabled: hasE2EEWarning,
+			onPress: navigateToNotificationOrPushTroubleshoot
+		}
+	};
+
+	const overflowActions: NativeStackHeaderItemMenuAction[] = [
+		...overflowKeys.map((key): NativeStackHeaderItemMenuAction => {
+			const { label, icon, disabled, onPress } = actions[key];
+			return { type: 'action', label, icon: headerIcon(icon), disabled, onPress };
+		}),
+		{
+			type: 'action',
+			label: i18n.t('Search_Messages'),
+			icon: headerIcon('search'),
+			disabled: hasE2EEWarning,
+			onPress: goSearchView
+		}
+	];
+
+	if (!enabled) {
+		return EMPTY_ITEMS;
+	}
+
+	const items: NativeStackHeaderItem[] = VISIBLE_ORDER.filter(key => visibleKeys.includes(key)).map(key => {
+		const { label, icon, disabled, badge, tintColor, onPress } = actions[key];
+		return {
+			type: 'button',
+			label,
+			accessibilityLabel: label,
+			icon: headerIcon(icon),
+			disabled,
+			badge,
+			tintColor,
+			onPress
+		};
+	});
+	items.push({
+		type: 'menu',
+		label: i18n.t('More'),
+		accessibilityLabel: i18n.t('More'),
+		icon: headerIcon('kebab'),
+		menu: { items: overflowActions }
+	});
+
+	return items;
+};
+
+export const useRoomHeaderRightItems = (
+	rid: string | undefined,
+	tmid: string | undefined,
+	roomStore: RoomStore
+): NativeStackHeaderItem[] => {
+	const { t, status, membership } = useStore(
+		roomStore,
+		useShallow(s => ({
+			t: s.room.t,
+			status: fromSubscription(r => r.status, undefined)(s),
+			membership: s.membership
+		}))
+	);
+
+	const mode = getRoomHeaderMode({ rid, tmid, t, status, membership });
+
+	const omnichannelItems = useOmnichannelRightItems(rid ?? '', roomStore, mode === 'omnichannel');
+	const threadItems = useThreadRightItems(tmid, mode === 'thread');
+	const roomItems = useRoomRightItems(rid ?? '', roomStore, mode === 'room');
+
+	if (mode === 'omnichannel') {
+		return omnichannelItems;
+	}
+	if (mode === 'thread') {
+		return threadItems;
+	}
+	if (mode === 'room') {
+		return roomItems;
+	}
+	return EMPTY_ITEMS;
+};
diff --git a/app/views/RoomView/hooks/useRoomMessaging.ts b/app/views/RoomView/hooks/useRoomMessaging.ts
index 0421dbb7ee1..871da3b1ec0 100644
--- a/app/views/RoomView/hooks/useRoomMessaging.ts
+++ b/app/views/RoomView/hooks/useRoomMessaging.ts
@@ -29,7 +29,7 @@ export function useRoomMessaging({ rid, t, tmid, roomStore, ready, roomUserId, q
 
 	const messageComposerRef = useRef<IMessageComposerRef | null>(null);
 	const listContainerRef = useRef<IListContainerRef | null>(null);
-	const flatListRef: TListRef = useRef(null);
+	const listRef: TListRef = useRef(null);
 	const messageActionsRef = useRef<IMessageActions | null>(null);
 	const messageErrorActionsRef = useRef<IMessageErrorActions | null>(null);
 
@@ -91,7 +91,7 @@ export function useRoomMessaging({ rid, t, tmid, roomStore, ready, roomUserId, q
 		roomScreen,
 		messageComposerRef,
 		listContainerRef,
-		flatListRef,
+		listRef,
 		messageActionsRef,
 		messageErrorActionsRef,
 		onThreadPress,
diff --git a/app/views/RoomsListView/components/Header.tsx b/app/views/RoomsListView/components/Header.tsx
index a54635c4bf6..d212c360e6c 100644
--- a/app/views/RoomsListView/components/Header.tsx
+++ b/app/views/RoomsListView/components/Header.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
-import { StyleSheet, Text, View, useWindowDimensions } from 'react-native';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { StyleSheet, View, useWindowDimensions } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
+import { Touchable } from 'react-native-gesture-handler';
 
 import { showActionSheetRef } from '~/containers/ActionSheet';
 import SearchHeader from '~/containers/SearchHeader';
@@ -53,7 +54,7 @@ const RoomsListHeaderView = ({ search, searchEnabled }: { search: (text: string)
 	}
 	let subtitle;
 	if (supportedVersionsStatus === 'expired') {
-		subtitle = 'Cannot connect';
+		subtitle = I18n.t('Cannot_connect');
 	} else if (connecting || isLoggingIn) {
 		subtitle = I18n.t('Connecting');
 	} else if (isFetching) {
@@ -64,22 +65,28 @@ const RoomsListHeaderView = ({ search, searchEnabled }: { search: (text: string)
 		subtitle = server?.replace(/(^\w+:|^)\/\//, '');
 	}
 	return (
-		<View style={styles.container} accessibilityLabel={`${serverName} ${subtitle}`} accessibilityRole='header' accessible>
-			<TouchableOpacity onPress={onPress} testID='rooms-list-header-servers-list-button'>
+		<View style={styles.container}>
+			<Touchable
+				activeOpacity={0.2}
+				animationDuration={{ in: 0, out: 150 }}
+				onPress={onPress}
+				testID='rooms-list-header-servers-list-button'
+				accessibilityLabel={`${serverName} ${subtitle}`}
+				accessibilityRole='header'>
 				<View style={styles.button}>
-					<Text style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
+					<PlainText style={[styles.title, { color: colors.fontTitlesLabels }]} numberOfLines={1}>
 						{serverName}
-					</Text>
+					</PlainText>
 				</View>
 				{subtitle ? (
-					<Text
+					<PlainText
 						testID='rooms-list-header-server-subtitle'
 						style={[styles.subtitle, { color: colors.fontSecondaryInfo }]}
 						numberOfLines={1}>
 						{subtitle}
-					</Text>
+					</PlainText>
 				) : null}
-			</TouchableOpacity>
+			</Touchable>
 		</View>
 	);
 };
diff --git a/app/views/RoomsListView/components/LargeTitleBackdrop.tsx b/app/views/RoomsListView/components/LargeTitleBackdrop.tsx
new file mode 100644
index 00000000000..1bbb190c7d7
--- /dev/null
+++ b/app/views/RoomsListView/components/LargeTitleBackdrop.tsx
@@ -0,0 +1,26 @@
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
+
+import { hasNativeHeaderBar } from '~/lib/methods/helpers';
+import { useTheme } from '~/theme';
+
+const styles = StyleSheet.create({
+	backdrop: {
+		position: 'absolute',
+		bottom: '100%',
+		left: 0,
+		right: 0
+	}
+});
+
+const LargeTitleBackdrop = () => {
+	const { colors } = useTheme();
+	const { height } = useWindowDimensions();
+
+	if (!hasNativeHeaderBar) {
+		return null;
+	}
+
+	return <View pointerEvents='none' style={[styles.backdrop, { height, backgroundColor: colors.surfaceNeutral }]} />;
+};
+
+export default LargeTitleBackdrop;
diff --git a/app/views/RoomsListView/components/ListHeader.tsx b/app/views/RoomsListView/components/ListHeader.tsx
index d03ae4d1ff8..a00ce033940 100644
--- a/app/views/RoomsListView/components/ListHeader.tsx
+++ b/app/views/RoomsListView/components/ListHeader.tsx
@@ -10,6 +10,7 @@ import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import { events, logEvent } from '~/lib/methods/helpers/log';
 import { useTheme } from '~/theme';
 import { RoomsSearchContext } from '../contexts/RoomsSearchProvider';
+import LargeTitleBackdrop from './LargeTitleBackdrop';
 
 export type TEncryptionBanner = 'REQUEST_PASSWORD' | 'SAVE_PASSWORD';
 
@@ -38,6 +39,7 @@ const ListHeader = () => {
 
 	return (
 		<>
+			<LargeTitleBackdrop />
 			{encryptionBanner ? (
 				<>
 					<List.Item
diff --git a/app/views/RoomsListView/components/SectionHeader.tsx b/app/views/RoomsListView/components/SectionHeader.tsx
index 0d8ae818b80..0428fafb839 100644
--- a/app/views/RoomsListView/components/SectionHeader.tsx
+++ b/app/views/RoomsListView/components/SectionHeader.tsx
@@ -1,5 +1,6 @@
 import { memo } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import i18n from '~/i18n';
 import { useTheme } from '~/theme';
@@ -9,7 +10,7 @@ const SectionHeader = ({ header, title }: { header: string; title?: string }) =>
 	const { colors } = useTheme();
 	return (
 		<View style={[styles.groupTitleContainer, { backgroundColor: colors.surfaceRoom }]}>
-			<Text style={[styles.groupTitle, { color: colors.fontHint }]}>{title ?? i18n.t(header)}</Text>
+			<PlainText style={[styles.groupTitle, { color: colors.fontHint }]}>{title ?? i18n.t(header)}</PlainText>
 		</View>
 	);
 };
diff --git a/app/views/RoomsListView/components/ServersList.tsx b/app/views/RoomsListView/components/ServersList.tsx
index 15d0fb44f9b..23dd80cd5a3 100644
--- a/app/views/RoomsListView/components/ServersList.tsx
+++ b/app/views/RoomsListView/components/ServersList.tsx
@@ -1,5 +1,6 @@
 import { memo, useLayoutEffect, useRef, useState } from 'react';
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { batch, useDispatch } from 'react-redux';
 import { type Subscription } from 'rxjs';
 
@@ -130,7 +131,7 @@ const ServersList = () => {
 			}}
 			testID='rooms-list-header-servers-list'>
 			<View style={[styles.serversListContainerHeader, styles.serverHeader, { borderColor: colors.strokeLight }]}>
-				<Text style={[styles.serverHeaderText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Workspaces')}</Text>
+				<PlainText style={[styles.serverHeaderText, { color: colors.fontSecondaryInfo }]}>{I18n.t('Workspaces')}</PlainText>
 			</View>
 			<FlatList
 				style={{ maxHeight: MAX_ROWS * ROW_HEIGHT }}
diff --git a/app/views/RoomsListView/hooks/__tests__/useHeader.test.tsx b/app/views/RoomsListView/hooks/__tests__/useHeader.test.tsx
new file mode 100644
index 00000000000..53bae02eb34
--- /dev/null
+++ b/app/views/RoomsListView/hooks/__tests__/useHeader.test.tsx
@@ -0,0 +1,277 @@
+import { act, renderHook } from '@testing-library/react-native';
+import { type ReactElement, useState } from 'react';
+
+import { RoomsSearchContext } from '../../contexts/RoomsSearchProvider';
+import { useHeader } from '../useHeader';
+
+const mockSetOptions = jest.fn();
+const mockNavigation = { setOptions: mockSetOptions, navigate: jest.fn(), toggleDrawer: jest.fn(), getParent: jest.fn() };
+
+jest.mock('@react-navigation/native', () => ({
+	useNavigation: () => mockNavigation
+}));
+
+let mockIsIOS = true;
+let mockIsTablet = false;
+jest.mock('~/lib/methods/helpers', () =>
+	Object.defineProperties(
+		{ ...jest.requireActual('~/lib/methods/helpers') },
+		{
+			hasNativeHeaderBar: { get: () => mockIsIOS, configurable: true },
+			isTablet: { get: () => mockIsTablet, configurable: true }
+		}
+	)
+);
+
+jest.mock('~/lib/methods/helpers/navigation/headerIcon', () => ({
+	headerIcon: (name: string) => ({ type: 'image', source: { uri: name } })
+}));
+
+let mockIsMasterDetail = false;
+jest.mock('~/lib/hooks/useMasterDetail', () => ({ useMasterDetail: () => mockIsMasterDetail }));
+jest.mock('~/lib/hooks/useIsAccessibilityNavigationEnabled', () => ({ useIsAccessibilityNavigationEnabled: () => false }));
+jest.mock('~/lib/hooks/usePermissions', () => ({ usePermissions: () => [true, false, false, false, false] }));
+jest.mock('~/selectors/login', () => ({ getUserSelector: () => ({ requirePasswordChange: false }) }));
+const mockColors = { fontDanger: '#f00', buttonBackgroundDangerDefault: '#f00', userPresenceDisabled: '#f00' };
+jest.mock('~/theme', () => ({ useTheme: () => ({ colors: mockColors }) }));
+const mockShowActionSheetRef = jest.fn();
+jest.mock('~/containers/ActionSheet', () => ({ showActionSheetRef: (...args: unknown[]) => mockShowActionSheetRef(...args) }));
+jest.mock('../../components/Header', () => ({ __esModule: true, default: 'RoomsListHeaderView' }));
+jest.mock('../../components/ServersList', () => ({ __esModule: true, default: 'ServersList' }));
+
+jest.mock('~/containers/Header/components/HeaderButton', () => {
+	const ReactActual = jest.requireActual('react');
+	return {
+		Container: ({ children }: { children: unknown }) => ReactActual.createElement('Container', null, children),
+		Item: (props: Record<string, unknown>) => ReactActual.createElement('Item', props),
+		Drawer: (props: Record<string, unknown>) => ReactActual.createElement('Drawer', props),
+		More: (props: Record<string, unknown>) => ReactActual.createElement('More', props),
+		BadgeWarn: () => null
+	};
+});
+
+let mockAppState = {
+	supportedVersions: { status: 'supported' },
+	troubleshootingNotification: { issuesWithNotifications: false },
+	app: { notificationPresenceCap: false },
+	meteor: { connecting: false, connected: true },
+	server: { loading: false, server: 'https://open.rocket.chat' },
+	login: { isFetching: false },
+	rooms: { isFetching: false },
+	settings: { Site_Name: 'Rocket.Chat' }
+};
+jest.mock('~/lib/hooks/useAppSelector', () => ({
+	useAppSelector: (selector: (state: typeof mockAppState) => unknown) => selector(mockAppState)
+}));
+
+const mockStartSearch = jest.fn();
+const mockStopSearch = jest.fn();
+const mockSearch = jest.fn();
+const searchContextValue = {
+	searching: false,
+	searchEnabled: false,
+	searchResults: [],
+	startSearch: mockStartSearch,
+	stopSearch: mockStopSearch,
+	search: mockSearch
+};
+
+const renderUseHeader = () =>
+	renderHook(() => useHeader(), {
+		wrapper: ({ children }: { children: ReactElement }) => (
+			<RoomsSearchContext.Provider value={searchContextValue}>{children}</RoomsSearchContext.Provider>
+		)
+	});
+
+describe('RoomsListView useHeader', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockIsIOS = true;
+		mockIsTablet = false;
+		mockIsMasterDetail = false;
+		mockAppState = {
+			supportedVersions: { status: 'supported' },
+			troubleshootingNotification: { issuesWithNotifications: false },
+			app: { notificationPresenceCap: false },
+			meteor: { connecting: false, connected: true },
+			server: { loading: false, server: 'https://open.rocket.chat' },
+			login: { isFetching: false },
+			rooms: { isFetching: false },
+			settings: { Site_Name: 'Rocket.Chat' }
+		};
+	});
+
+	it('sets the server name as a native string title with the server url as subtitle on iPhone', () => {
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		expect(typeof options.headerTitle).toBe('string');
+		expect(options.headerTitle).toBe('Rocket.Chat');
+		expect(options.headerSubtitle).toBe('open.rocket.chat');
+	});
+
+	it.each([
+		[{ supportedVersions: { status: 'expired' } }, 'Cannot connect'],
+		[{ meteor: { connecting: true, connected: true } }, 'Connecting...'],
+		[{ login: { isFetching: true } }, 'Connecting...'],
+		[{ rooms: { isFetching: true } }, 'Updating...'],
+		[{ meteor: { connecting: false, connected: false } }, 'Waiting for network...'],
+		[{ meteor: { connecting: false, connected: false }, rooms: { isFetching: true } }, 'Updating...']
+	])('swaps the native subtitle to the connection state %j', (stateOverride, expectedSubtitle) => {
+		mockAppState = { ...mockAppState, ...stateOverride } as typeof mockAppState;
+
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		expect(options.headerTitle).toBe('Rocket.Chat');
+		expect(options.headerSubtitle).toBe(expectedSubtitle);
+	});
+
+	it('builds the right cluster in create, push-troubleshoot, directory order', () => {
+		mockAppState = { ...mockAppState, troubleshootingNotification: { issuesWithNotifications: true } };
+
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		const rightItems = options.unstable_headerRightItems();
+		const labels = rightItems.map((item: { accessibilityLabel: string }) => item.accessibilityLabel);
+		expect(labels).toEqual(['Create new channel, team, direct message or discussion', 'Troubleshooting', 'Directory']);
+	});
+
+	it('renders only buttons when push troubleshooting is absent', () => {
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		const rightItems = options.unstable_headerRightItems();
+		const labels = rightItems.map((item: { accessibilityLabel: string }) => item.accessibilityLabel);
+		expect(labels).toEqual(['Create new channel, team, direct message or discussion', 'Directory']);
+		expect(rightItems.every((item: { type: string }) => item.type === 'button')).toBe(true);
+	});
+
+	it('exposes only the drawer as a native left item', () => {
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		const leftItems = options.unstable_headerLeftItems();
+		expect(leftItems).toHaveLength(1);
+		expect(leftItems[0].icon).toEqual({ type: 'image', source: { uri: 'hamburguer' } });
+	});
+
+	it('opens the server switcher when the header title is pressed', () => {
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		options.onHeaderTitlePress();
+		expect(mockShowActionSheetRef).toHaveBeenCalledWith(expect.objectContaining({ enableContentPanningGesture: false }));
+	});
+
+	it('configures a system search bar instead of a right-cluster search item', () => {
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		const rightItems = options.unstable_headerRightItems();
+		expect(rightItems.some((item: { accessibilityLabel: string }) => item.accessibilityLabel === 'Search')).toBe(false);
+
+		expect(options.headerSearchBarOptions.placement).toBe('automatic');
+		expect(options.headerSearchBarOptions.ref.current).toBeNull();
+
+		options.headerSearchBarOptions.onFocus();
+		expect(mockStartSearch).toHaveBeenCalledTimes(1);
+
+		options.headerSearchBarOptions.onChangeText({ nativeEvent: { text: 'general' } });
+		expect(mockSearch).toHaveBeenCalledWith('general');
+
+		options.headerSearchBarOptions.onCancelButtonPress();
+		expect(mockStopSearch).toHaveBeenCalledTimes(1);
+	});
+
+	it('clears the system search bar once search stops', () => {
+		let setSearchEnabled: (value: boolean) => void = () => {};
+		const wrapper = ({ children }: { children: ReactElement }) => {
+			const [searchEnabled, setter] = useState(true);
+			setSearchEnabled = setter;
+			return (
+				<RoomsSearchContext.Provider value={{ ...searchContextValue, searchEnabled }}>{children}</RoomsSearchContext.Provider>
+			);
+		};
+
+		renderHook(() => useHeader(), { wrapper });
+
+		const clearText = jest.fn();
+		mockSetOptions.mock.calls[0][0].headerSearchBarOptions.ref.current = { clearText };
+
+		act(() => setSearchEnabled(false));
+
+		expect(clearText).toHaveBeenCalledTimes(1);
+	});
+
+	it('deactivates the system search bar once search stops on tablet', () => {
+		mockIsMasterDetail = true;
+		let setSearchEnabled: (value: boolean) => void = () => {};
+		const wrapper = ({ children }: { children: ReactElement }) => {
+			const [searchEnabled, setter] = useState(true);
+			setSearchEnabled = setter;
+			return (
+				<RoomsSearchContext.Provider value={{ ...searchContextValue, searchEnabled }}>{children}</RoomsSearchContext.Provider>
+			);
+		};
+
+		renderHook(() => useHeader(), { wrapper });
+
+		const cancelSearch = jest.fn();
+		mockSetOptions.mock.calls[0][0].headerSearchBarOptions.ref.current = { cancelSearch };
+
+		act(() => setSearchEnabled(false));
+
+		expect(cancelSearch).toHaveBeenCalledTimes(1);
+	});
+
+	it('replaces the tablet right actions with a Cancel item that stops search while searching', () => {
+		mockIsTablet = true;
+		const wrapper = ({ children }: { children: ReactElement }) => (
+			<RoomsSearchContext.Provider value={{ ...searchContextValue, searchEnabled: true }}>{children}</RoomsSearchContext.Provider>
+		);
+
+		renderHook(() => useHeader(), { wrapper });
+
+		const options = mockSetOptions.mock.calls[0][0];
+		expect(options.headerSearchBarOptions.hideNavigationBar).toBe(false);
+		const rightItems = options.unstable_headerRightItems();
+		expect(rightItems.map((item: { label: string }) => item.label)).toEqual(['Cancel']);
+
+		rightItems[0].onPress();
+		expect(mockStopSearch).toHaveBeenCalledTimes(1);
+	});
+
+	it('keeps the iPhone right actions and hides the navigation bar while searching', () => {
+		const wrapper = ({ children }: { children: ReactElement }) => (
+			<RoomsSearchContext.Provider value={{ ...searchContextValue, searchEnabled: true }}>{children}</RoomsSearchContext.Provider>
+		);
+
+		renderHook(() => useHeader(), { wrapper });
+
+		const options = mockSetOptions.mock.calls[0][0];
+		expect(options.headerSearchBarOptions.hideNavigationBar).toBe(true);
+		const labels = options.unstable_headerRightItems().map((item: { label: string }) => item.label);
+		expect(labels).not.toContain('Cancel');
+	});
+
+	it('falls back to the JS header on Android', () => {
+		mockIsIOS = false;
+
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		expect(options.headerLargeTitle).toBeUndefined();
+		expect(typeof options.headerTitle).toBe('function');
+	});
+
+	it('uses the native header on iPad', () => {
+		mockIsTablet = true;
+
+		renderUseHeader();
+
+		const options = mockSetOptions.mock.calls[0][0];
+		expect(options.headerTitle).toBe('Rocket.Chat');
+	});
+});
diff --git a/app/views/RoomsListView/hooks/useGetItemLayout.ts b/app/views/RoomsListView/hooks/useGetFixedItemSize.ts
similarity index 72%
rename from app/views/RoomsListView/hooks/useGetItemLayout.ts
rename to app/views/RoomsListView/hooks/useGetFixedItemSize.ts
index 27c40ea897b..ef2542b0210 100644
--- a/app/views/RoomsListView/hooks/useGetItemLayout.ts
+++ b/app/views/RoomsListView/hooks/useGetFixedItemSize.ts
@@ -1,23 +1,15 @@
 import { useCallback } from 'react';
 import { shallowEqual } from 'react-redux';
 
+import { type IRoomItem } from '~/containers/RoomItem/interfaces';
 import { DisplayMode } from '~/lib/constants/constantDisplayMode';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useResponsiveLayout } from '~/lib/hooks/useResponsiveLayout/useResponsiveLayout';
 
-export const useGetItemLayout = () => {
+export const useGetFixedItemSize = () => {
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
 	const { displayMode } = useAppSelector(state => state.sortPreferences, shallowEqual);
 	const height = displayMode === DisplayMode.Condensed ? rowHeightCondensed : rowHeight;
 
-	const getItemLayout = useCallback(
-		(_: any, index: number) => ({
-			length: height,
-			offset: height * index,
-			index
-		}),
-		[height]
-	);
-
-	return getItemLayout;
+	return useCallback((item: IRoomItem) => (item.separator ? undefined : height), [height]);
 };
diff --git a/app/views/RoomsListView/hooks/useHeader.tsx b/app/views/RoomsListView/hooks/useHeader.tsx
index cef3f006245..e587823e617 100644
--- a/app/views/RoomsListView/hooks/useHeader.tsx
+++ b/app/views/RoomsListView/hooks/useHeader.tsx
@@ -1,33 +1,72 @@
-import { useFocusEffect, useNavigation } from '@react-navigation/native';
-import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
+import { useNavigation } from '@react-navigation/native';
+import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { InteractionManager } from 'react-native';
 import { type KeyboardFocus } from 'react-native-external-keyboard';
+import { type SearchBarCommands } from 'react-native-screens';
 
+import { showActionSheetRef } from '~/containers/ActionSheet';
+import { type TIconsName } from '~/containers/CustomIcon';
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import i18n from '~/i18n';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useIsAccessibilityNavigationEnabled } from '~/lib/hooks/useIsAccessibilityNavigationEnabled';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import { usePermissions } from '~/lib/hooks/usePermissions';
-import { isTablet } from '~/lib/methods/helpers';
+import { hasNativeHeaderBar, isTablet } from '~/lib/methods/helpers';
 import { events, logEvent } from '~/lib/methods/helpers/log';
+import { headerIcon } from '~/lib/methods/helpers/navigation/headerIcon';
 import { getUserSelector } from '~/selectors/login';
 import { useTheme } from '~/theme';
 import RoomsListHeaderView from '../components/Header';
+import ServersList from '../components/ServersList';
 import { RoomsSearchContext } from '../contexts/RoomsSearchProvider';
 
+interface IHeaderRightAction {
+	key: string;
+	present: boolean;
+	icon: TIconsName;
+	accessibilityLabel: string;
+	tintColor?: string;
+	disabled?: boolean;
+	onPress: () => void;
+}
+
+const getScreenFocusNavigation = (navigation: any, isMasterDetail: boolean) => {
+	if (!isMasterDetail) {
+		return navigation;
+	}
+	return navigation.getParent()?.getParent() ?? navigation;
+};
+
 export const useHeader = () => {
 	const { searchEnabled, search, startSearch, stopSearch } = useContext(RoomsSearchContext);
 	const [options, setOptions] = useState<any>(null);
 	const isAccessibilityNavigationEnabled = useIsAccessibilityNavigationEnabled();
 	const drawerButtonRef = useRef<KeyboardFocus>(null);
+	const searchBarRef = useRef<SearchBarCommands>(null);
 	const supportedVersionsStatus = useAppSelector(state => state.supportedVersions.status);
 	const requirePasswordChange = useAppSelector(state => getUserSelector(state).requirePasswordChange);
 	const isMasterDetail = useMasterDetail();
 	const navigation = useNavigation<any>();
 	const issuesWithNotifications = useAppSelector(state => state.troubleshootingNotification.issuesWithNotifications);
 	const notificationPresenceCap = useAppSelector(state => state.app.notificationPresenceCap);
+	const connecting = useAppSelector(state => state.meteor.connecting || state.server.loading || state.login.isFetching);
+	const connected = useAppSelector(state => state.meteor.connected);
+	const isFetchingRooms = useAppSelector(state => state.rooms.isFetching);
+	const serverName = useAppSelector(state => state.settings.Site_Name as string);
+	const server = useAppSelector(state => state.server.server);
 	const { colors } = useTheme();
+
+	const nativeHeaderSubtitle =
+		supportedVersionsStatus === 'expired'
+			? i18n.t('Cannot_connect')
+			: connecting
+				? i18n.t('Connecting')
+				: isFetchingRooms
+					? i18n.t('Updating')
+					: !connected
+						? i18n.t('Waiting_for_network')
+						: server?.replace(/(^\w+:|^)\/\//, '');
 	const [
 		createPublicChannelPermission,
 		createPrivateChannelPermission,
@@ -46,15 +85,12 @@ export const useHeader = () => {
 
 	const disabled = supportedVersionsStatus === 'expired' || requirePasswordChange;
 
-	const getBadge = useCallback(() => {
-		if (supportedVersionsStatus === 'warn') {
-			return <HeaderButton.BadgeWarn color={colors.buttonBackgroundDangerDefault} />;
-		}
-		if (notificationPresenceCap) {
-			return <HeaderButton.BadgeWarn color={colors.userPresenceDisabled} />;
-		}
-		return null;
-	}, [supportedVersionsStatus, notificationPresenceCap, colors]);
+	const badgeColor =
+		supportedVersionsStatus === 'warn'
+			? colors.buttonBackgroundDangerDefault
+			: notificationPresenceCap
+				? colors.userPresenceDisabled
+				: undefined;
 
 	const goDirectory = useCallback(() => {
 		logEvent(events.RL_GO_DIRECTORY);
@@ -84,7 +120,22 @@ export const useHeader = () => {
 	}, [isMasterDetail, navigation]);
 
 	useLayoutEffect(() => {
-		if (searchEnabled) {
+		const headerLeft = () => (
+			<HeaderButton.Drawer
+				ref={drawerButtonRef}
+				navigation={navigation}
+				testID='rooms-list-view-sidebar'
+				onPress={
+					isMasterDetail
+						? () => navigation.navigate('ModalStackNavigator', { screen: 'SettingsView' })
+						: () => navigation.toggleDrawer()
+				}
+				badge={() => (badgeColor ? <HeaderButton.BadgeWarn color={badgeColor} /> : null)}
+				disabled={disabled}
+			/>
+		);
+
+		if (searchEnabled && !hasNativeHeaderBar) {
 			const searchOptions = {
 				headerLeft: () => (
 					<HeaderButton.Container style={{ marginLeft: 1 }} left>
@@ -101,21 +152,90 @@ export const useHeader = () => {
 			return;
 		}
 
-		const options = {
-			headerLeft: () => (
-				<HeaderButton.Drawer
-					ref={drawerButtonRef}
-					navigation={navigation}
-					testID='rooms-list-view-sidebar'
-					onPress={
-						isMasterDetail
+		if (hasNativeHeaderBar) {
+			const actions = (
+				[
+					{
+						key: 'create',
+						present: canCreateRoom,
+						icon: 'create',
+						accessibilityLabel: i18n.t('Create_new_channel_team_dm_discussion'),
+						disabled,
+						onPress: goToNewMessage
+					},
+					{
+						key: 'push-troubleshoot',
+						present: issuesWithNotifications,
+						icon: 'notification-disabled',
+						accessibilityLabel: i18n.t('Troubleshooting'),
+						tintColor: colors.fontDanger,
+						onPress: navigateToPushTroubleshootView
+					},
+					{
+						key: 'directory',
+						present: true,
+						icon: 'directory',
+						accessibilityLabel: i18n.t('Directory'),
+						disabled,
+						onPress: goDirectory
+					}
+				] satisfies IHeaderRightAction[]
+			).filter(action => action.present);
+
+			navigation.setOptions({
+				headerTransparent: true,
+				headerStyle: { backgroundColor: `${colors.surfaceNeutral}B3` },
+				headerBlurEffect: 'regular',
+				headerTitle: serverName,
+				headerSubtitle: nativeHeaderSubtitle,
+				onHeaderTitlePress: () => showActionSheetRef({ children: <ServersList />, enableContentPanningGesture: false }),
+				headerSearchBarOptions: {
+					ref: searchBarRef,
+					placement: isTablet ? 'stacked' : 'automatic',
+					placeholder: i18n.t('Search'),
+					hideNavigationBar: !isTablet,
+					onFocus: startSearch,
+					onChangeText: (event: { nativeEvent: { text: string } }) => search(event.nativeEvent.text),
+					onCancelButtonPress: stopSearch
+				},
+				unstable_headerLeftItems: () => [
+					{
+						type: 'button',
+						label: i18n.t('Menu'),
+						accessibilityLabel: i18n.t('Menu'),
+						icon: headerIcon('hamburguer'),
+						disabled,
+						badge: badgeColor ? { value: '', style: { backgroundColor: badgeColor } } : undefined,
+						onPress: isMasterDetail
 							? () => navigation.navigate('ModalStackNavigator', { screen: 'SettingsView' })
 							: () => navigation.toggleDrawer()
 					}
-					badge={getBadge}
-					disabled={disabled}
-				/>
-			),
+				],
+				unstable_headerRightItems: () =>
+					isTablet && searchEnabled
+						? [
+								{
+									type: 'button' as const,
+									label: i18n.t('Cancel'),
+									accessibilityLabel: i18n.t('Cancel'),
+									onPress: stopSearch
+								}
+							]
+						: actions.map(action => ({
+								type: 'button' as const,
+								label: action.accessibilityLabel,
+								accessibilityLabel: action.accessibilityLabel,
+								icon: headerIcon(action.icon),
+								tintColor: action.tintColor,
+								disabled: action.disabled,
+								onPress: action.onPress
+							}))
+			});
+			return;
+		}
+
+		const options = {
+			headerLeft,
 			headerTitle: () => <RoomsListHeaderView search={search} searchEnabled={searchEnabled} />,
 			headerRight: () => (
 				<HeaderButton.Container>
@@ -168,28 +288,48 @@ export const useHeader = () => {
 		searchEnabled,
 		goDirectory,
 		navigateToPushTroubleshootView,
-		getBadge,
 		goToNewMessage,
 		startSearch,
 		stopSearch,
-		search
+		search,
+		serverName,
+		nativeHeaderSubtitle,
+		badgeColor
 	]);
 
-	// The rooms list header persists across native-stack navigation, so autoFocus (mount-only)
-	// won't re-fire on back-return or after the list/banner render asynchronously. Re-assert focus
-	// on the drawer button every time the screen is focused so external-keyboard/screen-reader
-	// navigation always starts from a known element. Regular touch users are left untouched.
-	useFocusEffect(
-		useCallback(() => {
-			if (!isAccessibilityNavigationEnabled) {
-				return;
-			}
-			const task = InteractionManager.runAfterInteractions(() => {
+	useEffect(() => {
+		if (!hasNativeHeaderBar || searchEnabled) {
+			return;
+		}
+		if (isMasterDetail) {
+			searchBarRef.current?.cancelSearch();
+			return;
+		}
+		searchBarRef.current?.clearText();
+	}, [searchEnabled, isMasterDetail]);
+
+	const focusNavigation = getScreenFocusNavigation(navigation, isMasterDetail);
+
+	useEffect(() => {
+		if (!isAccessibilityNavigationEnabled) {
+			return;
+		}
+		let task: ReturnType<typeof InteractionManager.runAfterInteractions> | undefined;
+		const focusDrawerButton = () => {
+			task?.cancel();
+			task = InteractionManager.runAfterInteractions(() => {
 				drawerButtonRef.current?.focus();
 			});
-			return () => task.cancel();
-		}, [isAccessibilityNavigationEnabled])
-	);
+		};
+		if (focusNavigation.isFocused()) {
+			focusDrawerButton();
+		}
+		const unsubscribe = focusNavigation.addListener('focus', focusDrawerButton);
+		return () => {
+			unsubscribe();
+			task?.cancel();
+		};
+	}, [focusNavigation, isAccessibilityNavigationEnabled]);
 
 	return { options };
 };
diff --git a/app/views/RoomsListView/index.tsx b/app/views/RoomsListView/index.tsx
index b7229c126cc..bd336b1a549 100644
--- a/app/views/RoomsListView/index.tsx
+++ b/app/views/RoomsListView/index.tsx
@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import { memo, useContext, useEffect } from 'react';
-import { BackHandler, FlatList, RefreshControl } from 'react-native';
+import { LegendList } from '@legendapp/list/react-native';
+import { BackHandler, Platform, RefreshControl } from 'react-native';
 import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { shallowEqual } from 'react-redux';
 
@@ -14,7 +15,7 @@ import i18n from '~/i18n';
 import { MAX_SIDEBAR_WIDTH } from '~/lib/constants/tablet';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
-import { getRoomAvatar, getRoomTitle, getUidDirectMessage, isIOS, isRead, isTablet } from '~/lib/methods/helpers';
+import { getRoomAvatar, getRoomTitle, getUidDirectMessage, isIOS, isRead } from '~/lib/methods/helpers';
 import { goRoom } from '~/lib/methods/helpers/goRoom';
 import { events, logEvent } from '~/lib/methods/helpers/log';
 import { getUserSelector } from '~/selectors/login';
@@ -23,14 +24,12 @@ import Container from './components/Container';
 import ListHeader from './components/ListHeader';
 import SectionHeader from './components/SectionHeader';
 import RoomsSearchProvider, { RoomsSearchContext } from './contexts/RoomsSearchProvider';
-import { useGetItemLayout } from './hooks/useGetItemLayout';
+import { useGetFixedItemSize } from './hooks/useGetFixedItemSize';
 import { useHeader } from './hooks/useHeader';
 import { useRefresh } from './hooks/useRefresh';
 import { useSubscriptions } from './hooks/useSubscriptions';
 import styles from './styles';
 
-const INITIAL_NUM_TO_RENDER = isTablet ? 20 : 12;
-
 const RoomsListView = memo(function RoomsListView() {
 	useHeader();
 	const { searching, searchEnabled, searchResults, stopSearch } = useContext(RoomsSearchContext);
@@ -43,8 +42,8 @@ const RoomsListView = memo(function RoomsListView() {
 	const isMasterDetail = useMasterDetail();
 	const navigation = useNavigation();
 	const { width } = useSafeAreaFrame();
-	const { bottom } = useSafeAreaInsets();
-	const getItemLayout = useGetItemLayout();
+	const { bottom, left, right } = useSafeAreaInsets();
+	const getFixedItemSize = useGetFixedItemSize();
 	const { subscriptions, loading } = useSubscriptions();
 	const subscribedRoom = useAppSelector(state => state.room.subscribedRoom);
 	const changingServer = useAppSelector(state => state.server.changingServer);
@@ -64,7 +63,7 @@ const RoomsListView = memo(function RoomsListView() {
 	}, [searchEnabled]);
 
 	const onPressItem = (item = {} as IRoomItem) => {
-		if (!navigation.isFocused()) {
+		if (!isMasterDetail && !navigation.isFocused()) {
 			return;
 		}
 		if (item.rid === subscribedRoom) {
@@ -93,12 +92,12 @@ const RoomsListView = memo(function RoomsListView() {
 				showLastMessage={showLastMessage}
 				onPress={onPressItem}
 				// TODO: move to RoomItem
-				width={isMasterDetail ? MAX_SIDEBAR_WIDTH : width}
+				width={isMasterDetail ? MAX_SIDEBAR_WIDTH : width - left - right}
 				useRealName={useRealName}
 				getRoomTitle={getRoomTitle}
 				getRoomAvatar={getRoomAvatar}
 				getIsRead={isRead}
-				isFocused={subscribedRoom === item.rid}
+				isFocused={isMasterDetail && subscribedRoom === item.rid}
 				swipeEnabled={swipeEnabled}
 				showAvatar={showAvatar}
 				displayMode={displayMode}
@@ -126,21 +125,20 @@ const RoomsListView = memo(function RoomsListView() {
 	}
 
 	return (
-		<FlatList
+		<LegendList
 			data={searchEnabled ? searchResults : subscriptions}
 			extraData={searchEnabled ? searchResults : subscriptions}
 			keyExtractor={item => `${item.rid}-${searchEnabled}`}
+			getItemType={item => (item.separator ? 'separator' : 'room')}
+			getFixedItemSize={getFixedItemSize}
 			style={[styles.list, { backgroundColor: colors.surfaceRoom }]}
-			contentContainerStyle={{ paddingBottom: bottom }}
+			contentContainerStyle={{ paddingBottom: Platform.select({ ios: 0, default: bottom }) }}
 			renderItem={renderItem}
 			ListHeaderComponent={ListHeader}
-			ListFooterComponent={searching ? () => <ActivityIndicator /> : undefined}
-			getItemLayout={getItemLayout}
+			ListFooterComponent={searching ? <ActivityIndicator /> : undefined}
+			contentInsetAdjustmentBehavior={isIOS ? 'automatic' : undefined}
 			keyboardShouldPersistTaps='always'
-			initialNumToRender={INITIAL_NUM_TO_RENDER}
 			refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor={colors.fontSecondaryInfo} />}
-			windowSize={9}
-			onEndReachedThreshold={0.5}
 			keyboardDismissMode={isIOS ? 'on-drag' : 'none'}
 		/>
 	);
diff --git a/app/views/SearchMessagesView/index.tsx b/app/views/SearchMessagesView/index.tsx
index 978e25fe961..e55340a1c7e 100644
--- a/app/views/SearchMessagesView/index.tsx
+++ b/app/views/SearchMessagesView/index.tsx
@@ -1,6 +1,7 @@
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { type CompositeNavigationProp, type RouteProp } from '@react-navigation/core';
-import { FlatList, Text, View } from 'react-native';
+import { FlatList, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Q } from '@nozbe/watermelondb';
 import { connect } from 'react-redux';
 import { dequal } from 'dequal';
@@ -269,7 +270,9 @@ class SearchMessagesView extends Component<ISearchMessagesViewProps, ISearchMess
 		const { theme } = this.props;
 		return (
 			<View style={[styles.listEmptyContainer, { backgroundColor: themes[theme].surfaceRoom }]}>
-				<Text style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
+				<PlainText style={[styles.noDataFound, { color: themes[theme].fontTitlesLabels }]}>
+					{I18n.t('No_results_found')}
+				</PlainText>
 			</View>
 		);
 	};
diff --git a/app/views/SelectListView/Item.ios.tsx b/app/views/SelectListView/Item.ios.tsx
new file mode 100644
index 00000000000..f761b7011dc
--- /dev/null
+++ b/app/views/SelectListView/Item.ios.tsx
@@ -0,0 +1,42 @@
+import * as List from '~/containers/List';
+import { ICON_SIZE } from '~/containers/List/constants';
+import NativeListRow from '~/containers/NativeListRow';
+import RowSeparator from '~/containers/NativeListRow/Separator';
+import { AVATAR_SIZE } from '~/containers/NativeListRow/constants';
+import Radio from '~/containers/Radio';
+import { useTheme } from '~/theme';
+import { type ISelectListItem } from './Item';
+
+const Item = ({ name, icon, alert, isRadio, isChecked, accessibilityState, onPress, isFirst, isLast }: ISelectListItem) => {
+	const { colors } = useTheme();
+	const renderTrailing = () => {
+		if (isRadio) {
+			return (
+				<Radio
+					testID={isChecked ? `radio-button-selected-${name}` : `radio-button-unselected-${name}`}
+					check={isChecked}
+					size={ICON_SIZE}
+				/>
+			);
+		}
+		return isChecked ? <List.Icon testID={`${name}-checked`} name='check' color={colors.fontHint} /> : undefined;
+	};
+	return (
+		<>
+			{isFirst ? null : <RowSeparator />}
+			<NativeListRow
+				title={name}
+				onPress={onPress}
+				testID={`select-list-view-item-${name}`}
+				accessibilityLabel={`${name} ${accessibilityState}`}
+				isSelected={isChecked}
+				isFirst={isFirst}
+				isLast={isLast}
+				leading={<List.Icon name={icon} color={colors.fontHint} style={{ width: AVATAR_SIZE }} />}
+				trailing={alert ? <List.Icon name='info' color={colors.buttonBackgroundDangerDefault} /> : renderTrailing()}
+			/>
+		</>
+	);
+};
+
+export default Item;
diff --git a/app/views/SelectListView/Item.tsx b/app/views/SelectListView/Item.tsx
new file mode 100644
index 00000000000..95abd9b1590
--- /dev/null
+++ b/app/views/SelectListView/Item.tsx
@@ -0,0 +1,50 @@
+import * as List from '~/containers/List';
+import { ICON_SIZE } from '~/containers/List/constants';
+import { type TIconsName } from '~/containers/CustomIcon';
+import Radio from '~/containers/Radio';
+import { useTheme } from '~/theme';
+
+export interface ISelectListItem {
+	name: string;
+	icon: TIconsName;
+	alert?: boolean;
+	isRadio?: boolean;
+	isChecked: boolean;
+	accessibilityState: string;
+	onPress: () => void;
+	isFirst: boolean;
+	isLast: boolean;
+}
+
+const Item = ({ name, icon, alert, isRadio, isChecked, accessibilityState, onPress }: ISelectListItem) => {
+	const { colors } = useTheme();
+	const renderRight = () => {
+		if (isRadio) {
+			return (
+				<Radio
+					testID={isChecked ? `radio-button-selected-${name}` : `radio-button-unselected-${name}`}
+					check={isChecked}
+					size={ICON_SIZE}
+				/>
+			);
+		}
+		return isChecked ? <List.Icon testID={`${name}-checked`} name='check' color={colors.fontHint} /> : null;
+	};
+	return (
+		<>
+			<List.Separator />
+			<List.Item
+				title={name}
+				translateTitle={false}
+				testID={`select-list-view-item-${name}`}
+				onPress={onPress}
+				alert={alert}
+				left={() => <List.Icon name={icon} color={colors.fontHint} />}
+				right={renderRight}
+				additionalAccessibilityLabel={accessibilityState}
+			/>
+		</>
+	);
+};
+
+export default Item;
diff --git a/app/views/SelectListView.tsx b/app/views/SelectListView/index.tsx
similarity index 62%
rename from app/views/SelectListView.tsx
rename to app/views/SelectListView/index.tsx
index 39f193bbfca..8f85654f050 100644
--- a/app/views/SelectListView.tsx
+++ b/app/views/SelectListView/index.tsx
@@ -1,23 +1,23 @@
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { FlatList, StyleSheet, Text, View } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { type RouteProp } from '@react-navigation/native';
 import { type EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { Component } from 'react';
 
-import { type ChatsStackParamList } from '../stacks/types';
-import log from '../lib/methods/helpers/log';
-import * as List from '../containers/List';
-import I18n from '../i18n';
-import * as HeaderButton from '../containers/Header/components/HeaderButton';
-import { themes } from '../lib/constants/colors';
-import { type TSupportedThemes, withTheme } from '../theme';
-import SafeAreaView from '../containers/SafeAreaView';
-import { ICON_SIZE } from '../containers/List/constants';
-import SearchBox from '../containers/SearchBox';
-import Radio from '../containers/Radio';
-import sharedStyles from './Styles';
-import { type TDataSelect } from '../definitions/IDataSelect';
-import { withMasterDetail } from '../lib/hooks/useMasterDetail';
+import { type ChatsStackParamList } from '~/stacks/types';
+import log from '~/lib/methods/helpers/log';
+import I18n from '~/i18n';
+import * as HeaderButton from '~/containers/Header/components/HeaderButton';
+import { themes } from '~/lib/constants/colors';
+import { type TSupportedThemes, withTheme } from '~/theme';
+import SafeAreaView from '~/containers/SafeAreaView';
+import SearchBox from '~/containers/SearchBox';
+import sharedStyles from '../Styles';
+import Item from './Item';
+import { isIOS } from '~/lib/methods/helpers';
+import { type TDataSelect } from '~/definitions/IDataSelect';
+import { withMasterDetail } from '~/lib/hooks/useMasterDetail';
 
 const styles = StyleSheet.create({
 	buttonText: {
@@ -101,7 +101,7 @@ class SelectListView extends Component<ISelectListViewProps, ISelectListViewStat
 		const { theme } = this.props;
 		return (
 			<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
-				<Text style={[styles.buttonText, { color: themes[theme].fontDefault }]}>{I18n.t(this.infoText)}</Text>
+				<PlainText style={[styles.buttonText, { color: themes[theme].fontDefault }]}>{I18n.t(this.infoText)}</PlainText>
 			</View>
 		);
 	};
@@ -138,55 +138,27 @@ class SelectListView extends Component<ISelectListViewProps, ISelectListViewStat
 		}
 	};
 
-	renderItem = ({ item }: { item: TDataSelect }) => {
-		const { theme } = this.props;
-		const { selected } = this.state;
-
+	renderItem = ({ item, index }: { item: TDataSelect; index: number }) => {
+		const { isSearching, data, dataFiltered } = this.state;
+		const rowCount = (isSearching ? dataFiltered : data)?.length ?? 0;
 		const channelIcon = item.t === 'p' ? 'channel-private' : 'channel-public';
 		const teamIcon = item.t === 'p' ? 'teams-private' : 'teams';
-		const icon = item.teamMain ? teamIcon : channelIcon;
-		const checked = this.isChecked(item.rid) ? 'check' : '';
-
-		const showRadio = () => (
-			<Radio
-				testID={selected ? `radio-button-selected-${item.name}` : `radio-button-unselected-${item.name}`}
-				check={selected.includes(item.rid)}
-				size={ICON_SIZE}
-			/>
-		);
-		const showCheck = () =>
-			checked !== '' ? (
-				<List.Icon
-					testID={checked ? `${item.name}-checked` : `${item.name}-unchecked`}
-					name={checked}
-					color={themes[theme].fontHint}
-				/>
-			) : null;
-
-		const handleAcessibilityLabel = (rid: string) => {
-			let label = '';
-			if (this.isRadio) {
-				label = this.isChecked(rid) ? I18n.t('Selected') : I18n.t('Unselected');
-			} else {
-				label = this.isChecked(rid) ? I18n.t('Checked') : I18n.t('Unchecked');
-			}
-			return label;
-		};
+		const isChecked = this.isChecked(item.rid);
+		const checkedLabel = isChecked ? I18n.t('Checked') : I18n.t('Unchecked');
+		const radioLabel = isChecked ? I18n.t('Selected') : I18n.t('Unselected');
 
 		return (
-			<>
-				<List.Separator />
-				<List.Item
-					title={item.name || ''}
-					translateTitle={false}
-					testID={`select-list-view-item-${item.name}`}
-					onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
-					alert={item.alert}
-					left={() => <List.Icon name={icon} color={themes[theme].fontHint} />}
-					right={() => (this.isRadio ? showRadio() : showCheck())}
-					additionalAccessibilityLabel={handleAcessibilityLabel(item.rid)}
-				/>
-			</>
+			<Item
+				name={item.name || ''}
+				icon={item.teamMain ? teamIcon : channelIcon}
+				alert={item.alert}
+				isRadio={this.isRadio}
+				isChecked={isChecked}
+				accessibilityState={this.isRadio ? radioLabel : checkedLabel}
+				onPress={() => (item.alert ? this.showAlert() : this.toggleItem(item.rid))}
+				isFirst={index === 0}
+				isLast={index === rowCount - 1}
+			/>
 		);
 	};
 
@@ -201,7 +173,10 @@ class SelectListView extends Component<ISelectListViewProps, ISelectListViewStat
 					keyExtractor={item => item.rid}
 					renderItem={this.renderItem}
 					ListHeaderComponent={this.isSearch ? this.renderSearch : this.renderInfoText}
-					contentContainerStyle={{ backgroundColor: themes[theme].surfaceRoom, paddingBottom: insets.bottom }}
+					contentContainerStyle={{
+						backgroundColor: isIOS ? themes[theme].surfaceHover : themes[theme].surfaceRoom,
+						paddingBottom: insets.bottom
+					}}
 					keyboardShouldPersistTaps='always'
 				/>
 			</SafeAreaView>
diff --git a/app/views/SelectedUsersView/Header.tsx b/app/views/SelectedUsersView/Header.tsx
index d444bd565e1..8ef6c47d501 100644
--- a/app/views/SelectedUsersView/Header.tsx
+++ b/app/views/SelectedUsersView/Header.tsx
@@ -1,7 +1,7 @@
 import { useRef } from 'react';
-import { FlatList, View, Text, StyleSheet } from 'react-native';
+import { FlatList, View, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
-import { themes } from '~/lib/constants/colors';
 import SearchBox from '~/containers/SearchBox';
 import I18n from '~/i18n';
 import { type ISelectedUser } from '~/reducers/selectedUsers';
@@ -9,6 +9,8 @@ import { useTheme } from '~/theme';
 import sharedStyles from '../Styles';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import Chip from '~/containers/Chip';
+import { hasNativeHeaderBar } from '~/lib/methods/helpers';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
 
 const styles = StyleSheet.create({
 	selectedText: {
@@ -33,7 +35,8 @@ const Header = ({
 	onPressItem: (userItem: ISelectedUser) => void;
 }) => {
 	const flatlist = useRef<FlatList<ISelectedUser>>(null);
-	const { theme } = useTheme();
+	const { colors } = useTheme();
+	const backgroundColor = useListBackgroundColor(colors.surfaceRoom);
 	const { users } = useAppSelector(state => ({
 		users: state.selectedUsers.users
 	}));
@@ -41,13 +44,15 @@ const Header = ({
 	const onContentSizeChange = () => flatlist?.current?.scrollToEnd({ animated: true });
 
 	return (
-		<View style={{ backgroundColor: themes[theme].surfaceRoom }}>
-			<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
+		<View style={{ backgroundColor }}>
+			{hasNativeHeaderBar ? null : (
+				<SearchBox onChangeText={(text: string) => onChangeText(text)} testID='select-users-view-search' />
+			)}
 			{users.length === 0 ? null : (
 				<View>
-					<Text style={[styles.selectedText, { color: themes[theme].fontHint }]}>
+					<PlainText style={[styles.selectedText, { color: colors.fontHint }]}>
 						{I18n.t('N_Selected_members', { n: users.length })}
-					</Text>
+					</PlainText>
 					<FlatList
 						data={users}
 						ref={(ref: FlatList<ISelectedUser> | null) => {
diff --git a/app/views/SelectedUsersView/index.tsx b/app/views/SelectedUsersView/index.tsx
index 67b28dfbf0c..697458ef494 100644
--- a/app/views/SelectedUsersView/index.tsx
+++ b/app/views/SelectedUsersView/index.tsx
@@ -14,7 +14,10 @@ import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import * as List from '~/containers/List';
 import { sendLoadingEvent } from '~/containers/Loading';
 import SafeAreaView from '~/containers/SafeAreaView';
+import RowSeparator from '~/containers/NativeListRow/Separator';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
 import I18n from '~/i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import database from '~/lib/database';
 import UserItem from '~/containers/UserItem';
 import { type ISelectedUser } from '~/reducers/selectedUsers';
@@ -25,7 +28,7 @@ import { useTheme } from '~/theme';
 import { showErrorAlert } from '~/lib/methods/helpers/info';
 import log, { events, logEvent } from '~/lib/methods/helpers/log';
 import { search as runSearch, type TSearch } from '~/lib/methods/search';
-import { isGroupChat as isGroupChatMethod } from '~/lib/methods/helpers';
+import { hasNativeHeaderBar, isGroupChat as isGroupChatMethod } from '~/lib/methods/helpers';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import Header from './Header';
 
@@ -47,6 +50,7 @@ const SelectedUsersView = () => {
 	const navigation = useNavigation<TNavigation>();
 
 	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceRoom);
 	const dispatch = useDispatch();
 	const { bottom } = useSafeAreaInsets();
 
@@ -75,23 +79,56 @@ const SelectedUsersView = () => {
 		return showSkipText ? I18n.t('Skip') : '';
 	};
 
+	const handleSearch = useCallback(async (text: string) => {
+		searchId.current += 1;
+		const currentSearchId = searchId.current;
+		const isStale = () => currentSearchId !== searchId.current;
+
+		setSearching(true);
+
+		try {
+			// Paint local results immediately while the backend request is still in flight
+			const result = await runSearch({
+				text,
+				filterRooms: false,
+				onLocal: localData => {
+					if (isStale()) return;
+					setSearch(localData);
+				}
+			});
+			if (isStale()) return;
+			setSearch(result);
+		} catch (e) {
+			log(e);
+		} finally {
+			// Only the latest search clears the flag, so a stale request never hides an in-flight newer one
+			if (!isStale()) setSearching(false);
+		}
+	}, []);
+
 	useLayoutEffect(() => {
 		const titleHeader = title ?? I18n.t('Select_Members');
 		const buttonTextHeader = buttonText || I18n.t('Next');
 		const nextActionHeader = nextAction || (() => {});
 		const buttonTitle = handleButtonTitle(buttonTextHeader);
-		const options = {
+		const showHeaderButton = (!maxUsers || showButton || (isGroupChat() && users.length > 1)) && !!buttonTitle;
+		navigation.setOptions({
 			title: titleHeader,
-			headerRight: () =>
-				(!maxUsers || showButton || (isGroupChat() && users.length > 1)) &&
-				!!buttonTitle && (
-					<HeaderButton.Container>
-						<HeaderButton.Item title={buttonTitle} onPress={nextActionHeader} testID='selected-users-view-submit' />
-					</HeaderButton.Container>
-				)
-		};
-		navigation.setOptions(options);
-	}, [navigation, users.length, maxUsers, buttonText, nextAction]);
+			headerRight: showHeaderButton
+				? () => (
+						<HeaderButton.Container>
+							<HeaderButton.Item title={buttonTitle} onPress={nextActionHeader} testID='selected-users-view-submit' />
+						</HeaderButton.Container>
+					)
+				: () => null,
+			...(hasNativeHeaderBar
+				? {
+						headerTransparent: true,
+						headerSearchBarOptions: stackedSearchBarOptions({ onChangeText: handleSearch })
+					}
+				: {})
+		});
+	}, [navigation, users.length, maxUsers, buttonText, nextAction, handleSearch]);
 
 	useEffect(() => {
 		if (isGroupChat() && user.username) {
@@ -124,33 +161,6 @@ const SelectedUsersView = () => {
 		};
 	}, [dispatch]);
 
-	const handleSearch = useCallback(async (text: string) => {
-		searchId.current += 1;
-		const currentSearchId = searchId.current;
-		const isStale = () => currentSearchId !== searchId.current;
-
-		setSearching(true);
-
-		try {
-			// Paint local results immediately while the backend request is still in flight
-			const result = await runSearch({
-				text,
-				filterRooms: false,
-				onLocal: localData => {
-					if (isStale()) return;
-					setSearch(localData);
-				}
-			});
-			if (isStale()) return;
-			setSearch(result);
-		} catch (e) {
-			log(e);
-		} finally {
-			// Only the latest search clears the flag, so a stale request never hides an in-flight newer one
-			if (!isStale()) setSearching(false);
-		}
-	}, []);
-
 	const toggleUser = (userItem: ISelectedUser) => {
 		// Disallow removing self user from the direct message group
 		if (isGroupChat() && user.username === userItem.name) {
@@ -185,8 +195,9 @@ const SelectedUsersView = () => {
 		<SafeAreaView testID='select-users-view'>
 			<FlatList
 				data={data}
+				contentInsetAdjustmentBehavior={hasNativeHeaderBar ? 'automatic' : undefined}
 				keyExtractor={item => item._id}
-				renderItem={({ item }) => {
+				renderItem={({ item, index }) => {
 					const name = useRealName && item.fname ? item.fname : item.name;
 					const username = item.search ? (item.username as string) : item.name;
 					return (
@@ -198,13 +209,19 @@ const SelectedUsersView = () => {
 							icon={isChecked(username) ? 'checkbox-checked' : 'checkbox-unchecked'}
 							iconColor={isChecked(username) ? colors.fontHint : colors.strokeLight}
 							isChecked={isChecked(username)}
+							isFirst={index === 0}
+							isLast={index === data.length - 1}
 						/>
 					);
 				}}
-				ItemSeparatorComponent={List.Separator}
-				ListFooterComponent={searching ? <ActivityIndicator /> : <List.Separator />}
+				ItemSeparatorComponent={RowSeparator}
+				ListFooterComponent={searching ? <ActivityIndicator /> : hasNativeHeaderBar ? null : <List.Separator />}
 				ListHeaderComponent={<Header useRealName={useRealName} onChangeText={handleSearch} onPressItem={toggleUser} />}
-				contentContainerStyle={{ backgroundColor: colors.surfaceRoom, paddingBottom: bottom }}
+				contentContainerStyle={{
+					backgroundColor: listBackgroundColor,
+					paddingTop: hasNativeHeaderBar ? 16 : 0,
+					paddingBottom: bottom
+				}}
 				keyboardShouldPersistTaps='always'
 			/>
 		</SafeAreaView>
diff --git a/app/views/SetUsernameView.tsx b/app/views/SetUsernameView.tsx
index 59efecbfb8c..c38fb5d7833 100644
--- a/app/views/SetUsernameView.tsx
+++ b/app/views/SetUsernameView.tsx
@@ -1,7 +1,8 @@
 import { useNavigation } from '@react-navigation/native';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { useEffect, useLayoutEffect, useState } from 'react';
-import { ScrollView, StyleSheet, Text } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useDispatch } from 'react-redux';
 import { useForm } from 'react-hook-form';
 import * as yup from 'yup';
@@ -97,12 +98,13 @@ const SetUsernameView = () => {
 		<KeyboardView backgroundColor={colors.surfaceHover}>
 			<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
 				<SafeAreaView testID='set-username-view'>
-					<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.fontTitlesLabels }]}>
+					<PlainText
+						style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle, { color: colors.fontTitlesLabels }]}>
 						{I18n.t('Username')}
-					</Text>
-					<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.fontTitlesLabels }]}>
+					</PlainText>
+					<PlainText style={[sharedStyles.loginSubtitle, sharedStyles.textRegular, { color: colors.fontTitlesLabels }]}>
 						{I18n.t('Set_username_subtitle')}
-					</Text>
+					</PlainText>
 					<ControlledFormTextInput
 						control={control}
 						name='username'
@@ -114,7 +116,7 @@ const SetUsernameView = () => {
 						clearButtonMode='while-editing'
 						containerStyle={sharedStyles.inputLastChild}
 					/>
-					<Text
+					<PlainText
 						style={[
 							sharedStyles.loginTitle,
 							sharedStyles.textBold,
@@ -122,7 +124,7 @@ const SetUsernameView = () => {
 							{ color: colors.fontTitlesLabels, marginBottom: 10 }
 						]}>
 						{I18n.t('Name')}
-					</Text>
+					</PlainText>
 					<ControlledFormTextInput
 						control={control}
 						name='name'
diff --git a/app/views/SettingsView/index.tsx b/app/views/SettingsView/index.tsx
index 8097918658f..45897777cc3 100644
--- a/app/views/SettingsView/index.tsx
+++ b/app/views/SettingsView/index.tsx
@@ -30,13 +30,14 @@ import { onReviewPress } from '~/lib/methods/helpers/review';
 import { type SettingsStackParamList } from '~/stacks/types';
 import { useTheme } from '~/theme';
 import { disconnect } from '~/lib/services/connect';
-import SidebarView from '../SidebarView';
+import { useSidebarSections } from '../SidebarView/useSidebarSections';
 
 type TLogScreenName = 'SE_GO_LANGUAGE' | 'SE_GO_DEFAULTBROWSER' | 'SE_GO_THEME' | 'SE_GO_PROFILE' | 'SE_GO_SECURITYPRIVACY';
 
 const SettingsView = (): ReactElement => {
 	const { colors, theme } = useTheme();
 	const navigation = useNavigation<NativeStackNavigationProp<SettingsStackParamList, 'SettingsView'>>();
+	const { sections: sidebarSections } = useSidebarSections(navigation as any);
 	const dispatch = useDispatch();
 	const isMasterDetail = useMasterDetail();
 	const { server, version } = useAppSelector(state => state.server);
@@ -137,9 +138,7 @@ const SettingsView = (): ReactElement => {
 			<List.Container>
 				{isMasterDetail ? (
 					<>
-						<List.Section>
-							<SidebarView navigation={navigation as any} />
-						</List.Section>
+						{sidebarSections}
 						<List.Section>
 							<List.Separator />
 							<List.Item
diff --git a/app/views/ShareListView/index.tsx b/app/views/ShareListView/index.tsx
index 54b8f4d8877..dc1d8a24168 100644
--- a/app/views/ShareListView/index.tsx
+++ b/app/views/ShareListView/index.tsx
@@ -1,17 +1,21 @@
 import { type Dispatch } from 'redux';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { BackHandler, FlatList, Keyboard, type NativeEventSubscription, PixelRatio, StyleSheet, Text, View } from 'react-native';
+import { BackHandler, FlatList, Keyboard, type NativeEventSubscription, PixelRatio, StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import * as FileSystem from 'expo-file-system/legacy';
 import { connect } from 'react-redux';
 import * as mime from 'react-native-mime-types';
 import { dequal } from 'dequal';
 import { Q } from '@nozbe/watermelondb';
 import { type EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
-import { Component } from 'react';
+import { type SearchBarCommands } from 'react-native-screens';
+import { Component, createRef } from 'react';
 
 import database from '~/lib/database';
 import I18n from '~/i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import DirectoryItem, { ROW_HEIGHT } from '~/containers/DirectoryItem';
+import RowSeparator from '~/containers/NativeListRow/Separator';
 import ServerItem from '~/containers/ServerItem';
 import * as HeaderButton from '~/containers/Header/components/HeaderButton';
 import ActivityIndicator from '~/containers/ActivityIndicator';
@@ -24,7 +28,7 @@ import { getSubscriptionSearchClause } from '~/lib/database/utils';
 import styles from './styles';
 import { type IApplicationState, RootEnum, type TServerModel, type TSubscriptionModel } from '~/definitions';
 import { type ShareInsideStackParamList } from '~/definitions/navigationTypes';
-import { getRoomAvatar, isAndroid, isIOS } from '~/lib/methods/helpers';
+import { getRoomAvatar, hasNativeHeaderBar, isAndroid, isIOS } from '~/lib/methods/helpers';
 import { showToast } from '~/lib/methods/helpers/showToast';
 import { shareSetParams } from '~/actions/share';
 import { appStart } from '~/actions/app';
@@ -79,6 +83,8 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 
 	private backHandler: NativeEventSubscription | undefined;
 
+	private searchBarRef = createRef<SearchBarCommands>();
+
 	constructor(props: IShareListViewProps) {
 		super(props);
 		this.state = {
@@ -166,7 +172,7 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 		if (previousProps.connecting !== connecting && connecting) {
 			this.setState({ chats: [], searchResults: [], searching: false, searchText: '' });
 		}
-		if (previousState.searching !== searching) {
+		if (!hasNativeHeaderBar && previousState.searching !== searching) {
 			this.setHeader();
 		}
 	}
@@ -214,6 +220,27 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 		const { searching } = this.state;
 		const { navigation } = this.props;
 
+		if (hasNativeHeaderBar) {
+			navigation.setOptions({
+				headerLeft: () => (
+					<HeaderButton.Container left>
+						<HeaderButton.Item iconName='close' onPress={this.closeShareExtension} testID='share-extension-close' />
+					</HeaderButton.Container>
+				),
+				headerTitle: I18n.t('Send_to'),
+				headerSearchBarOptions: this.airGappedReadOnly
+					? undefined
+					: stackedSearchBarOptions({
+							ref: this.searchBarRef,
+							onFocus: this.initSearch,
+							onChangeText: this.search,
+							onCancel: this.cancelSearch
+						}),
+				headerRight: () => null
+			});
+			return;
+		}
+
 		if (searching) {
 			navigation.setOptions({
 				headerLeft: () => (
@@ -361,7 +388,10 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 	};
 
 	cancelSearch = () => {
-		this.setState({ searching: false, searchResults: [], searchText: '' }, () => this.setHeader());
+		this.setState({ searching: false, searchResults: [], searchText: '' }, () => {
+			this.setHeader();
+			this.searchBarRef.current?.clearText();
+		});
 		Keyboard.dismiss();
 	};
 
@@ -394,15 +424,16 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 		return (
 			<>
 				<View style={[styles.headerContainer, { backgroundColor: themes[theme].surfaceHover }]}>
-					<Text style={[styles.headerText, { color: themes[theme].fontTitlesLabels }]}>{I18n.t(header)}</Text>
+					<PlainText style={[styles.headerText, { color: themes[theme].fontTitlesLabels }]}>{I18n.t(header)}</PlainText>
 				</View>
 				<List.Separator />
 			</>
 		);
 	};
 
-	renderItem = ({ item }: { item: TSubscriptionModel }) => {
-		const { serverInfo } = this.state;
+	renderItem = ({ item, index }: { item: TSubscriptionModel; index: number }) => {
+		const { serverInfo, chats, searchResults, searching } = this.state;
+		const rowCount = searching ? searchResults.length : chats.length;
 		let description;
 		switch (item.t) {
 			case 'c':
@@ -427,6 +458,8 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 				onPress={() => this.shareMessage(item)}
 				testID={`share-extension-item-${item.name}`}
 				teamMain={item.teamMain}
+				isFirst={index === 0}
+				isLast={index === rowCount - 1}
 			/>
 		);
 	};
@@ -452,7 +485,7 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 		if (searching && searchText) {
 			return (
 				<View style={[styles.container, styles.emptyContainer, { backgroundColor: themes[theme].surfaceHover }]}>
-					<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</Text>
+					<PlainText style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>{I18n.t('No_results_found')}</PlainText>
 				</View>
 			);
 		}
@@ -500,12 +533,12 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 								...(serversCount > 1 ? { justifyContent: 'center' } : { paddingTop: 250 })
 							}
 						]}>
-						<Text style={[styles.readOnlyTitle, { color: themes[theme].fontDefault }]}>
+						<PlainText style={[styles.readOnlyTitle, { color: themes[theme].fontDefault }]}>
 							{I18n.t('AirGapped_workspace_read_only_share_extension_title')}
-						</Text>
-						<Text style={[styles.readOnlyDescription, { color: themes[theme].fontDefault }]}>
+						</PlainText>
+						<PlainText style={[styles.readOnlyDescription, { color: themes[theme].fontDefault }]}>
 							{I18n.t('AirGapped_workspace_read_only_description')}
-						</Text>
+						</PlainText>
 					</View>
 				</SafeAreaView>
 			);
@@ -520,7 +553,7 @@ class ShareListView extends Component<IShareListViewProps, IState> {
 					contentContainerStyle={{ paddingBottom: insets.bottom }}
 					renderItem={this.renderItem}
 					getItemLayout={getItemLayout}
-					ItemSeparatorComponent={List.Separator}
+					ItemSeparatorComponent={RowSeparator}
 					ListHeaderComponent={this.renderHeader}
 					ListFooterComponent={!searching || searchResults.length > 0 ? <List.Separator /> : null}
 					ListEmptyComponent={this.renderEmptyComponent}
diff --git a/app/views/ShareView/Header.tsx b/app/views/ShareView/Header.tsx
index b107eb4f843..4c1b33bf32f 100644
--- a/app/views/ShareView/Header.tsx
+++ b/app/views/ShareView/Header.tsx
@@ -1,5 +1,6 @@
 import { memo, useEffect, useState } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import I18n from '~/i18n';
 import { CustomIcon, type TIconsName } from '~/containers/CustomIcon';
@@ -107,9 +108,9 @@ const Header = memo(({ room, thread }: IHeader) => {
 					</Text>
 				</Text>
 				<CustomIcon name={icon} size={16} color={textColor} />
-				<Text style={[styles.name, { color: textColor }]} numberOfLines={1}>
+				<PlainText style={[styles.name, { color: textColor }]} numberOfLines={1}>
 					{title}
-				</Text>
+				</PlainText>
 			</View>
 		</View>
 	);
diff --git a/app/views/ShareView/Preview.tsx b/app/views/ShareView/Preview.tsx
index 5128c571d26..5aafb6fa430 100644
--- a/app/views/ShareView/Preview.tsx
+++ b/app/views/ShareView/Preview.tsx
@@ -2,7 +2,8 @@ import { memo, useRef, useState } from 'react';
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { useEventListener } from 'expo';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { ScrollView, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
+import { ScrollView, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import prettyBytes from 'pretty-bytes';
 import { useHeaderHeight } from '@react-navigation/elements';
 
@@ -37,7 +38,7 @@ const VideoPreview = memo(({ uri, width, height }: { uri: string; width?: number
 			style={{ width: width || '100%', height: height || '100%' }}
 			contentFit='contain'
 			nativeControls
-			allowsFullscreen
+			fullscreenOptions={{ enable: true }}
 		/>
 	);
 });
@@ -78,8 +79,8 @@ const IconPreview = memo(({ iconName, title, description, theme, width, height,
 			size={56}
 			color={danger ? themes[theme].buttonBackgroundDangerDefault : themes[theme].badgeBackgroundLevel2}
 		/>
-		<Text style={[styles.fileName, { color: themes[theme].fontTitlesLabels }]}>{title}</Text>
-		{description ? <Text style={[styles.fileSize, { color: themes[theme].fontDefault }]}>{description}</Text> : null}
+		<PlainText style={[styles.fileName, { color: themes[theme].fontTitlesLabels }]}>{title}</PlainText>
+		{description ? <PlainText style={[styles.fileSize, { color: themes[theme].fontDefault }]}>{description}</PlainText> : null}
 	</ScrollView>
 ));
 
diff --git a/app/views/ShareView/ShareView.test.tsx b/app/views/ShareView/ShareView.test.tsx
index 071795e5802..792e2c7f4be 100644
--- a/app/views/ShareView/ShareView.test.tsx
+++ b/app/views/ShareView/ShareView.test.tsx
@@ -154,11 +154,11 @@ const makeInstance = ({
 	return shareView;
 };
 
-describe('ShareView', () => {
-	afterEach(() => {
-		jest.useRealTimers();
-	});
+afterEach(() => {
+	jest.useRealTimers();
+});
 
+describe('ShareView', () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
 		mockGetSubscriptionByRoomId.mockResolvedValue({
diff --git a/app/views/ShareView/index.tsx b/app/views/ShareView/index.tsx
index 3cfce684b40..6f0ceb75d90 100644
--- a/app/views/ShareView/index.tsx
+++ b/app/views/ShareView/index.tsx
@@ -1,7 +1,8 @@
 import { Component, createRef, type RefObject } from 'react';
 import { type NativeStackNavigationOptions, type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { type RouteProp } from '@react-navigation/native';
-import { Keyboard, Text, View } from 'react-native';
+import { Keyboard, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { connect } from 'react-redux';
 import { Q } from '@nozbe/watermelondb';
 import { type Dispatch } from 'redux';
@@ -440,9 +441,9 @@ class ShareView extends Component<IShareViewProps, IShareViewState> {
 		if (readOnly || isBlocked(room)) {
 			return (
 				<View style={[styles.container, styles.centered, { backgroundColor: themes[theme].surfaceHover }]} testID='share-view'>
-					<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>
+					<PlainText style={[styles.title, { color: themes[theme].fontTitlesLabels }]}>
 						{isBlocked(room) ? I18n.t('This_room_is_blocked') : I18n.t('This_room_is_read_only')}
-					</Text>
+					</PlainText>
 				</View>
 			);
 		}
diff --git a/app/views/SidebarView/components/Admin.tsx b/app/views/SidebarView/components/Admin.tsx
index 5d0418b5d98..a8ea1a1683a 100644
--- a/app/views/SidebarView/components/Admin.tsx
+++ b/app/views/SidebarView/components/Admin.tsx
@@ -6,9 +6,7 @@ import { usePermissions } from '~/lib/hooks/usePermissions';
 import { useTheme } from '~/theme';
 import { sidebarNavigate } from '../methods/sidebarNavigate';
 
-const Admin = ({ currentScreen }: { currentScreen: string | null }) => {
-	const isMasterDetail = useMasterDetail();
-	const { colors } = useTheme();
+export const useIsAdmin = () => {
 	const [
 		viewStatisticsPermission,
 		viewRoomAdministrationPermission,
@@ -32,10 +30,19 @@ const Admin = ({ currentScreen }: { currentScreen: string | null }) => {
 		]
 	);
 
+	return isAdmin;
+};
+
+export const useAdminRoute = () => (useMasterDetail() ? 'AdminPanelView' : 'AdminPanelStackNavigator');
+
+const Admin = ({ currentScreen }: { currentScreen: string | null }) => {
+	const routeName = useAdminRoute();
+	const { colors } = useTheme();
+	const isAdmin = useIsAdmin();
+
 	if (!isAdmin) {
 		return null;
 	}
-	const routeName = isMasterDetail ? 'AdminPanelView' : 'AdminPanelStackNavigator';
 	return (
 		<>
 			<List.Item
diff --git a/app/views/SidebarView/components/CustomStatus.tsx b/app/views/SidebarView/components/CustomStatus.tsx
index 282a8fde470..d1869af795d 100644
--- a/app/views/SidebarView/components/CustomStatus.tsx
+++ b/app/views/SidebarView/components/CustomStatus.tsx
@@ -5,6 +5,7 @@ import { shallowEqual, useDispatch } from 'react-redux';
 import { CustomIcon } from '~/containers/CustomIcon';
 import Status from '~/containers/Status/Status';
 import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
 import styles from '../styles';
 import { useTheme } from '~/theme';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
@@ -15,12 +16,15 @@ import I18n from '~/i18n';
 import { NOTIFICATION_PRESENCE_CAP } from '~/lib/constants/notifications';
 import { sidebarNavigate } from '../methods/sidebarNavigate';
 
+export const useIsCustomStatusVisible = () =>
+	Boolean(useAppSelector(state => state.settings.Accounts_AllowUserStatusMessageChange));
+
 const CustomStatus = () => {
 	const { colors } = useTheme();
 	const { status: userStatus, statusText } = useAppSelector(getUserSelector, shallowEqual);
 	const presenceBroadcastDisabled = useAppSelector(state => state.settings.Presence_broadcast_disabled) as boolean;
 	const notificationPresenceCap = useAppSelector(state => state.app.notificationPresenceCap);
-	const allowStatusMessage = useAppSelector(state => state.settings.Accounts_AllowUserStatusMessageChange);
+	const allowStatusMessage = useIsCustomStatusVisible();
 	const dispatch = useDispatch();
 
 	const onPressPresenceLearnMore = () => {
@@ -77,4 +81,4 @@ const CustomStatus = () => {
 	);
 };
 
-export default memo(CustomStatus);
+export default asNativeListRow(memo(CustomStatus));
diff --git a/app/views/SidebarView/components/Profile.ios.tsx b/app/views/SidebarView/components/Profile.ios.tsx
new file mode 100644
index 00000000000..1c4a9297102
--- /dev/null
+++ b/app/views/SidebarView/components/Profile.ios.tsx
@@ -0,0 +1,43 @@
+import { memo } from 'react';
+import { type DrawerNavigationProp } from '@react-navigation/drawer';
+import { shallowEqual } from 'react-redux';
+
+import Avatar from '~/containers/Avatar';
+import { getUserSelector } from '~/selectors/login';
+import { type DrawerParamList } from '~/stacks/types';
+import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
+import { useAppSelector } from '~/lib/hooks/useAppSelector';
+import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+
+const PROFILE_ROW_HEIGHT = 68;
+
+const Profile = ({ navigation }: { navigation: DrawerNavigationProp<DrawerParamList> }) => {
+	const isMasterDetail = useMasterDetail();
+	const { username, name, statusText } = useAppSelector(getUserSelector, shallowEqual);
+	const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name);
+	const siteName = useAppSelector(state => state.settings.Site_Name) as string;
+
+	const onPressUser = () => {
+		if (isMasterDetail) {
+			return;
+		}
+		navigation.closeDrawer();
+	};
+
+	return (
+		<List.Item
+			title={(useRealName ? name : username) ?? ''}
+			translateTitle={false}
+			subtitle={statusText || siteName}
+			translateSubtitle={false}
+			left={() => <Avatar text={username} size={40} />}
+			heightContainer={PROFILE_ROW_HEIGHT}
+			onPress={onPressUser}
+			testID='sidebar-close-drawer'
+			numberOfLines={1}
+		/>
+	);
+};
+
+export default asNativeListRow(memo(Profile));
diff --git a/app/views/SidebarView/components/Profile.tsx b/app/views/SidebarView/components/Profile.tsx
index 0520dd79f84..f49f5d8a13f 100644
--- a/app/views/SidebarView/components/Profile.tsx
+++ b/app/views/SidebarView/components/Profile.tsx
@@ -1,6 +1,7 @@
 import { memo } from 'react';
 import { type DrawerNavigationProp } from '@react-navigation/drawer';
-import { Text, TouchableWithoutFeedback, View } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { shallowEqual } from 'react-redux';
 
 import Avatar from '~/containers/Avatar';
@@ -11,10 +12,12 @@ import { type DrawerParamList } from '~/stacks/types';
 import * as List from '~/containers/List';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { useNativeListMode } from '~/containers/List/native/context';
 
 const Profile = ({ navigation }: { navigation: DrawerNavigationProp<DrawerParamList> }) => {
 	const { colors } = useTheme();
 	const isMasterDetail = useMasterDetail();
+	const isInNativeList = useNativeListMode();
 	const { username, name } = useAppSelector(getUserSelector, shallowEqual);
 	const useRealName = useAppSelector(state => state.settings.UI_Use_Real_Name);
 	const server = useAppSelector(state => state.server.server);
@@ -31,20 +34,20 @@ const Profile = ({ navigation }: { navigation: DrawerNavigationProp<DrawerParamL
 		<>
 			<List.Separator />
 			<TouchableWithoutFeedback onPress={onPressUser} testID='sidebar-close-drawer'>
-				<View style={[styles.header, { backgroundColor: colors.surfaceRoom }]}>
+				<View style={[styles.header, { backgroundColor: isInNativeList ? 'transparent' : colors.surfaceRoom }]}>
 					<Avatar text={username} style={styles.avatar} size={30} />
 					<View style={styles.headerTextContainer}>
 						<View style={styles.headerUsername}>
-							<Text numberOfLines={1} style={[styles.username, { color: colors.fontTitlesLabels }]}>
+							<PlainText numberOfLines={1} style={[styles.username, { color: colors.fontTitlesLabels }]}>
 								{useRealName ? name : username}
-							</Text>
+							</PlainText>
 						</View>
-						<Text
+						<PlainText
 							style={[styles.currentServerText, { color: colors.fontTitlesLabels }]}
 							numberOfLines={1}
 							accessibilityLabel={`Connected to ${server}`}>
 							{siteName}
-						</Text>
+						</PlainText>
 					</View>
 				</View>
 			</TouchableWithoutFeedback>
diff --git a/app/views/SidebarView/components/StackItem.tsx b/app/views/SidebarView/components/StackItem.tsx
new file mode 100644
index 00000000000..fd5a4ab03e4
--- /dev/null
+++ b/app/views/SidebarView/components/StackItem.tsx
@@ -0,0 +1,20 @@
+import { useTheme } from '~/theme';
+import * as List from '~/containers/List';
+import { type IStackItem } from './useStackItems';
+
+const StackItem = ({ item }: { item: IStackItem }) => {
+	const { colors } = useTheme();
+
+	return (
+		<List.Item
+			title={item.title}
+			left={() => <List.Icon name={item.icon} />}
+			onPress={item.onPress}
+			backgroundColor={item.selected ? colors.strokeLight : undefined}
+			testID={item.testID}
+			disabled={item.disabled}
+		/>
+	);
+};
+
+export default StackItem;
diff --git a/app/views/SidebarView/components/Stacks.tsx b/app/views/SidebarView/components/Stacks.tsx
index 36b6beeed7e..bab9c345a9f 100644
--- a/app/views/SidebarView/components/Stacks.tsx
+++ b/app/views/SidebarView/components/Stacks.tsx
@@ -1,64 +1,20 @@
-import { useTheme } from '~/theme';
+import { Fragment } from 'react';
+
 import * as List from '~/containers/List';
-import { sidebarNavigate } from '../methods/sidebarNavigate';
-import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
-import { useNewMediaCall } from '~/lib/hooks/useNewMediaCall';
+import StackItem from './StackItem';
+import { useStackItems } from './useStackItems';
 
 const Stacks = ({ currentScreen }: { currentScreen: string | null }) => {
-	const { colors } = useTheme();
-	const isMasterDetail = useMasterDetail();
-	const { openNewMediaCall, hasMediaCallPermission, isInActiveCall } = useNewMediaCall();
-
-	if (isMasterDetail) {
-		return null;
-	}
+	const items = useStackItems(currentScreen);
 
 	return (
 		<>
-			<List.Item
-				title={'Chats'}
-				left={() => <List.Icon name='message' />}
-				onPress={() => sidebarNavigate('ChatsStackNavigator')}
-				backgroundColor={currentScreen === 'ChatsStackNavigator' ? colors.strokeLight : undefined}
-				testID='sidebar-chats'
-			/>
-			<List.Separator />
-			{hasMediaCallPermission ? (
-				<>
-					<List.Item
-						title={'Voice_call'}
-						left={() => <List.Icon name='phone' />}
-						onPress={openNewMediaCall}
-						testID='sidebar-media-call'
-						disabled={isInActiveCall}
-					/>
+			{items.map(item => (
+				<Fragment key={item.testID}>
+					<StackItem item={item} />
 					<List.Separator />
-				</>
-			) : null}
-			<List.Item
-				title={'Profile'}
-				left={() => <List.Icon name='user' />}
-				onPress={() => sidebarNavigate('ProfileStackNavigator')}
-				backgroundColor={currentScreen === 'ProfileStackNavigator' ? colors.strokeLight : undefined}
-				testID='sidebar-profile'
-			/>
-			<List.Separator />
-			<List.Item
-				title={'Accessibility_and_Appearance'}
-				left={() => <List.Icon name='accessibility' />}
-				onPress={() => sidebarNavigate('AccessibilityStackNavigator')}
-				backgroundColor={currentScreen === 'AccessibilityStackNavigator' ? colors.strokeLight : undefined}
-				testID='sidebar-accessibility'
-			/>
-			<List.Separator />
-			<List.Item
-				title={'Settings'}
-				left={() => <List.Icon name='administration' />}
-				onPress={() => sidebarNavigate('SettingsStackNavigator')}
-				backgroundColor={currentScreen === 'SettingsStackNavigator' ? colors.strokeLight : undefined}
-				testID='sidebar-settings'
-			/>
-			<List.Separator />
+				</Fragment>
+			))}
 		</>
 	);
 };
diff --git a/app/views/SidebarView/components/SupportedVersionsWarnItem.tsx b/app/views/SidebarView/components/SupportedVersionsWarnItem.tsx
index 333199ed308..1e945c2c689 100644
--- a/app/views/SidebarView/components/SupportedVersionsWarnItem.tsx
+++ b/app/views/SidebarView/components/SupportedVersionsWarnItem.tsx
@@ -3,15 +3,18 @@ import { memo } from 'react';
 import { useTheme } from '~/theme';
 import { CustomIcon } from '~/containers/CustomIcon';
 import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
 import { showActionSheetRef } from '~/containers/ActionSheet';
 import Navigation from '~/lib/navigation/appNavigation';
 import { SupportedVersionsWarning } from '~/containers/SupportedVersions';
 
+export const useIsSupportedVersionsWarnVisible = () => useAppSelector(state => state.supportedVersions.status) === 'warn';
+
 const SupportedVersionsWarnItem = () => {
 	const { colors } = useTheme();
-	const supportedVersionsStatus = useAppSelector(state => state.supportedVersions.status);
+	const isVisible = useIsSupportedVersionsWarnVisible();
 	const isMasterDetail = useMasterDetail();
 
 	const onPressSupportedVersionsWarning = () => {
@@ -22,7 +25,7 @@ const SupportedVersionsWarnItem = () => {
 		}
 	};
 
-	if (supportedVersionsStatus === 'warn') {
+	if (isVisible) {
 		return (
 			<>
 				<List.Item
@@ -39,4 +42,4 @@ const SupportedVersionsWarnItem = () => {
 	return null;
 };
 
-export default memo(SupportedVersionsWarnItem);
+export default asNativeListRow(memo(SupportedVersionsWarnItem));
diff --git a/app/views/SidebarView/components/__tests__/getSidebarSelection.test.ts b/app/views/SidebarView/components/__tests__/getSidebarSelection.test.ts
new file mode 100644
index 00000000000..8c555e92226
--- /dev/null
+++ b/app/views/SidebarView/components/__tests__/getSidebarSelection.test.ts
@@ -0,0 +1,40 @@
+import { getSidebarSelection } from '../getSidebarSelection';
+import { type IStackItem } from '../useStackItems';
+
+const item = (testID: string, selected: boolean, route?: string): IStackItem => ({
+	title: testID,
+	icon: 'message',
+	testID,
+	onPress: jest.fn(),
+	selected,
+	route
+});
+
+const stackItems = [
+	item('sidebar-chats', false, 'ChatsStackNavigator'),
+	item('sidebar-media-call', false),
+	item('sidebar-profile', true, 'ProfileStackNavigator')
+];
+
+describe('getSidebarSelection', () => {
+	it('selects the stack item of the current route ', () => {
+		expect(getSidebarSelection(stackItems, null, 'ProfileStackNavigator')).toEqual({ selectedTag: 'sidebar-profile' });
+	});
+
+	it('selects admin when the current route is the admin route', () => {
+		const items = stackItems.map(stackItem => ({ ...stackItem, selected: false }));
+		expect(getSidebarSelection(items, 'AdminPanelStackNavigator', 'AdminPanelStackNavigator')).toEqual({
+			selectedTag: 'sidebar-admin'
+		});
+	});
+
+	it('never selects a row without a route', () => {
+		const items = [item('sidebar-media-call', true)];
+		expect(getSidebarSelection(items, null, null).selectedTag).toBeNull();
+	});
+
+	it('selects nothing when the current route has no row', () => {
+		const items = stackItems.map(stackItem => ({ ...stackItem, selected: false }));
+		expect(getSidebarSelection(items, null, 'Other').selectedTag).toBeNull();
+	});
+});
diff --git a/app/views/SidebarView/components/getSidebarSelection.ts b/app/views/SidebarView/components/getSidebarSelection.ts
new file mode 100644
index 00000000000..3abf8be7694
--- /dev/null
+++ b/app/views/SidebarView/components/getSidebarSelection.ts
@@ -0,0 +1,14 @@
+import { type IListSelection } from '~/containers/List/ListContainer.ios';
+import { type IStackItem } from './useStackItems';
+
+export const ADMIN_SELECTION_TAG = 'sidebar-admin';
+
+export const getSidebarSelection = (
+	stackItems: IStackItem[],
+	adminRoute: string | null,
+	currentScreen: string | null
+): IListSelection => {
+	const selectedItem = stackItems.find(item => item.route && item.selected);
+	const isAdminSelected = adminRoute !== null && currentScreen === adminRoute;
+	return { selectedTag: selectedItem?.testID ?? (isAdminSelected ? ADMIN_SELECTION_TAG : null) };
+};
diff --git a/app/views/SidebarView/components/useStackItems.ts b/app/views/SidebarView/components/useStackItems.ts
new file mode 100644
index 00000000000..894b79db1fd
--- /dev/null
+++ b/app/views/SidebarView/components/useStackItems.ts
@@ -0,0 +1,53 @@
+import { type TIconsName } from '~/containers/CustomIcon';
+import { useMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { useNewMediaCall } from '~/lib/hooks/useNewMediaCall';
+import { sidebarNavigate } from '../methods/sidebarNavigate';
+
+export interface IStackItem {
+	title: string;
+	icon: TIconsName;
+	testID: string;
+	onPress: () => void;
+	selected: boolean;
+	route?: string;
+	disabled?: boolean;
+}
+
+export const useStackItems = (currentScreen: string | null): IStackItem[] => {
+	const isMasterDetail = useMasterDetail();
+	const { openNewMediaCall, hasMediaCallPermission, isInActiveCall } = useNewMediaCall();
+
+	if (isMasterDetail) {
+		return [];
+	}
+
+	const routeItem = (title: string, icon: TIconsName, testID: string, route: string): IStackItem => ({
+		title,
+		icon,
+		testID,
+		onPress: () => sidebarNavigate(route),
+		selected: currentScreen === route,
+		route
+	});
+
+	const mediaCallItems: IStackItem[] = hasMediaCallPermission
+		? [
+				{
+					title: 'Voice_call',
+					icon: 'phone',
+					testID: 'sidebar-media-call',
+					onPress: openNewMediaCall,
+					selected: false,
+					disabled: isInActiveCall
+				}
+			]
+		: [];
+
+	return [
+		routeItem('Chats', 'message', 'sidebar-chats', 'ChatsStackNavigator'),
+		...mediaCallItems,
+		routeItem('Profile', 'user', 'sidebar-profile', 'ProfileStackNavigator'),
+		routeItem('Accessibility_and_Appearance', 'accessibility', 'sidebar-accessibility', 'AccessibilityStackNavigator'),
+		routeItem('Settings', 'administration', 'sidebar-settings', 'SettingsStackNavigator')
+	];
+};
diff --git a/app/views/SidebarView/index.ios.tsx b/app/views/SidebarView/index.ios.tsx
new file mode 100644
index 00000000000..333b451a842
--- /dev/null
+++ b/app/views/SidebarView/index.ios.tsx
@@ -0,0 +1,19 @@
+import { type DrawerNavigationProp } from '@react-navigation/drawer';
+import { View } from 'react-native';
+
+import ListContainer from '~/containers/List/ListContainer.ios';
+import styles from './styles';
+import { type DrawerParamList } from '~/stacks/types';
+import { useSidebarSections } from './useSidebarSections.ios';
+
+const SidebarView = ({ navigation }: { navigation: DrawerNavigationProp<DrawerParamList> }) => {
+	const { sections, selection } = useSidebarSections(navigation);
+
+	return (
+		<View testID='sidebar-view' style={styles.container}>
+			<ListContainer selection={selection}>{sections}</ListContainer>
+		</View>
+	);
+};
+
+export default SidebarView;
diff --git a/app/views/SidebarView/index.tsx b/app/views/SidebarView/index.tsx
index c65c6ba18ef..1f00b54ce25 100644
--- a/app/views/SidebarView/index.tsx
+++ b/app/views/SidebarView/index.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { type DrawerNavigationProp } from '@react-navigation/drawer';
 import { ScrollView, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import scrollPersistTaps from '~/lib/methods/helpers/scrollPersistTaps';
 import styles from './styles';
@@ -12,6 +13,7 @@ import Admin from './components/Admin';
 import Profile from './components/Profile';
 
 const SidebarView = ({ navigation }: { navigation: DrawerNavigationProp<DrawerParamList> }) => {
+	const { top } = useSafeAreaInsets();
 	const [currentScreen, setCurrentScreen] = useState<string | null>(null);
 
 	useEffect(() => {
@@ -24,7 +26,11 @@ const SidebarView = ({ navigation }: { navigation: DrawerNavigationProp<DrawerPa
 
 	return (
 		<View testID='sidebar-view' style={styles.container}>
-			<ScrollView style={styles.container} {...scrollPersistTaps}>
+			<ScrollView
+				style={styles.container}
+				contentContainerStyle={{ paddingTop: top }}
+				contentInsetAdjustmentBehavior='never'
+				{...scrollPersistTaps}>
 				<Profile navigation={navigation} />
 				<SupportedVersionsWarnItem />
 				<CustomStatus />
diff --git a/app/views/SidebarView/methods/__tests__/sidebarNavigate.test.ts b/app/views/SidebarView/methods/__tests__/sidebarNavigate.test.ts
new file mode 100644
index 00000000000..d1dda82be21
--- /dev/null
+++ b/app/views/SidebarView/methods/__tests__/sidebarNavigate.test.ts
@@ -0,0 +1,29 @@
+import { sidebarNavigate } from '../sidebarNavigate';
+import Navigation from '~/lib/navigation/appNavigation';
+
+jest.mock('~/lib/methods/helpers/log', () => ({
+	events: {},
+	logEvent: jest.fn()
+}));
+
+const mockNavigate = jest.fn();
+const mockDispatch = jest.fn();
+
+describe('sidebarNavigate', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		Navigation.navigationRef.current = { navigate: mockNavigate, dispatch: mockDispatch } as any;
+	});
+
+	it('navigates to the route', () => {
+		sidebarNavigate('AccessibilityStackNavigator');
+
+		expect(mockNavigate).toHaveBeenCalledWith('AccessibilityStackNavigator', undefined);
+	});
+
+	it('closes the drawer even when navigating to the focused route', () => {
+		sidebarNavigate('AccessibilityStackNavigator');
+
+		expect(mockDispatch).toHaveBeenCalledWith(expect.objectContaining({ type: 'CLOSE_DRAWER' }));
+	});
+});
diff --git a/app/views/SidebarView/methods/sidebarNavigate.ts b/app/views/SidebarView/methods/sidebarNavigate.ts
index 07cc3fc6f11..064ba9fb57f 100644
--- a/app/views/SidebarView/methods/sidebarNavigate.ts
+++ b/app/views/SidebarView/methods/sidebarNavigate.ts
@@ -1,3 +1,5 @@
+import { DrawerActions } from '@react-navigation/native';
+
 import Navigation from '~/lib/navigation/appNavigation';
 import { events, logEvent } from '~/lib/methods/helpers/log';
 
@@ -5,4 +7,5 @@ export const sidebarNavigate = (route: string) => {
 	// @ts-ignore
 	logEvent(events[`SIDEBAR_GO_${route.replace('StackNavigator', '').replace('View', '').toUpperCase()}`]);
 	Navigation.navigate(route);
+	Navigation.dispatch(DrawerActions.closeDrawer());
 };
diff --git a/app/views/SidebarView/useSidebarSections.ios.tsx b/app/views/SidebarView/useSidebarSections.ios.tsx
new file mode 100644
index 00000000000..b6b78bd6e5a
--- /dev/null
+++ b/app/views/SidebarView/useSidebarSections.ios.tsx
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import { type DrawerNavigationProp } from '@react-navigation/drawer';
+
+import * as List from '~/containers/List';
+import { type DrawerParamList } from '~/stacks/types';
+import SupportedVersionsWarnItem, { useIsSupportedVersionsWarnVisible } from './components/SupportedVersionsWarnItem';
+import CustomStatus, { useIsCustomStatusVisible } from './components/CustomStatus';
+import { useStackItems } from './components/useStackItems';
+import { ADMIN_SELECTION_TAG, getSidebarSelection } from './components/getSidebarSelection';
+import { useAdminRoute, useIsAdmin } from './components/Admin';
+import { sidebarNavigate } from './methods/sidebarNavigate';
+import Profile from './components/Profile';
+
+const currentRouteName = (navigation: DrawerNavigationProp<DrawerParamList>) => {
+	const state = navigation.getState();
+	return state.routes[state.index].name;
+};
+
+export const useSidebarSections = (navigation: DrawerNavigationProp<DrawerParamList>) => {
+	const [currentScreen, setCurrentScreen] = useState<string | null>(() => currentRouteName(navigation));
+	const isSupportedVersionsWarnVisible = useIsSupportedVersionsWarnVisible();
+	const isCustomStatusVisible = useIsCustomStatusVisible();
+	const stackItems = useStackItems(currentScreen);
+	const isAdmin = useIsAdmin();
+	const adminRoute = useAdminRoute();
+	const selection = getSidebarSelection(stackItems, isAdmin ? adminRoute : null, currentScreen);
+
+	useEffect(() => {
+		const unsubscribe = navigation.addListener('state', () => {
+			setCurrentScreen(currentRouteName(navigation));
+		});
+
+		return unsubscribe;
+	}, [navigation]);
+
+	const sections = (
+		<>
+			<List.Section>
+				<Profile navigation={navigation} />
+			</List.Section>
+			{isSupportedVersionsWarnVisible || isCustomStatusVisible ? (
+				<List.Section>
+					{isSupportedVersionsWarnVisible ? <SupportedVersionsWarnItem /> : null}
+					{isCustomStatusVisible ? <CustomStatus /> : null}
+				</List.Section>
+			) : null}
+			{stackItems.length ? (
+				<List.Section>
+					{stackItems.map(item => (
+						<List.Item
+							key={item.testID}
+							title={item.title}
+							left={() => <List.Icon name={item.icon} />}
+							onPress={item.onPress}
+							testID={item.testID}
+							disabled={item.disabled}
+						/>
+					))}
+				</List.Section>
+			) : null}
+			{isAdmin ? (
+				<List.Section>
+					<List.Item
+						title='Admin_Panel'
+						testID={ADMIN_SELECTION_TAG}
+						left={() => <List.Icon name='settings' />}
+						onPress={() => sidebarNavigate(adminRoute)}
+					/>
+				</List.Section>
+			) : null}
+		</>
+	);
+
+	return { sections, selection };
+};
diff --git a/app/views/SidebarView/useSidebarSections.tsx b/app/views/SidebarView/useSidebarSections.tsx
new file mode 100644
index 00000000000..7e4e81dcf7e
--- /dev/null
+++ b/app/views/SidebarView/useSidebarSections.tsx
@@ -0,0 +1,13 @@
+import { type DrawerNavigationProp } from '@react-navigation/drawer';
+
+import * as List from '~/containers/List';
+import { type DrawerParamList } from '~/stacks/types';
+import SidebarView from '.';
+
+export const useSidebarSections = (navigation: DrawerNavigationProp<DrawerParamList>) => ({
+	sections: (
+		<List.Section>
+			<SidebarView navigation={navigation} />
+		</List.Section>
+	)
+});
diff --git a/app/views/StatusView/ClearAfterPicker/ClearAfterNativeRow.tsx b/app/views/StatusView/ClearAfterPicker/ClearAfterNativeRow.tsx
new file mode 100644
index 00000000000..85ff24bd7f5
--- /dev/null
+++ b/app/views/StatusView/ClearAfterPicker/ClearAfterNativeRow.tsx
@@ -0,0 +1,50 @@
+import { useActionSheet } from '~/containers/ActionSheet';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
+import NativeListPicker from '~/containers/List/native/Picker';
+import I18n from '~/i18n';
+import DatePickerSheetContent from './DatePickerSheetContent';
+import { CLEAR_AFTER_OPTIONS, type ClearAfterValue } from './types';
+
+interface IClearAfterNativeRowProps {
+	value: ClearAfterValue;
+	customDate: Date | null;
+	customDateLabel: string | null;
+	onChange: (value: ClearAfterValue, date: Date | null) => void;
+}
+
+const isClearAfterValue = (value: string): value is ClearAfterValue => CLEAR_AFTER_OPTIONS.some(option => option.value === value);
+
+const ClearAfterNativeRow = ({ value, customDate, customDateLabel, onChange }: IClearAfterNativeRowProps) => {
+	const { showActionSheet } = useActionSheet();
+
+	const options = CLEAR_AFTER_OPTIONS.map(option => ({
+		label: option.value === 'custom' && customDateLabel ? customDateLabel : I18n.t(option.labelKey),
+		value: option.value,
+		testID: `status-clear-after-${option.value || 'never'}`
+	}));
+
+	const handleSelectionChange = (selected: string) => {
+		if (!isClearAfterValue(selected)) {
+			return;
+		}
+		if (selected === 'custom') {
+			showActionSheet({
+				children: <DatePickerSheetContent initialDate={customDate ?? new Date()} onConfirm={date => onChange('custom', date)} />
+			});
+			return;
+		}
+		onChange(selected, null);
+	};
+
+	return (
+		<NativeListPicker
+			title={I18n.t('Status_clear_after')}
+			testID='status-view-clear-after'
+			options={options}
+			selection={value === 'custom' && !customDate ? '' : value}
+			onSelectionChange={handleSelectionChange}
+		/>
+	);
+};
+
+export default asNativeListRow(ClearAfterNativeRow);
diff --git a/app/views/StatusView/ClearAfterPicker/index.tsx b/app/views/StatusView/ClearAfterPicker/index.tsx
index 01d36f5c64a..7031ba8941e 100644
--- a/app/views/StatusView/ClearAfterPicker/index.tsx
+++ b/app/views/StatusView/ClearAfterPicker/index.tsx
@@ -1,11 +1,14 @@
 import { type ReactElement } from 'react';
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useActionSheet } from '~/containers/ActionSheet';
 import * as List from '~/containers/List';
+import { asNativeListSection } from '~/containers/List/native/rowMarkers';
+import { useNativeListMode } from '~/containers/List/native/context';
 import I18n from '~/i18n';
 import dayjs from '~/lib/dayjs';
 import { useTheme } from '~/theme';
+import ClearAfterNativeRow from './ClearAfterNativeRow';
 import ClearAfterSheetContent from './ClearAfterSheetContent';
 import styles from './styles';
 import { CLEAR_AFTER_OPTIONS, type ClearAfterValue } from './types';
@@ -22,10 +25,12 @@ interface IClearAfterPickerProps {
 const ClearAfterPicker = ({ value, customDate, onChange }: IClearAfterPickerProps): ReactElement => {
 	const { showActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const nativeListMode = useNativeListMode();
+	const customDateLabel = customDate ? dayjs(customDate).format('LL LT') : null;
 
 	const getDisplayLabel = (): string => {
-		if (value === 'custom' && customDate) {
-			return dayjs(customDate).format('LL LT');
+		if (value === 'custom' && customDateLabel) {
+			return customDateLabel;
 		}
 		if (value === 'custom' && !customDate) {
 			return I18n.t('Status_dont_clear');
@@ -40,13 +45,22 @@ const ClearAfterPicker = ({ value, customDate, onChange }: IClearAfterPickerProp
 		});
 	};
 
+	if (nativeListMode === 'native') {
+		return (
+			<List.Section>
+				<ClearAfterNativeRow value={value} customDate={customDate} customDateLabel={customDateLabel} onChange={onChange} />
+				<List.Info info='Status_clear_after_hint' />
+			</List.Section>
+		);
+	}
+
 	return (
 		<>
 			<List.Item
 				title='Status_clear_after'
 				testID='status-view-clear-after'
 				onPress={handlePress}
-				right={() => <Text style={[styles.pickerText, { color: colors.fontInfo }]}>{getDisplayLabel()}</Text>}
+				right={() => <PlainText style={[styles.pickerText, { color: colors.fontInfo }]}>{getDisplayLabel()}</PlainText>}
 				additionalAccessibilityLabel={getDisplayLabel()}
 				style={styles.listItem}
 			/>
@@ -56,4 +70,4 @@ const ClearAfterPicker = ({ value, customDate, onChange }: IClearAfterPickerProp
 	);
 };
 
-export default ClearAfterPicker;
+export default asNativeListSection(ClearAfterPicker);
diff --git a/app/views/StatusView/index.test.tsx b/app/views/StatusView/index.test.tsx
index eb21fa35be1..87f697ee106 100644
--- a/app/views/StatusView/index.test.tsx
+++ b/app/views/StatusView/index.test.tsx
@@ -7,6 +7,7 @@ import { setUser } from '~/actions/login';
 import { addSettings } from '~/actions/settings';
 import { selectServerSuccess } from '~/actions/server';
 import { initStore } from '~/lib/store/auxStore';
+import { type INativeListPicker } from '~/containers/List/native/types';
 import StatusView from './index';
 
 const mockNavigationSetOptions = jest.fn();
@@ -53,10 +54,26 @@ jest.mock('~/containers/ActionSheet', () => ({
 	useActionSheet: () => ({ showActionSheet: mockShowActionSheet, hideActionSheet: mockHideActionSheet })
 }));
 
+const mockPicker = jest.fn();
+jest.mock('~/containers/List/native/Picker', () => {
+	const { View } = require('react-native');
+	return {
+		__esModule: true,
+		default: (props: INativeListPicker) => {
+			mockPicker(props);
+			return <View testID={props.testID} />;
+		}
+	};
+});
+
+const latestPicker = (): INativeListPicker => mockPicker.mock.calls[mockPicker.mock.calls.length - 1][0];
+
 const Wrapper = ({ children }: { children: ReactNode }) => <Provider store={mockedStore}>{children}</Provider>;
 
 const renderStatusView = () => render(<StatusView />, { wrapper: Wrapper });
 
+const waitForSubmitEnabled = () => waitFor(() => expect(screen.getByTestId('status-view-submit')).not.toBeDisabled());
+
 describe('StatusView', () => {
 	beforeAll(() => {
 		initStore(mockedStore);
@@ -132,12 +149,10 @@ describe('StatusView', () => {
 
 			renderStatusView();
 
-			const submit = screen.getByTestId('status-view-submit');
-			// RectButton uses enabled prop — toBeDisabled() doesn't work with the mock
-			expect(submit.props.enabled).toBe(false);
+			expect(screen.getByTestId('status-view-submit')).toBeDisabled();
 		});
 
-		it('should be enabled when status is changed', () => {
+		it('should be enabled when status is changed', async () => {
 			mockedStore.dispatch(setUser({ id: 'user-id', username: 'user', status: 'online', statusText: '' }));
 			mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '6.0.0', name: 'Test' }));
 			mockedStore.dispatch(addSettings({ Accounts_AllowInvisibleStatusOption: true }));
@@ -146,10 +161,10 @@ describe('StatusView', () => {
 
 			fireEvent.press(screen.getByTestId('status-view-busy'));
 
-			expect(screen.getByTestId('status-view-submit')).not.toBeDisabled();
+			await waitForSubmitEnabled();
 		});
 
-		it('should be enabled when status text is changed', () => {
+		it('should be enabled when status text is changed', async () => {
 			mockedStore.dispatch(setUser({ id: 'user-id', username: 'user', status: 'online', statusText: '' }));
 			mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '6.0.0', name: 'Test' }));
 			mockedStore.dispatch(addSettings({ Accounts_AllowInvisibleStatusOption: true }));
@@ -158,12 +173,12 @@ describe('StatusView', () => {
 
 			fireEvent.changeText(screen.getByTestId('status-view-input'), 'New status');
 
-			expect(screen.getByTestId('status-view-submit')).not.toBeDisabled();
+			await waitForSubmitEnabled();
 		});
 	});
 
 	describe('submit action', () => {
-		it('should call setUserStatus with status and statusText', () => {
+		it('should call setUserStatus with status and statusText', async () => {
 			mockedStore.dispatch(setUser({ id: 'user-id', username: 'user', status: 'online', statusText: '' }));
 			mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '6.0.0', name: 'Test' }));
 			mockedStore.dispatch(addSettings({ Accounts_AllowInvisibleStatusOption: true }));
@@ -172,12 +187,13 @@ describe('StatusView', () => {
 			renderStatusView();
 
 			fireEvent.press(screen.getByTestId('status-view-busy'));
+			await waitForSubmitEnabled();
 			fireEvent.press(screen.getByTestId('status-view-submit'));
 
 			expect(mockSetUserStatus).toHaveBeenCalledWith('busy', '', undefined);
 		});
 
-		it('should call setUserStatus on modern server with status change', () => {
+		it('should call setUserStatus on modern server with status change', async () => {
 			mockedStore.dispatch(setUser({ id: 'user-id', username: 'user', status: 'online', statusText: '' }));
 			mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '8.6.0', name: 'Test' }));
 			mockedStore.dispatch(addSettings({ Accounts_AllowInvisibleStatusOption: true }));
@@ -187,6 +203,7 @@ describe('StatusView', () => {
 
 			fireEvent.press(screen.getByTestId('status-view-busy'));
 
+			await waitForSubmitEnabled();
 			fireEvent.press(screen.getByTestId('status-view-submit'));
 
 			expect(mockSetUserStatus).toHaveBeenCalledWith('busy', '', undefined);
@@ -217,6 +234,7 @@ describe('StatusView', () => {
 			renderStatusView();
 
 			fireEvent.press(screen.getByTestId('status-view-busy'));
+			await waitForSubmitEnabled();
 			fireEvent.press(screen.getByTestId('status-view-submit'));
 
 			await waitFor(() => expect(mockShowErrorAlertWithEMessage).toHaveBeenCalledWith(error));
@@ -234,7 +252,7 @@ describe('StatusView', () => {
 			expect(screen.getByTestId('status-view-clear-after')).toBeOnTheScreen();
 		});
 
-		it('should not pass statusExpiresAt on submit when picker was not touched', () => {
+		it('should not pass statusExpiresAt on submit when picker was not touched', async () => {
 			mockedStore.dispatch(
 				setUser({
 					id: 'user-id',
@@ -251,12 +269,13 @@ describe('StatusView', () => {
 			renderStatusView();
 
 			fireEvent.press(screen.getByTestId('status-view-online'));
+			await waitForSubmitEnabled();
 			fireEvent.press(screen.getByTestId('status-view-submit'));
 
 			expect(mockSetUserStatus).toHaveBeenCalledWith('online', '', undefined);
 		});
 
-		it('should pass expiresAt on submit when picker is interacted with', () => {
+		it('should pass expiresAt on submit when picker is interacted with', async () => {
 			jest.useFakeTimers();
 			jest.setSystemTime(new Date('2026-06-22T12:00:00.000Z'));
 			try {
@@ -267,13 +286,10 @@ describe('StatusView', () => {
 
 				renderStatusView();
 
-				fireEvent.press(screen.getByTestId('status-view-clear-after'));
-
-				expect(mockShowActionSheet).toHaveBeenCalled();
-				const { children } = mockShowActionSheet.mock.calls[0][0] as { children: any };
-				const { onConfirm } = children.props;
-				act(() => onConfirm('30', null));
+				act(() => latestPicker().onSelectionChange('30'));
 
+				await act(async () => {});
+				expect(screen.getByTestId('status-view-submit')).not.toBeDisabled();
 				fireEvent.press(screen.getByTestId('status-view-submit'));
 
 				expect(mockSetUserStatus).toHaveBeenCalledWith('online', '', '2026-06-22T12:30:00.000Z');
@@ -281,5 +297,18 @@ describe('StatusView', () => {
 				jest.useRealTimers();
 			}
 		});
+
+		it('should open the date picker sheet when custom is selected', () => {
+			mockedStore.dispatch(setUser({ id: 'user-id', username: 'user', status: 'online', statusText: '' }));
+			mockedStore.dispatch(selectServerSuccess({ server: 'https://example.com', version: '8.6.0', name: 'Test' }));
+			mockedStore.dispatch(addSettings({ Accounts_AllowInvisibleStatusOption: true }));
+
+			renderStatusView();
+
+			act(() => latestPicker().onSelectionChange('custom'));
+
+			expect(mockShowActionSheet).toHaveBeenCalledTimes(1);
+			expect(latestPicker().selection).toBe('');
+		});
 	});
 });
diff --git a/app/views/StatusView/index.tsx b/app/views/StatusView/index.tsx
index 5865b009077..1dae150af5d 100644
--- a/app/views/StatusView/index.tsx
+++ b/app/views/StatusView/index.tsx
@@ -1,5 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
-import { type ReactElement, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, type ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 import { FlatList, StyleSheet } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { useForm } from 'react-hook-form';
@@ -21,11 +21,12 @@ import I18n from '~/i18n';
 import { showToast } from '~/lib/methods/helpers/showToast';
 import { setUserStatus } from '~/lib/services/restApi';
 import { getUserSelector } from '~/selectors/login';
-import { showErrorAlertWithEMessage, compareServerVersion } from '~/lib/methods/helpers';
+import { showErrorAlertWithEMessage, compareServerVersion, isIOS } from '~/lib/methods/helpers';
 import log, { events, logEvent } from '~/lib/methods/helpers/log';
 import { useTheme } from '~/theme';
 import { USER_STATUS_TEXT_MAX_LENGTH } from '~/lib/constants/maxLength';
-import { type ClearAfterValue, computeExpiresAt, getInitialClearAfterState } from './ClearAfterPicker';
+import { useListBackgroundColor } from '~/containers/NativeListRow/useListBackgroundColor';
+import ClearAfterPicker, { type ClearAfterValue, computeExpiresAt, getInitialClearAfterState } from './ClearAfterPicker';
 import FooterComponent from './FooterComponent';
 
 const validationSchema = yup.object().shape({
@@ -68,41 +69,16 @@ const styles = StyleSheet.create({
 		borderRadius: 0,
 		borderTopWidth: 1,
 		borderBottomWidth: 1
+	},
+	rowInputContainer: {
+		marginBottom: 0
+	},
+	rowInputStyle: {
+		borderWidth: 0,
+		backgroundColor: 'transparent'
 	}
 });
 
-const Status = ({
-	statusType,
-	status,
-	setStatus
-}: {
-	statusType: IStatus;
-	status: TUserStatus;
-	setStatus: (status: TUserStatus) => void;
-}) => {
-	const { id, name } = statusType;
-	return (
-		<>
-			<List.Radio
-				isSelected={status === id}
-				additionalAccessibilityLabel={`${status === id ? I18n.t('Current_Status') : ''}`}
-				title={name}
-				onPress={() => {
-					const key = `STATUS_${id.toUpperCase()}` as keyof typeof events;
-					logEvent(events[key]);
-					if (status !== id) {
-						setStatus(id);
-					}
-				}}
-				testID={`status-view-${id}`}
-				value={statusType.id}
-				left={() => <StatusIcon size={24} status={statusType.id} />}
-			/>
-			<List.Separator />
-		</>
-	);
-};
-
 const StatusView = (): ReactElement => {
 	const user = useSelector((state: IApplicationState) => getUserSelector(state));
 	const isMasterDetail = useMasterDetail();
@@ -135,6 +111,7 @@ const StatusView = (): ReactElement => {
 	const dispatch = useDispatch();
 	const { setOptions, goBack } = useNavigation();
 	const { colors } = useTheme();
+	const listBackgroundColor = useListBackgroundColor(colors.surfaceTint);
 	const { bottom } = useSafeAreaInsets();
 
 	const submit = async () => {
@@ -160,8 +137,11 @@ const StatusView = (): ReactElement => {
 		setHeader();
 	}, [isMasterDetail]);
 
-	const setStatus = (updatedStatus: TUserStatus) => {
-		setValue('status', updatedStatus);
+	const selectStatus = (id: TUserStatus) => {
+		logEvent(events[`STATUS_${id.toUpperCase()}` as keyof typeof events]);
+		if (inputValues.status !== id) {
+			setValue('status', id);
+		}
 	};
 
 	const setCustomStatus = async (status: TUserStatus, statusText: string, expiresAt?: string | null) => {
@@ -209,37 +189,92 @@ const StatusView = (): ReactElement => {
 		if (date) setClearAfterDate(date);
 	};
 
+	const statusInput = (
+		<ControlledFormTextInput
+			name='statusText'
+			control={control}
+			label={I18n.t('Status')}
+			value={statusText}
+			containerStyle={styles.inputContainer}
+			inputStyle={styles.inputStyle}
+			testID='status-view-input'
+			error={errors.statusText?.message}
+		/>
+	);
+
+	const statusRowInput = (
+		<ControlledFormTextInput
+			name='statusText'
+			control={control}
+			accessibilityLabel={I18n.t('Status')}
+			value={statusText}
+			containerStyle={styles.rowInputContainer}
+			inputStyle={styles.rowInputStyle}
+			testID='status-view-input'
+			error={errors.statusText?.message}
+		/>
+	);
+
+	const renderStatus = ({ id, name }: IStatus) => (
+		<List.Radio
+			isSelected={inputValues.status === id}
+			additionalAccessibilityLabel={inputValues.status === id ? I18n.t('Current_Status') : ''}
+			title={name}
+			onPress={() => selectStatus(id)}
+			testID={`status-view-${id}`}
+			value={id}
+			left={() => <StatusIcon size={24} status={id} />}
+		/>
+	);
+
+	const renderFooter = (showClearAfterPicker: boolean) => (
+		<FooterComponent
+			supportsStatusExpiry={showClearAfterPicker}
+			clearAfter={clearAfter}
+			clearAfterDate={clearAfterDate}
+			onClearAfterChange={handleClearAfterChange}
+			disabled={isStatusChanged()}
+			onSubmit={submit}
+		/>
+	);
+
+	if (isIOS) {
+		return (
+			<SafeAreaView testID='status-view' style={{ backgroundColor: listBackgroundColor, paddingTop: 16, paddingBottom: bottom }}>
+				<List.Container backgroundHidden>
+					<List.Section title='Status'>{statusRowInput}</List.Section>
+					<List.Section>
+						{statusType.map(status => (
+							<Fragment key={status.id}>{renderStatus(status)}</Fragment>
+						))}
+					</List.Section>
+					{supportsStatusExpiry ? (
+						<ClearAfterPicker value={clearAfter} customDate={clearAfterDate} onChange={handleClearAfterChange} />
+					) : null}
+				</List.Container>
+				{renderFooter(false)}
+			</SafeAreaView>
+		);
+	}
+
 	return (
 		<SafeAreaView testID='status-view'>
 			<FlatList
 				data={statusType}
 				keyExtractor={item => item.id}
-				renderItem={({ item }) => <Status statusType={item} status={inputValues.status} setStatus={setStatus} />}
+				renderItem={({ item }) => (
+					<>
+						{renderStatus(item)}
+						<List.Separator />
+					</>
+				)}
 				ListHeaderComponent={
 					<>
-						<ControlledFormTextInput
-							name='statusText'
-							control={control}
-							label={I18n.t('Status')}
-							value={statusText}
-							containerStyle={styles.inputContainer}
-							inputStyle={styles.inputStyle}
-							testID='status-view-input'
-							error={errors.statusText?.message}
-						/>
+						{statusInput}
 						<List.Separator />
 					</>
 				}
-				ListFooterComponent={
-					<FooterComponent
-						supportsStatusExpiry={supportsStatusExpiry}
-						clearAfter={clearAfter}
-						clearAfterDate={clearAfterDate}
-						onClearAfterChange={handleClearAfterChange}
-						disabled={isStatusChanged()}
-						onSubmit={submit}
-					/>
-				}
+				ListFooterComponent={renderFooter(supportsStatusExpiry)}
 				style={{ backgroundColor: colors.surfaceTint }}
 				contentContainerStyle={{ paddingBottom: bottom }}
 			/>
diff --git a/app/views/TeamChannelsView.tsx b/app/views/TeamChannelsView.tsx
index 43fbdd2f148..915530a0796 100644
--- a/app/views/TeamChannelsView.tsx
+++ b/app/views/TeamChannelsView.tsx
@@ -3,7 +3,8 @@ import { type NativeStackNavigationOptions } from '@react-navigation/native-stac
 import { Alert, FlatList, Keyboard, PixelRatio } from 'react-native';
 import { connect } from 'react-redux';
 import { type EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
-import { Component } from 'react';
+import { type SearchBarCommands } from 'react-native-screens';
+import { Component, createRef } from 'react';
 
 import { deleteRoom } from '../actions/room';
 import { DisplayMode } from '../lib/constants/constantDisplayMode';
@@ -22,6 +23,7 @@ import { withDimensions } from '../lib/hooks/withDimensions';
 import { withMasterDetail } from '../lib/hooks/useMasterDetail';
 import { BASE_ROW_HEIGHT, BASE_ROW_HEIGHT_CONDENSED } from '../lib/hooks/useResponsiveLayout/useResponsiveLayout';
 import I18n from '../i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import database from '../lib/database';
 import { CustomIcon } from '../containers/CustomIcon';
 import RoomItem from '../containers/RoomItem';
@@ -30,7 +32,15 @@ import { withTheme } from '../theme';
 import { goRoom } from '../lib/methods/helpers/goRoom';
 import { showErrorAlert } from '../lib/methods/helpers/info';
 import log, { events, logEvent } from '../lib/methods/helpers/log';
-import { getRoomAvatar, getRoomTitle, hasPermission, debounce, isIOS, compareServerVersion } from '../lib/methods/helpers';
+import {
+	getRoomAvatar,
+	getRoomTitle,
+	hasPermission,
+	debounce,
+	hasNativeHeaderBar,
+	isIOS,
+	compareServerVersion
+} from '../lib/methods/helpers';
 import { getRoomInfo, getTeamListRoom, updateTeamRoom, removeTeamRoom } from '../lib/services/restApi';
 
 const API_FETCH_COUNT = 25;
@@ -96,6 +106,8 @@ class TeamChannelsView extends Component<ITeamChannelsViewProps, ITeamChannelsVi
 	private teamChannels: TSubscriptionModel[];
 	private team: TSubscriptionModel;
 
+	private searchBarRef = createRef<SearchBarCommands>();
+
 	constructor(props: ITeamChannelsViewProps) {
 		super(props);
 		this.teamChannels = [];
@@ -220,6 +232,36 @@ class TeamChannelsView extends Component<ITeamChannelsViewProps, ITeamChannelsVi
 			return;
 		}
 
+		if (hasNativeHeaderBar) {
+			const options: NativeStackNavigationOptions = {
+				headerLeft: undefined,
+				headerTitle: getRoomTitle(team),
+				headerSubtitle: team.topic,
+				onHeaderTitlePress: () => this.goRoomActionsView(),
+				headerSearchBarOptions: stackedSearchBarOptions({
+					ref: this.searchBarRef,
+					onFocus: this.onSearchPress,
+					onChangeText: this.onSearchChangeText,
+					onCancel: this.onCancelSearchPress
+				}),
+				headerRight: () => (
+					<HeaderButton.Container>
+						{showCreate ? (
+							<HeaderButton.Item
+								iconName='create'
+								testID='team-channels-view-create'
+								onPress={() =>
+									navigation.navigate('AddChannelTeamView', { teamId: this.teamId, rid: this.team.rid, t: this.team.t as any })
+								}
+							/>
+						) : null}
+					</HeaderButton.Container>
+				)
+			};
+			navigation.setOptions(options);
+			return;
+		}
+
 		if (isSearching) {
 			const options: NativeStackNavigationOptions = {
 				headerLeft: () => (
@@ -261,7 +303,11 @@ class TeamChannelsView extends Component<ITeamChannelsViewProps, ITeamChannelsVi
 
 	onSearchPress = () => {
 		logEvent(events.TC_SEARCH);
-		this.setState({ isSearching: true }, () => this.setHeader());
+		this.setState({ isSearching: true }, () => {
+			if (!hasNativeHeaderBar) {
+				this.setHeader();
+			}
+		});
 	};
 
 	onSearchChangeText = debounce((searchText: string) => {
@@ -297,7 +343,10 @@ class TeamChannelsView extends Component<ITeamChannelsViewProps, ITeamChannelsVi
 				end: false
 			},
 			() => {
-				this.setHeader();
+				if (!hasNativeHeaderBar) {
+					this.setHeader();
+				}
+				this.searchBarRef.current?.clearText();
 			}
 		);
 	};
diff --git a/app/views/ThemeView.tsx b/app/views/ThemeView.tsx
index a62caf2314e..ac8bd4f58fe 100644
--- a/app/views/ThemeView.tsx
+++ b/app/views/ThemeView.tsx
@@ -1,4 +1,4 @@
-import { type ReactElement, useLayoutEffect } from 'react';
+import { Fragment, type ReactElement, useLayoutEffect } from 'react';
 import { useNavigation } from '@react-navigation/native';
 
 import * as List from '../containers/List';
@@ -56,19 +56,6 @@ interface ITheme {
 	group: string;
 }
 
-const Item = ({ onPress, item, isSelected }: { onPress: () => void; item: ITheme; isSelected: boolean }) => (
-	<>
-		<List.Radio
-			isSelected={isSelected}
-			title={item.label}
-			value={item.value}
-			onPress={onPress}
-			testID={`theme-view-${item.value}`}
-		/>
-		<List.Separator />
-	</>
-);
-
 const ThemeView = (): ReactElement => {
 	const { themePreferences, setTheme } = useTheme();
 	const { setOptions } = useNavigation();
@@ -120,7 +107,16 @@ const ThemeView = (): ReactElement => {
 					<List.Separator />
 					<>
 						{themeGroup.map(theme => (
-							<Item onPress={() => onClick(theme)} item={theme} isSelected={!!isSelected(theme)} key={theme.label} />
+							<Fragment key={theme.label}>
+								<List.Radio
+									isSelected={!!isSelected(theme)}
+									title={theme.label}
+									value={theme.value}
+									onPress={() => onClick(theme)}
+									testID={`theme-view-${theme.value}`}
+								/>
+								<List.Separator />
+							</Fragment>
 						))}
 					</>
 				</List.Section>
@@ -128,7 +124,16 @@ const ThemeView = (): ReactElement => {
 					<List.Separator />
 					<>
 						{darkGroup.map(theme => (
-							<Item onPress={() => onClick(theme)} item={theme} isSelected={!!isSelected(theme)} key={theme.label} />
+							<Fragment key={theme.label}>
+								<List.Radio
+									isSelected={!!isSelected(theme)}
+									title={theme.label}
+									value={theme.value}
+									onPress={() => onClick(theme)}
+									testID={`theme-view-${theme.value}`}
+								/>
+								<List.Separator />
+							</Fragment>
 						))}
 					</>
 				</List.Section>
diff --git a/app/views/ThreadMessagesView/Item.tsx b/app/views/ThreadMessagesView/Item.tsx
index 1bb94384b2a..cfa62643fc0 100644
--- a/app/views/ThreadMessagesView/Item.tsx
+++ b/app/views/ThreadMessagesView/Item.tsx
@@ -1,4 +1,5 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { type ReactElement } from 'react';
 
 import { useTheme } from '~/theme';
@@ -82,10 +83,10 @@ const Item = ({ item, useRealName, user, badgeColor, onPress, toggleFollowThread
 				<Avatar style={styles.avatar} text={item?.u?.username} size={36} borderRadius={4} />
 				<View style={styles.contentContainer}>
 					<View style={styles.titleContainer}>
-						<Text style={[styles.title, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
+						<PlainText style={[styles.title, { color: themes[theme].fontTitlesLabels }]} numberOfLines={1}>
 							{username}
-						</Text>
-						<Text style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</Text>
+						</PlainText>
+						<PlainText style={[styles.time, { color: themes[theme].fontSecondaryInfo }]}>{time}</PlainText>
 					</View>
 					<View style={styles.messageContainer}>
 						<MarkdownPreview msg={makeThreadName(item)} numberOfLines={2} style={styles.markdown} />
diff --git a/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap b/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
index 367af2db8e6..7f27ac982b7 100644
--- a/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
+++ b/app/views/ThreadMessagesView/__snapshots__/Item.test.tsx.snap
@@ -38,63 +38,66 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -139,6 +142,7 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -156,6 +160,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -178,6 +184,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -201,6 +210,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -232,6 +244,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -448,60 +462,63 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -533,14 +550,14 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -577,63 +594,66 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -678,6 +698,7 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -695,6 +716,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -717,6 +740,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -740,6 +766,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -771,6 +800,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -987,60 +1018,63 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -1072,14 +1106,14 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -1116,63 +1150,66 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -1217,6 +1254,7 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -1234,6 +1272,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -1256,6 +1296,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -1279,6 +1322,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1310,6 +1356,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -1526,60 +1574,63 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -1611,14 +1662,14 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <ExternalKeyboardView
       canBeFocused={true}
@@ -1642,63 +1693,66 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            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={
-            {
-              "backgroundColor": "#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={{}}
+          testID="thread-messages-view-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         >
           <View
             style={
@@ -1743,6 +1797,7 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -1760,6 +1815,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -1782,6 +1839,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -1805,6 +1865,9 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -1836,6 +1899,8 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -2052,60 +2117,63 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -2137,14 +2205,14 @@ exports[`Story Snapshots: Badge should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -2201,63 +2269,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -2302,6 +2373,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -2319,6 +2391,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -2341,6 +2415,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -2364,6 +2441,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2395,6 +2475,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -2595,60 +2677,63 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -2680,14 +2765,14 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -2724,63 +2809,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            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={
-            {
-              "backgroundColor": "#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={{}}
+          testID="thread-messages-view-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
         >
           <View
             style={
@@ -2825,6 +2913,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -2842,6 +2931,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -2864,6 +2955,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -2887,6 +2981,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2918,6 +3015,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -3118,60 +3217,63 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -3203,14 +3305,14 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -3247,63 +3349,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -3348,6 +3453,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -3365,6 +3471,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -3387,6 +3495,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -3410,6 +3521,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3441,6 +3555,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -3641,60 +3757,63 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -3726,14 +3845,14 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -3770,63 +3889,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-"
         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={{}}
+          testID="thread-messages-view-"
         >
           <View
             style={
@@ -3871,6 +3993,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -3888,6 +4011,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -3910,6 +4035,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -3933,6 +4061,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -3964,6 +4095,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Attachment title"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -4164,60 +4297,63 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -4249,14 +4385,14 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -4293,63 +4429,66 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -4394,6 +4533,7 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -4411,6 +4551,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -4433,6 +4575,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Rocket Cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -4456,6 +4601,9 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                   Rocket Cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4487,6 +4635,8 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -4687,60 +4837,63 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -4772,14 +4925,14 @@ exports[`Story Snapshots: Content should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
@@ -4836,63 +4989,66 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#E4E7EA"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         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,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#FFFFFF",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -4937,6 +5093,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -4954,6 +5111,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -4976,6 +5135,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -4999,6 +5161,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -5030,6 +5195,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -5246,60 +5413,63 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#E4E7EA"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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={{}}
@@ -5331,14 +5501,14 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <ExternalKeyboardView
       canBeFocused={true}
@@ -5362,63 +5532,66 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#2D3039"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            {
-              "backgroundColor": "#1F2329",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#1F2329",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -5463,6 +5636,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -5480,6 +5654,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -5502,6 +5678,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -5525,6 +5704,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -5556,6 +5738,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -5772,60 +5956,63 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#2D3039"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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
                         accessibilityLabel="Follow thread"
                         style={{}}
@@ -5857,14 +6044,14 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <ExternalKeyboardView
       canBeFocused={true}
@@ -5888,63 +6075,66 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        activeOpacity={1}
+      <View
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        activeUnderlayOpacity={1}
+        animationDuration={0}
         collapsable={false}
-        delayLongPress={600}
-        enabled={true}
-        handlerTag={-1}
-        handlerType="NativeViewGestureHandler"
-        innerRef={null}
-        onActiveStateChange={[Function]}
-        onGestureHandlerEvent={[Function]}
-        onGestureHandlerStateChange={[Function]}
-        onPress={[Function]}
-        rippleColor="#16181a"
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           [
-            {
-              "backgroundColor": "#000000",
-              "borderRadius": undefined,
-              "margin": undefined,
-              "marginBottom": undefined,
-              "marginEnd": undefined,
-              "marginHorizontal": undefined,
-              "marginLeft": undefined,
-              "marginRight": undefined,
-              "marginStart": undefined,
-              "marginTop": undefined,
-              "marginVertical": undefined,
-            },
-            {
-              "cursor": undefined,
-            },
+            [
+              undefined,
+              {
+                "margin": undefined,
+                "marginBottom": undefined,
+                "marginEnd": undefined,
+                "marginHorizontal": undefined,
+                "marginLeft": undefined,
+                "marginRight": undefined,
+                "marginStart": undefined,
+                "marginTop": undefined,
+                "marginVertical": undefined,
+              },
+              {
+                "backgroundColor": "#000000",
+                "borderRadius": undefined,
+              },
+            ],
+            undefined,
           ]
         }
-        testID="thread-messages-view-Message content"
         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={{}}
+          testID="thread-messages-view-Message content"
         >
           <View
             style={
@@ -5989,6 +6179,7 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 onProgress={[Function]}
                 placeholder={[]}
                 priority="high"
+                sfEffect={null}
                 source={
                   [
                     {
@@ -6006,6 +6197,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                     "width": 36,
                   }
                 }
+                symbolSize={null}
+                symbolWeight={null}
                 transition={null}
                 width={36}
               />
@@ -6028,6 +6221,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="rocket.cat"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={1}
                   style={
                     [
@@ -6051,6 +6247,9 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                   rocket.cat
                 </Text>
                 <Text
+                  accessibilityLabel="November 10, 2020"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6082,6 +6281,8 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
               >
                 <Text
                   accessibilityLabel="Message content"
+                  accessibilityRole="text"
+                  accessible={true}
                   numberOfLines={2}
                   style={
                     [
@@ -6298,60 +6499,63 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                       ]
                     }
                   >
-                    <RNGestureHandlerButton
-                      activeOpacity={1}
+                    <View
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": undefined,
+                          "disabled": undefined,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
+                      }
+                      accessibilityValue={
+                        {
+                          "max": undefined,
+                          "min": undefined,
+                          "now": undefined,
+                          "text": undefined,
+                        }
+                      }
+                      accessible={true}
+                      activeUnderlayOpacity={1}
+                      animationDuration={0}
                       collapsable={false}
-                      delayLongPress={600}
-                      enabled={true}
-                      handlerTag={-1}
-                      handlerType="NativeViewGestureHandler"
-                      innerRef={null}
-                      onActiveStateChange={[Function]}
-                      onGestureHandlerEvent={[Function]}
-                      onGestureHandlerStateChange={[Function]}
-                      onPress={[Function]}
-                      rippleColor="#16181a"
+                      focusable={true}
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[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,
-                          },
-                          {
-                            "cursor": undefined,
-                          },
+                          [
+                            undefined,
+                            {
+                              "margin": undefined,
+                              "marginBottom": undefined,
+                              "marginEnd": undefined,
+                              "marginHorizontal": undefined,
+                              "marginLeft": undefined,
+                              "marginRight": undefined,
+                              "marginStart": undefined,
+                              "marginTop": undefined,
+                              "marginVertical": undefined,
+                            },
+                            {
+                              "backgroundColor": undefined,
+                              "borderRadius": undefined,
+                            },
+                          ],
+                          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
                         accessibilityLabel="Follow thread"
                         style={{}}
@@ -6383,14 +6587,14 @@ exports[`Story Snapshots: Themes should match snapshot 1`] = `
                           
                         </Text>
                       </View>
-                    </RNGestureHandlerButton>
+                    </View>
                   </ExternalKeyboardView>
                 </View>
               </View>
             </View>
           </View>
         </View>
-      </RNGestureHandlerButton>
+      </View>
     </ExternalKeyboardView>
     <View
       style={
diff --git a/app/views/ThreadMessagesView/index.tsx b/app/views/ThreadMessagesView/index.tsx
index 978fc3e1941..4449a5b1338 100644
--- a/app/views/ThreadMessagesView/index.tsx
+++ b/app/views/ThreadMessagesView/index.tsx
@@ -5,12 +5,14 @@ import { sanitizedRaw } from '@nozbe/watermelondb/RawRecord';
 import { type NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { type Observable, type Subscription } from 'rxjs';
 import { type EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
-import { Component } from 'react';
+import { type SearchBarCommands } from 'react-native-screens';
+import { Component, createRef } from 'react';
 
 import { showActionSheetRef } from '~/containers/ActionSheet';
 import { CustomIcon } from '~/containers/CustomIcon';
 import ActivityIndicator from '~/containers/ActivityIndicator';
 import I18n from '~/i18n';
+import { stackedSearchBarOptions } from '~/lib/methods/helpers/navigation';
 import database from '~/lib/database';
 import { sanitizeLikeString } from '~/lib/database/utils';
 import buildMessage from '~/lib/methods/helpers/buildMessage';
@@ -38,12 +40,13 @@ import {
 	type TSubscriptionModel,
 	type TThreadModel
 } from '~/definitions';
-import { getUidDirectMessage, debounce, isIOS } from '~/lib/methods/helpers';
+import { getUidDirectMessage, debounce, hasNativeHeaderBar, isIOS } from '~/lib/methods/helpers';
 import { getSyncThreadsList, getThreadsList } from '~/lib/services/restApi';
 import { toggleFollowThread as toggleFollowThreadService } from '~/lib/methods/toggleFollowThread';
 import UserPreferences from '~/lib/methods/userPreferences';
 import Navigation from '~/lib/navigation/appNavigation';
 import { withMasterDetail } from '~/lib/hooks/useMasterDetail';
+import { headerIcon } from '~/lib/methods/helpers/navigation/headerIcon';
 
 const API_FETCH_COUNT = 50;
 const THREADS_FILTER = 'threadsFilter';
@@ -80,6 +83,8 @@ class ThreadMessagesView extends Component<IThreadMessagesViewProps, IThreadMess
 
 	private messagesObservable?: Observable<TThreadModel[]>;
 
+	private searchBarRef = createRef<SearchBarCommands>();
+
 	constructor(props: IThreadMessagesViewProps) {
 		super(props);
 		this.mounted = false;
@@ -119,6 +124,39 @@ class ThreadMessagesView extends Component<IThreadMessagesViewProps, IThreadMess
 		const { isSearching, currentFilter } = this.state;
 		const { navigation, isMasterDetail, theme } = this.props;
 
+		if (hasNativeHeaderBar) {
+			const options: NativeStackNavigationOptions = {
+				headerTransparent: true,
+				headerTitle: I18n.t('Threads'),
+				headerSearchBarOptions: stackedSearchBarOptions({
+					ref: this.searchBarRef,
+					onFocus: this.onSearchPress,
+					onChangeText: this.onSearchChangeText,
+					onCancel: this.onCancelSearchPress
+				}),
+				unstable_headerRightItems: () => [
+					{
+						type: 'menu',
+						label: I18n.t('Filter'),
+						accessibilityLabel: I18n.t('Filter'),
+						icon: headerIcon('filter'),
+						menu: {
+							items: [Filter.All, Filter.Following, Filter.Unread].map(filter => ({
+								type: 'action' as const,
+								label: I18n.t(filter),
+								state: currentFilter === filter ? ('on' as const) : ('off' as const),
+								onPress: () => this.onFilterSelected(filter)
+							}))
+						}
+					}
+				]
+			};
+			if (isMasterDetail) {
+				options.headerLeft = () => <HeaderButton.CloseModal navigation={navigation} />;
+			}
+			return options;
+		}
+
 		if (isSearching) {
 			return {
 				headerLeft: () => (
@@ -350,6 +388,8 @@ class ThreadMessagesView extends Component<IThreadMessagesViewProps, IThreadMess
 					end: result.count < API_FETCH_COUNT,
 					offset: offset + API_FETCH_COUNT
 				});
+			} else {
+				this.setState({ loading: false, end: true });
 			}
 		} catch (e) {
 			log(e);
@@ -380,14 +420,21 @@ class ThreadMessagesView extends Component<IThreadMessagesViewProps, IThreadMess
 	};
 
 	onSearchPress = () => {
-		this.setState({ isSearching: true }, () => this.setHeader());
+		this.setState({ isSearching: true }, () => {
+			if (!hasNativeHeaderBar) {
+				this.setHeader();
+			}
+		});
 	};
 
 	onCancelSearchPress = () => {
 		this.setState({ isSearching: false, searchText: '' }, () => {
 			const { subscription } = this.state;
-			this.setHeader();
+			if (!hasNativeHeaderBar) {
+				this.setHeader();
+			}
 			this.subscribeMessages(subscription);
+			this.searchBarRef.current?.clearText();
 		});
 	};
 
@@ -504,13 +551,14 @@ class ThreadMessagesView extends Component<IThreadMessagesViewProps, IThreadMess
 				extraData={this.state}
 				renderItem={this.renderItem}
 				style={[styles.list, { backgroundColor: themes[theme].surfaceRoom }]}
-				contentContainerStyle={[styles.contentContainer, { paddingBottom: insets.bottom }]}
+				contentContainerStyle={[styles.contentContainer, { paddingBottom: hasNativeHeaderBar ? 0 : insets.bottom }]}
 				onEndReached={this.load}
 				onEndReachedThreshold={0.5}
 				maxToRenderPerBatch={5}
 				windowSize={10}
 				initialNumToRender={7}
 				removeClippedSubviews={isIOS}
+				contentInsetAdjustmentBehavior={hasNativeHeaderBar ? 'automatic' : undefined}
 				ItemSeparatorComponent={List.Separator}
 				ListFooterComponent={loading ? <ActivityIndicator /> : null}
 				scrollIndicatorInsets={{ right: 1 }} // https://github.com/facebook/react-native/issues/26610#issuecomment-539843444
diff --git a/app/views/ThreadMessagesView/styles.ts b/app/views/ThreadMessagesView/styles.ts
index 4103e720c17..1de6a01a1ff 100644
--- a/app/views/ThreadMessagesView/styles.ts
+++ b/app/views/ThreadMessagesView/styles.ts
@@ -16,6 +16,7 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular
 	},
 	contentContainer: {
+		flexGrow: 1,
 		paddingBottom: 30
 	}
 });
diff --git a/app/views/UserNotificationPreferencesView/ListPicker.tsx b/app/views/UserNotificationPreferencesView/ListPicker.tsx
index c1b8f0ef464..c4724d98603 100644
--- a/app/views/UserNotificationPreferencesView/ListPicker.tsx
+++ b/app/views/UserNotificationPreferencesView/ListPicker.tsx
@@ -1,7 +1,11 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { Fragment, type ReactElement } from 'react';
 
 import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
+import { useNativeListMode } from '~/containers/List/native/context';
+import NativeListPicker from '~/containers/List/native/Picker';
 import I18n from '~/i18n';
 import { useTheme } from '~/theme';
 import sharedStyles from '../Styles';
@@ -35,6 +39,7 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const nativeListMode = useNativeListMode();
 	const option = value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0];
 
 	const getOptions = (): ReactElement => (
@@ -60,15 +65,31 @@ const ListPicker = ({
 
 	const label = option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label;
 
+	if (nativeListMode === 'native') {
+		return (
+			<NativeListPicker
+				title={I18n.t(title)}
+				testID={testID}
+				options={OPTIONS[preference].map(i => ({
+					label: I18n.t(i.label, { defaultValue: i.label }),
+					value: i.value.toString(),
+					testID: `notification-preferences-${preference}-${i.value}`
+				}))}
+				selection={option?.value.toString() ?? ''}
+				onSelectionChange={selected => onChangeValue({ [preference]: selected })}
+			/>
+		);
+	}
+
 	return (
 		<List.Item
 			title={title}
 			testID={testID}
 			onPress={() => showActionSheet({ children: getOptions() })}
-			right={() => <Text style={[styles.pickerText, { color: colors.fontInfo }]}>{label}</Text>}
+			right={() => <PlainText style={[styles.pickerText, { color: colors.fontInfo }]}>{label}</PlainText>}
 			additionalAccessibilityLabel={label}
 		/>
 	);
 };
 
-export default ListPicker;
+export default asNativeListRow(ListPicker);
diff --git a/app/views/UserPreferencesView/ListPicker.tsx b/app/views/UserPreferencesView/ListPicker.tsx
index b137a5238fc..9c8b902eca8 100644
--- a/app/views/UserPreferencesView/ListPicker.tsx
+++ b/app/views/UserPreferencesView/ListPicker.tsx
@@ -1,9 +1,13 @@
 import { useState } from 'react';
-import { StyleSheet, Text } from 'react-native';
+import { StyleSheet } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { type TActionSheetOptionsItem, useActionSheet } from '~/containers/ActionSheet';
 import { CustomIcon } from '~/containers/CustomIcon';
 import * as List from '~/containers/List';
+import { asNativeListRow } from '~/containers/List/native/rowMarkers';
+import { useNativeListMode } from '~/containers/List/native/context';
+import NativeListPicker from '~/containers/List/native/Picker';
 import I18n from '~/i18n';
 import { useTheme } from '~/theme';
 import sharedStyles from '../Styles';
@@ -49,32 +53,50 @@ const ListPicker = ({
 } & IBaseParams) => {
 	const { showActionSheet, hideActionSheet } = useActionSheet();
 	const { colors } = useTheme();
+	const nativeListMode = useNativeListMode();
 	const [option, setOption] = useState(
 		value ? OPTIONS[preference].find(option => option.value === value) : OPTIONS[preference][0]
 	);
 
+	const selectOption = (selectedValue: string) => {
+		const previous = option;
+		onChangeValue({ [preference]: selectedValue }, () => setOption(previous));
+		setOption(OPTIONS[preference].find(i => i.value === selectedValue));
+	};
+
 	const getOptions = (): TActionSheetOptionsItem[] =>
 		OPTIONS[preference].map(i => ({
 			title: I18n.t(i.label, { defaultValue: i.label }),
 			onPress: () => {
 				hideActionSheet();
-				onChangeValue({ [preference]: i.value.toString() }, () => setOption(option));
-				setOption(i);
+				selectOption(i.value);
 			},
 			right: option?.value === i.value ? () => <CustomIcon name={'check'} size={20} color={colors.fontHint} /> : undefined
 		}));
 
 	const label = option?.label ? I18n.t(option?.label, { defaultValue: option?.label }) : option?.label;
 
+	if (nativeListMode === 'native') {
+		return (
+			<NativeListPicker
+				title={I18n.t(title)}
+				testID={testID}
+				options={OPTIONS[preference].map(i => ({ label: I18n.t(i.label, { defaultValue: i.label }), value: i.value }))}
+				selection={option?.value ?? ''}
+				onSelectionChange={selectOption}
+			/>
+		);
+	}
+
 	return (
 		<List.Item
 			title={title}
 			testID={testID}
 			onPress={() => showActionSheet({ options: getOptions() })}
-			right={() => <Text style={[styles.title, { color: colors.fontHint }]}>{label}</Text>}
+			right={() => <PlainText style={[styles.title, { color: colors.fontHint }]}>{label}</PlainText>}
 			additionalAccessibilityLabel={label}
 		/>
 	);
 };
 
-export default ListPicker;
+export default asNativeListRow(ListPicker);
diff --git a/app/views/UserPreferencesView/UserPreferencesView.test.tsx b/app/views/UserPreferencesView/UserPreferencesView.test.tsx
index 1791e4b14f2..6edf175f4a6 100644
--- a/app/views/UserPreferencesView/UserPreferencesView.test.tsx
+++ b/app/views/UserPreferencesView/UserPreferencesView.test.tsx
@@ -65,7 +65,7 @@ describe('UserPreferencesView', () => {
 	it('keeps enableMobileRinging enabled while enabling convertAsciiEmoji', async () => {
 		const { getByTestId } = renderWithPreferences({ convertAsciiEmoji: false, enableMobileRinging: true });
 
-		fireEvent(getByTestId('preferences-view-convert-ascii-to-emoji'), 'valueChange', true);
+		fireEvent(getByTestId('preferences-view-convert-ascii-to-emoji'), 'isOnChange', { nativeEvent: { isOn: true } });
 
 		const dispatchedUser = dispatch.mock.calls[0][0].user;
 		expect(dispatchedUser.settings.preferences).toEqual({
@@ -78,7 +78,7 @@ describe('UserPreferencesView', () => {
 	it('keeps enableMobileRinging disabled while disabling convertAsciiEmoji', async () => {
 		const { getByTestId } = renderWithPreferences({ convertAsciiEmoji: true, enableMobileRinging: false });
 
-		fireEvent(getByTestId('preferences-view-convert-ascii-to-emoji'), 'valueChange', false);
+		fireEvent(getByTestId('preferences-view-convert-ascii-to-emoji'), 'isOnChange', { nativeEvent: { isOn: false } });
 
 		const dispatchedUser = dispatch.mock.calls[0][0].user;
 		expect(dispatchedUser.settings.preferences).toEqual({
@@ -91,7 +91,7 @@ describe('UserPreferencesView', () => {
 	it('keeps convertAsciiEmoji enabled while enabling enableMobileRinging', async () => {
 		const { getByTestId } = renderWithPreferences({ convertAsciiEmoji: true, enableMobileRinging: false });
 
-		fireEvent(getByTestId('preferences-view-enable-mobile-ringing'), 'valueChange', true);
+		fireEvent(getByTestId('preferences-view-enable-mobile-ringing'), 'isOnChange', { nativeEvent: { isOn: true } });
 
 		const dispatchedUser = dispatch.mock.calls[0][0].user;
 		expect(dispatchedUser.settings.preferences).toEqual({
@@ -104,7 +104,7 @@ describe('UserPreferencesView', () => {
 	it('keeps convertAsciiEmoji disabled while disabling enableMobileRinging', async () => {
 		const { getByTestId } = renderWithPreferences({ convertAsciiEmoji: false, enableMobileRinging: true });
 
-		fireEvent(getByTestId('preferences-view-enable-mobile-ringing'), 'valueChange', false);
+		fireEvent(getByTestId('preferences-view-enable-mobile-ringing'), 'isOnChange', { nativeEvent: { isOn: false } });
 
 		const dispatchedUser = dispatch.mock.calls[0][0].user;
 		expect(dispatchedUser.settings.preferences).toEqual({
diff --git a/app/views/UserPreferencesView/__tests__/ListPicker.test.tsx b/app/views/UserPreferencesView/__tests__/ListPicker.test.tsx
new file mode 100644
index 00000000000..c863ac76d48
--- /dev/null
+++ b/app/views/UserPreferencesView/__tests__/ListPicker.test.tsx
@@ -0,0 +1,55 @@
+import { act, render } from '@testing-library/react-native';
+
+import { NativeListContext } from '~/containers/List/native/context';
+import { type INativeListPicker } from '~/containers/List/native/types';
+import ListPicker from '../ListPicker';
+
+const mockPicker = jest.fn();
+jest.mock('~/containers/List/native/Picker', () => ({
+	__esModule: true,
+	default: (props: INativeListPicker) => {
+		mockPicker(props);
+		return null;
+	}
+}));
+
+const latestPicker = (): INativeListPicker => mockPicker.mock.calls[mockPicker.mock.calls.length - 1][0];
+
+const renderNative = (onChangeValue: jest.Mock) =>
+	render(
+		<NativeListContext.Provider value={{ mode: 'native', renderRow: row => row }}>
+			<ListPicker
+				preference='alsoSendThreadToChannel'
+				value='always'
+				title='Also_send_thread_message_to_channel_behavior'
+				testID='preferences-view-enable-message-parser'
+				onChangeValue={onChangeValue}
+			/>
+		</NativeListContext.Provider>
+	);
+
+describe('UserPreferencesView ListPicker in a native list', () => {
+	beforeEach(() => mockPicker.mockClear());
+
+	it('selects the current value and saves a new selection', () => {
+		const onChangeValue = jest.fn();
+		renderNative(onChangeValue);
+		expect(latestPicker().selection).toBe('always');
+		expect(latestPicker().testID).toBe('preferences-view-enable-message-parser');
+
+		act(() => latestPicker().onSelectionChange('never'));
+
+		expect(onChangeValue).toHaveBeenCalledWith({ alsoSendThreadToChannel: 'never' }, expect.any(Function));
+		expect(latestPicker().selection).toBe('never');
+	});
+
+	it('restores the previous value when saving fails', () => {
+		const onChangeValue = jest.fn();
+		renderNative(onChangeValue);
+
+		act(() => latestPicker().onSelectionChange('never'));
+		act(() => onChangeValue.mock.calls[0][1]());
+
+		expect(latestPicker().selection).toBe('always');
+	});
+});
diff --git a/app/views/WorkspaceView/RegisterDisabledComponent.tsx b/app/views/WorkspaceView/RegisterDisabledComponent.tsx
index 2c98fc7f353..346d94f2709 100644
--- a/app/views/WorkspaceView/RegisterDisabledComponent.tsx
+++ b/app/views/WorkspaceView/RegisterDisabledComponent.tsx
@@ -1,4 +1,4 @@
-import { Text } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 
 import { useAppSelector } from '~/lib/hooks/useAppSelector';
 import { useTheme } from '~/theme';
@@ -16,7 +16,7 @@ const RegisterDisabledComponent = () => {
 		return null;
 	}
 
-	return <Text style={[styles.registrationText, { color: colors.fontSecondaryInfo }]}>{registrationText}</Text>;
+	return <PlainText style={[styles.registrationText, { color: colors.fontSecondaryInfo }]}>{registrationText}</PlainText>;
 };
 
 export default RegisterDisabledComponent;
diff --git a/app/views/WorkspaceView/index.tsx b/app/views/WorkspaceView/index.tsx
index 18d87c0a074..bd60b52137e 100644
--- a/app/views/WorkspaceView/index.tsx
+++ b/app/views/WorkspaceView/index.tsx
@@ -1,5 +1,6 @@
 import { useLayoutEffect } from 'react';
-import { Text, View } from 'react-native';
+import { View } from 'react-native';
+import { PlainText } from '~/containers/PlainText';
 import { useNavigation } from '@react-navigation/native';
 import { type NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { type CompositeNavigationProp } from '@react-navigation/core';
@@ -80,8 +81,8 @@ const WorkspaceView = () => {
 			<FormContainerInner>
 				<View style={styles.alignItemsCenter}>
 					<ServerAvatar url={server} image={Assets_favicon_512?.url ?? Assets_favicon_512?.defaultUrl} />
-					<Text style={[styles.serverName, { color: colors.fontTitlesLabels }]}>{Site_Name}</Text>
-					<Text style={[styles.serverUrl, { color: colors.fontSecondaryInfo }]}>{Site_Url}</Text>
+					<PlainText style={[styles.serverName, { color: colors.fontTitlesLabels }]}>{Site_Name}</PlainText>
+					<PlainText style={[styles.serverUrl, { color: colors.fontSecondaryInfo }]}>{Site_Url}</PlainText>
 				</View>
 				{showLoginButton ? <Button title={I18n.t('Login')} type='primary' onPress={login} testID='workspace-view-login' /> : null}
 				{showRegistrationButton ? (
diff --git a/app/views/__snapshots__/ChangePasscodeView.test.tsx.snap b/app/views/__snapshots__/ChangePasscodeView.test.tsx.snap
index 6b9b5972d7f..7bd13cf5803 100644
--- a/app/views/__snapshots__/ChangePasscodeView.test.tsx.snap
+++ b/app/views/__snapshots__/ChangePasscodeView.test.tsx.snap
@@ -192,6 +192,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Choose your new passcode"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -420,61 +423,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-1"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -484,8 +489,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-1"
                     >
                       <Text
+                        accessibilityLabel="1"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -507,7 +516,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         1
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -545,61 +554,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-2"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -609,8 +620,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-2"
                     >
                       <Text
+                        accessibilityLabel="2"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -632,7 +647,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         2
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -670,61 +685,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-3"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -734,8 +751,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-3"
                     >
                       <Text
+                        accessibilityLabel="3"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -757,7 +778,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         3
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -807,61 +828,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-4"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -871,8 +894,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-4"
                     >
                       <Text
+                        accessibilityLabel="4"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -894,7 +921,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         4
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -932,61 +959,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-5"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -996,8 +1025,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-5"
                     >
                       <Text
+                        accessibilityLabel="5"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1019,7 +1052,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         5
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1057,61 +1090,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-6"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1121,8 +1156,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-6"
                     >
                       <Text
+                        accessibilityLabel="6"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1144,7 +1183,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         6
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -1194,61 +1233,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-7"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1258,8 +1299,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-7"
                     >
                       <Text
+                        accessibilityLabel="7"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1281,7 +1326,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         7
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1319,61 +1364,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-8"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1383,8 +1430,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-8"
                     >
                       <Text
+                        accessibilityLabel="8"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1406,7 +1457,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         8
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1444,61 +1495,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-9"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1508,8 +1561,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-9"
                     >
                       <Text
+                        accessibilityLabel="9"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1531,7 +1588,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         9
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -1594,61 +1651,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-0"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1658,8 +1717,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-0"
                     >
                       <Text
+                        accessibilityLabel="0"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1681,7 +1744,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         0
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1719,61 +1782,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-backspace"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1783,6 +1848,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-backspace"
                     >
                       <Text
                         allowFontScaling={false}
@@ -1811,7 +1877,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -1839,60 +1905,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
-            activeOpacity={1}
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#E4E7EA"
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[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,
-                },
-                {
-                  "cursor": undefined,
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": undefined,
+                    "borderRadius": undefined,
+                  },
+                ],
+                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={
                 {
@@ -1929,7 +1998,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </ExternalKeyboardView>
       </View>
     </View>
@@ -2129,6 +2198,9 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Choose your new passcode"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2169,6 +2241,9 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Passcode required by admin"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2397,61 +2472,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-1"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2461,8 +2538,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-1"
                     >
                       <Text
+                        accessibilityLabel="1"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2484,7 +2565,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         1
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -2522,61 +2603,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-2"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2586,8 +2669,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-2"
                     >
                       <Text
+                        accessibilityLabel="2"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2609,7 +2696,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         2
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -2647,61 +2734,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-3"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2711,8 +2800,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-3"
                     >
                       <Text
+                        accessibilityLabel="3"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2734,7 +2827,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         3
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -2784,61 +2877,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-4"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2848,8 +2943,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-4"
                     >
                       <Text
+                        accessibilityLabel="4"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2871,7 +2970,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         4
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -2909,61 +3008,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-5"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2973,8 +3074,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-5"
                     >
                       <Text
+                        accessibilityLabel="5"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2996,7 +3101,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         5
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3034,61 +3139,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-6"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3098,8 +3205,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-6"
                     >
                       <Text
+                        accessibilityLabel="6"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3121,7 +3232,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         6
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -3171,61 +3282,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-7"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3235,8 +3348,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-7"
                     >
                       <Text
+                        accessibilityLabel="7"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3258,7 +3375,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         7
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3296,61 +3413,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-8"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3360,8 +3479,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-8"
                     >
                       <Text
+                        accessibilityLabel="8"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3383,7 +3506,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         8
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3421,61 +3544,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-9"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3485,8 +3610,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-9"
                     >
                       <Text
+                        accessibilityLabel="9"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3508,7 +3637,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         9
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -3571,61 +3700,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-0"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3635,8 +3766,12 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-0"
                     >
                       <Text
+                        accessibilityLabel="0"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3658,7 +3793,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         0
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3696,61 +3831,63 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-backspace"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3760,6 +3897,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-backspace"
                     >
                       <Text
                         allowFontScaling={false}
@@ -3788,7 +3926,7 @@ exports[`Story Snapshots: Forced should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
diff --git a/app/views/__snapshots__/ScreenLockedView.test.tsx.snap b/app/views/__snapshots__/ScreenLockedView.test.tsx.snap
index 8b9d71ede32..c90dc63318e 100644
--- a/app/views/__snapshots__/ScreenLockedView.test.tsx.snap
+++ b/app/views/__snapshots__/ScreenLockedView.test.tsx.snap
@@ -193,6 +193,9 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Enter your passcode"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -421,61 +424,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-1"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -485,8 +490,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-1"
                     >
                       <Text
+                        accessibilityLabel="1"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -508,7 +517,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         1
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -546,61 +555,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-2"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -610,8 +621,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-2"
                     >
                       <Text
+                        accessibilityLabel="2"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -633,7 +648,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         2
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -671,61 +686,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-3"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -735,8 +752,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-3"
                     >
                       <Text
+                        accessibilityLabel="3"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -758,7 +779,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         3
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -808,61 +829,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-4"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -872,8 +895,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-4"
                     >
                       <Text
+                        accessibilityLabel="4"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -895,7 +922,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         4
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -933,61 +960,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-5"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -997,8 +1026,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-5"
                     >
                       <Text
+                        accessibilityLabel="5"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1020,7 +1053,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         5
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1058,61 +1091,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-6"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1122,8 +1157,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-6"
                     >
                       <Text
+                        accessibilityLabel="6"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1145,7 +1184,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         6
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -1195,61 +1234,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-7"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1259,8 +1300,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-7"
                     >
                       <Text
+                        accessibilityLabel="7"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1282,7 +1327,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         7
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1320,61 +1365,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-8"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1384,8 +1431,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-8"
                     >
                       <Text
+                        accessibilityLabel="8"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1407,7 +1458,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         8
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1445,61 +1496,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-9"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1509,8 +1562,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-9"
                     >
                       <Text
+                        accessibilityLabel="9"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1532,7 +1589,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         9
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -1595,61 +1652,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-0"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1659,8 +1718,12 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-0"
                     >
                       <Text
+                        accessibilityLabel="0"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -1682,7 +1745,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         0
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -1720,61 +1783,63 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-backspace"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -1784,6 +1849,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-backspace"
                     >
                       <Text
                         allowFontScaling={false}
@@ -1812,7 +1878,7 @@ exports[`Story Snapshots: Default should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -2017,6 +2083,9 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Enter your passcode"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -2245,61 +2314,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-1"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2309,8 +2380,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-1"
                     >
                       <Text
+                        accessibilityLabel="1"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2332,7 +2407,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         1
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -2370,61 +2445,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-2"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2434,8 +2511,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-2"
                     >
                       <Text
+                        accessibilityLabel="2"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2457,7 +2538,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         2
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -2495,61 +2576,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-3"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2559,8 +2642,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-3"
                     >
                       <Text
+                        accessibilityLabel="3"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2582,7 +2669,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         3
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -2632,61 +2719,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-4"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2696,8 +2785,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-4"
                     >
                       <Text
+                        accessibilityLabel="4"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2719,7 +2812,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         4
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -2757,61 +2850,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-5"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2821,8 +2916,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-5"
                     >
                       <Text
+                        accessibilityLabel="5"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2844,7 +2943,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         5
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -2882,61 +2981,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-6"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -2946,8 +3047,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-6"
                     >
                       <Text
+                        accessibilityLabel="6"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -2969,7 +3074,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         6
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -3019,61 +3124,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-7"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3083,8 +3190,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-7"
                     >
                       <Text
+                        accessibilityLabel="7"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3106,7 +3217,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         7
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3144,61 +3255,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-8"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3208,8 +3321,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-8"
                     >
                       <Text
+                        accessibilityLabel="8"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3231,7 +3348,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         8
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3269,61 +3386,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-9"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3333,8 +3452,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-9"
                     >
                       <Text
+                        accessibilityLabel="9"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3356,7 +3479,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         9
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -3406,61 +3529,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="biometry-button"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3470,6 +3595,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="biometry-button"
                     >
                       <Text
                         allowFontScaling={false}
@@ -3498,7 +3624,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3536,61 +3662,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-0"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3600,8 +3728,12 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-0"
                     >
                       <Text
+                        accessibilityLabel="0"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -3623,7 +3755,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         0
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -3661,61 +3793,63 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-backspace"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -3725,6 +3859,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-backspace"
                     >
                       <Text
                         allowFontScaling={false}
@@ -3753,7 +3888,7 @@ exports[`Story Snapshots: WithBiometry should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -3958,6 +4093,9 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Enter your passcode"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -4186,61 +4324,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-1"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -4250,8 +4390,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-1"
                     >
                       <Text
+                        accessibilityLabel="1"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4273,7 +4417,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         1
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -4311,61 +4455,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-2"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -4375,8 +4521,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-2"
                     >
                       <Text
+                        accessibilityLabel="2"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4398,7 +4548,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         2
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -4436,61 +4586,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-3"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -4500,8 +4652,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-3"
                     >
                       <Text
+                        accessibilityLabel="3"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4523,7 +4679,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         3
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -4573,61 +4729,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-4"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -4637,8 +4795,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-4"
                     >
                       <Text
+                        accessibilityLabel="4"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4660,7 +4822,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         4
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -4698,61 +4860,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-5"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -4762,8 +4926,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-5"
                     >
                       <Text
+                        accessibilityLabel="5"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4785,7 +4953,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         5
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -4823,61 +4991,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-6"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -4887,8 +5057,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-6"
                     >
                       <Text
+                        accessibilityLabel="6"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -4910,7 +5084,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         6
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -4960,61 +5134,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-7"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -5024,8 +5200,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-7"
                     >
                       <Text
+                        accessibilityLabel="7"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -5047,7 +5227,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         7
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -5085,61 +5265,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-8"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -5149,8 +5331,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-8"
                     >
                       <Text
+                        accessibilityLabel="8"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -5172,7 +5358,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         8
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -5210,61 +5396,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-9"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -5274,8 +5462,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-9"
                     >
                       <Text
+                        accessibilityLabel="9"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -5297,7 +5489,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         9
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -5347,61 +5539,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="biometry-button"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -5411,6 +5605,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="biometry-button"
                     >
                       <Text
                         allowFontScaling={false}
@@ -5439,7 +5634,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -5477,61 +5672,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-0"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -5541,8 +5738,12 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-0"
                     >
                       <Text
+                        accessibilityLabel="0"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -5564,7 +5765,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         0
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -5602,61 +5803,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-backspace"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -5666,6 +5869,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-backspace"
                     >
                       <Text
                         allowFontScaling={false}
@@ -5694,7 +5898,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -5722,60 +5926,63 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
-            activeOpacity={1}
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#E4E7EA"
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[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,
-                },
-                {
-                  "cursor": undefined,
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": undefined,
+                    "borderRadius": undefined,
+                  },
+                ],
+                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={
                 {
@@ -5812,7 +6019,7 @@ exports[`Story Snapshots: WithBiometryAndClose should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </ExternalKeyboardView>
       </View>
     </View>
@@ -6013,6 +6220,9 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                 }
               >
                 <Text
+                  accessibilityLabel="Enter your passcode"
+                  accessibilityRole="text"
+                  accessible={true}
                   style={
                     [
                       {
@@ -6241,61 +6451,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-1"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -6305,8 +6517,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-1"
                     >
                       <Text
+                        accessibilityLabel="1"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -6328,7 +6544,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         1
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -6366,61 +6582,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-2"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -6430,8 +6648,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-2"
                     >
                       <Text
+                        accessibilityLabel="2"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -6453,7 +6675,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         2
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -6491,61 +6713,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-3"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -6555,8 +6779,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-3"
                     >
                       <Text
+                        accessibilityLabel="3"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -6578,7 +6806,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         3
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -6628,61 +6856,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-4"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -6692,8 +6922,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-4"
                     >
                       <Text
+                        accessibilityLabel="4"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -6715,7 +6949,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         4
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -6753,61 +6987,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-5"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -6817,8 +7053,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-5"
                     >
                       <Text
+                        accessibilityLabel="5"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -6840,7 +7080,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         5
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -6878,61 +7118,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-6"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -6942,8 +7184,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-6"
                     >
                       <Text
+                        accessibilityLabel="6"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -6965,7 +7211,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         6
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -7015,61 +7261,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-7"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -7079,8 +7327,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-7"
                     >
                       <Text
+                        accessibilityLabel="7"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -7102,7 +7354,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         7
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -7140,61 +7392,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-8"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -7204,8 +7458,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-8"
                     >
                       <Text
+                        accessibilityLabel="8"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -7227,7 +7485,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         8
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -7265,61 +7523,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-9"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -7329,8 +7589,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-9"
                     >
                       <Text
+                        accessibilityLabel="9"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -7352,7 +7616,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         9
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -7415,61 +7679,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-0"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -7479,8 +7745,12 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-0"
                     >
                       <Text
+                        accessibilityLabel="0"
+                        accessibilityRole="text"
+                        accessible={true}
                         style={
                           [
                             {
@@ -7502,7 +7772,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         0
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
               <View
@@ -7540,61 +7810,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                     ]
                   }
                 >
-                  <RNGestureHandlerButton
-                    activeOpacity={1}
+                  <View
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": undefined,
+                        "disabled": undefined,
+                        "expanded": undefined,
+                        "selected": undefined,
+                      }
+                    }
+                    accessibilityValue={
+                      {
+                        "max": undefined,
+                        "min": undefined,
+                        "now": undefined,
+                        "text": undefined,
+                      }
+                    }
+                    accessible={true}
+                    activeUnderlayOpacity={1}
+                    animationDuration={0}
                     collapsable={false}
-                    delayLongPress={600}
-                    enabled={true}
-                    handlerTag={-1}
-                    handlerType="NativeViewGestureHandler"
-                    innerRef={null}
-                    onActiveStateChange={[Function]}
-                    onGestureHandlerEvent={[Function]}
-                    onGestureHandlerStateChange={[Function]}
-                    onPress={[Function]}
-                    rippleColor="#9EA2A8"
+                    focusable={true}
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onResponderGrant={[Function]}
+                    onResponderMove={[Function]}
+                    onResponderRelease={[Function]}
+                    onResponderTerminate={[Function]}
+                    onResponderTerminationRequest={[Function]}
+                    onStartShouldSetResponder={[Function]}
                     style={
                       [
-                        {
-                          "backgroundColor": "transparent",
-                          "borderRadius": 4,
-                          "margin": undefined,
-                          "marginBottom": undefined,
-                          "marginEnd": undefined,
-                          "marginHorizontal": undefined,
-                          "marginLeft": undefined,
-                          "marginRight": undefined,
-                          "marginStart": undefined,
-                          "marginTop": undefined,
-                          "marginVertical": undefined,
-                        },
-                        {
-                          "cursor": undefined,
-                        },
+                        [
+                          undefined,
+                          {
+                            "margin": undefined,
+                            "marginBottom": undefined,
+                            "marginEnd": undefined,
+                            "marginHorizontal": undefined,
+                            "marginLeft": undefined,
+                            "marginRight": undefined,
+                            "marginStart": undefined,
+                            "marginTop": undefined,
+                            "marginVertical": undefined,
+                          },
+                          {
+                            "backgroundColor": "transparent",
+                            "borderRadius": 4,
+                          },
+                        ],
+                        undefined,
                       ]
                     }
-                    testID="passcode-button-backspace"
                     underlayColor="#E4E7EA"
                   >
-                    <View
-                      collapsable={false}
-                      style={
-                        {
-                          "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={
                         {
@@ -7604,6 +7876,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                           "width": 78,
                         }
                       }
+                      testID="passcode-button-backspace"
                     >
                       <Text
                         allowFontScaling={false}
@@ -7632,7 +7905,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                         
                       </Text>
                     </View>
-                  </RNGestureHandlerButton>
+                  </View>
                 </ExternalKeyboardView>
               </View>
             </View>
@@ -7660,60 +7933,63 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
             ]
           }
         >
-          <RNGestureHandlerButton
-            activeOpacity={1}
+          <View
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessibilityValue={
+              {
+                "max": undefined,
+                "min": undefined,
+                "now": undefined,
+                "text": undefined,
+              }
+            }
+            accessible={true}
+            activeUnderlayOpacity={1}
+            animationDuration={0}
             collapsable={false}
-            delayLongPress={600}
-            enabled={true}
-            handlerTag={-1}
-            handlerType="NativeViewGestureHandler"
-            innerRef={null}
-            onActiveStateChange={[Function]}
-            onGestureHandlerEvent={[Function]}
-            onGestureHandlerStateChange={[Function]}
-            onPress={[Function]}
-            rippleColor="#E4E7EA"
+            focusable={true}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[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,
-                },
-                {
-                  "cursor": undefined,
-                },
+                [
+                  undefined,
+                  {
+                    "margin": undefined,
+                    "marginBottom": undefined,
+                    "marginEnd": undefined,
+                    "marginHorizontal": undefined,
+                    "marginLeft": undefined,
+                    "marginRight": undefined,
+                    "marginStart": undefined,
+                    "marginTop": undefined,
+                    "marginVertical": undefined,
+                  },
+                  {
+                    "backgroundColor": undefined,
+                    "borderRadius": undefined,
+                  },
+                ],
+                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={
                 {
@@ -7750,7 +8026,7 @@ exports[`Story Snapshots: WithCloseButton should match snapshot 1`] = `
                 
               </Text>
             </View>
-          </RNGestureHandlerButton>
+          </View>
         </ExternalKeyboardView>
       </View>
     </View>
diff --git a/ios/AppDelegate.swift b/ios/AppDelegate.swift
index 2699b2c7fba..56a299a8d4c 100644
--- a/ios/AppDelegate.swift
+++ b/ios/AppDelegate.swift
@@ -1,4 +1,4 @@
-import Expo
+public import Expo
 import React
 import ReactAppDependencyProvider
 import Firebase
@@ -8,10 +8,10 @@ import PushKit
 
 @UIApplicationMain
 public class AppDelegate: ExpoAppDelegate {
-  var window: UIWindow?
+  public var window: UIWindow?
 
   var reactNativeDelegate: ReactNativeDelegate?
-  var reactNativeFactory: RCTReactNativeFactory?
+  public var reactNativeFactory: RCTReactNativeFactory?
   var watchConnection: WatchConnection?
 
   public override func application(
@@ -38,28 +38,14 @@ public class AppDelegate: ExpoAppDelegate {
     }
       
     let delegate = ReactNativeDelegate()
-    let factory = RCTReactNativeFactory(delegate: delegate)
+    let factory = ExpoReactNativeFactory(delegate: delegate)
     delegate.dependencyProvider = RCTAppDependencyProvider()
 
     reactNativeDelegate = delegate
     reactNativeFactory = factory
-    bindReactNativeFactory(factory)
-
-#if os(iOS) || os(tvOS)
-    window = UIWindow(frame: UIScreen.main.bounds)
-    factory.startReactNative(
-      withModuleName: "RocketChatRN",
-      in: window,
-      launchOptions: launchOptions)
-#endif
 
     let result = super.application(application, didFinishLaunchingWithOptions: launchOptions)
 
-    // Initialize boot splash
-    if let rootViewController = window?.rootViewController {
-      RNBootSplash.initWithStoryboard("LaunchScreen", rootView: rootViewController.view)
-    }
-
     // Initialize SSL Pinning
      SSLPinning().migrate()
 
@@ -87,9 +73,30 @@ public class AppDelegate: ExpoAppDelegate {
     let result = RCTLinkingManager.application(application, continue: userActivity, restorationHandler: restorationHandler)
     return super.application(application, continue: userActivity, restorationHandler: restorationHandler) || result
   }
+
+#if os(iOS) || os(tvOS)
+  public func application(
+    _ application: UIApplication,
+    configurationForConnecting connectingSceneSession: UISceneSession,
+    options: UIScene.ConnectionOptions
+  ) -> UISceneConfiguration {
+    return UISceneConfiguration(name: "Default Configuration", sessionRole: connectingSceneSession.role)
+  }
+
+  public func application(
+    _ application: UIApplication,
+    didDiscardSceneSessions sceneSessions: Set<UISceneSession>
+  ) {}
+#endif
+}
+
+extension AppDelegate: ExpoReactNativeFactoryProvider {
+  public var reactNativeFactoryModuleName: String {
+    "RocketChatRN"
+  }
 }
 
-class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
+class ReactNativeDelegate: ExpoReactNativeFactoryDelegate {
   override func sourceURL(for bridge: RCTBridge) -> URL? {
     self.bundleURL()
   }
diff --git a/ios/AppIcon.icon/Assets/Union2.svg b/ios/AppIcon.icon/Assets/Union2.svg
new file mode 100644
index 00000000000..d026fb0b915
--- /dev/null
+++ b/ios/AppIcon.icon/Assets/Union2.svg
@@ -0,0 +1,3 @@
+<svg width="352" height="314" viewBox="0 0 352 314" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.86914 7.00414C24.1335 0.4361 60.2815 -7.17808 101.301 13.2717C112.357 19.3818 122.796 27.1142 131.725 35.7102C146.115 33.1196 160.94 31.8108 175.987 31.8108C221.024 31.8109 263.724 43.5735 296.222 64.926C313.042 75.9948 326.422 89.1178 335.968 103.942C346.603 120.466 351.987 138.234 352 157.258C352 175.785 346.616 193.566 335.98 210.077C326.435 224.914 313.055 238.024 296.235 249.093C263.751 270.446 221.05 282.195 176 282.195C160.953 282.195 146.128 280.887 131.737 278.296C122.809 286.892 112.37 294.625 101.314 300.735C60.2819 321.185 24.1335 313.557 5.86914 306.989C-0.131237 304.83 -1.96969 297.241 2.45508 292.675C15.3359 279.382 36.6468 253.097 31.4082 229.206C11.043 208.416 7.7153e-05 183.347 0 156.748C0 130.646 11.0429 105.577 31.4082 84.7873C36.6472 60.8964 15.336 34.6244 2.45508 21.3313C-1.9829 16.752 -0.131387 9.16297 5.86914 7.00414ZM174.148 66.8098C95.1297 66.8099 31.0664 108.129 31.0664 159.09C31.0664 181.293 43.2257 201.678 63.499 217.601C69.2106 235.748 65.8618 256.211 53.4668 278.977C52.8761 280.076 52.3246 281.174 51.7207 282.26C62.3563 281.383 73.11 278.466 83.9951 273.141C92.2146 268.535 100.093 262.687 106.815 256.224L119.185 244.33C136.11 248.87 154.676 251.383 174.148 251.383C253.18 251.383 317.244 210.064 317.244 159.09C317.244 108.129 253.167 66.8098 174.148 66.8098ZM105.7 137.868C117.347 137.869 126.787 147.236 126.787 158.789C126.787 170.342 117.347 179.71 105.7 179.71C94.0536 179.71 84.6124 170.342 84.6123 158.789C84.6123 147.236 94.0535 137.868 105.7 137.868ZM173.571 137.868C185.218 137.868 194.659 147.236 194.659 158.789C194.659 170.342 185.218 179.71 173.571 179.71C161.925 179.71 152.484 170.342 152.484 158.789C152.484 147.236 161.925 137.868 173.571 137.868ZM241.455 137.868C253.102 137.869 262.542 147.236 262.542 158.789C262.542 170.342 253.101 179.71 241.455 179.71C229.808 179.71 220.367 170.342 220.367 158.789C220.367 147.236 229.808 137.868 241.455 137.868Z" fill="white"/>
+</svg>
diff --git a/ios/AppIcon.icon/icon.json b/ios/AppIcon.icon/icon.json
new file mode 100644
index 00000000000..af29e1e3486
--- /dev/null
+++ b/ios/AppIcon.icon/icon.json
@@ -0,0 +1,68 @@
+{
+  "fill" : {
+    "linear-gradient" : [
+      "display-p3:1.06272,0.30074,0.40032,1.00000",
+      "display-p3:0.96078,0.27059,0.36078,1.00000"
+    ]
+  },
+  "groups" : [
+    {
+      "layers" : [
+        {
+          "blend-mode" : "plus-lighter",
+          "fill-specializations" : [
+            {
+              "value" : {
+                "linear-gradient" : [
+                  "display-p3:1.00000,1.00000,1.00000,1.00000",
+                  "srgb:1.00000,1.00000,1.00000,0.80000"
+                ],
+                "orientation" : {
+                  "start" : {
+                    "x" : 0.8502197265625,
+                    "y" : 0.04061830677339003
+                  },
+                  "stop" : {
+                    "x" : 0.3342950994318182,
+                    "y" : 1
+                  }
+                }
+              }
+            },
+            {
+              "appearance" : "tinted",
+              "value" : {
+                "automatic-gradient" : "extended-srgb:0.00000,0.53333,1.00000,1.00000"
+              }
+            }
+          ],
+          "glass" : true,
+          "image-name" : "Union2.svg",
+          "name" : "Union2",
+          "opacity" : 0.95,
+          "position" : {
+            "scale" : 2,
+            "translation-in-points" : [
+              5,
+              -3.0004841536889444
+            ]
+          }
+        }
+      ],
+      "shadow" : {
+        "kind" : "neutral",
+        "opacity" : 0.5
+      },
+      "translucency" : {
+        "enabled" : true,
+        "value" : 0.3
+      }
+    }
+  ],
+  "supported-platforms" : {
+    "circles" : [
+      "watchOS"
+    ],
+    "squares" : "shared"
+  }
+}
\ No newline at end of file
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/100.png b/ios/Assets.xcassets/AppIcon.appiconset/100.png
deleted file mode 100644
index 7f24a267978..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/100.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/1024 1.png b/ios/Assets.xcassets/AppIcon.appiconset/1024 1.png
deleted file mode 100644
index e737a61ea6f..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/1024 1.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/1024.png b/ios/Assets.xcassets/AppIcon.appiconset/1024.png
deleted file mode 100644
index e737a61ea6f..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/1024.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/114.png b/ios/Assets.xcassets/AppIcon.appiconset/114.png
deleted file mode 100644
index 7b5b7e31f07..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/114.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/120.png b/ios/Assets.xcassets/AppIcon.appiconset/120.png
deleted file mode 100644
index 2db6152265b..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/120.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/144.png b/ios/Assets.xcassets/AppIcon.appiconset/144.png
deleted file mode 100644
index 9e4461b531f..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/144.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/152.png b/ios/Assets.xcassets/AppIcon.appiconset/152.png
deleted file mode 100644
index ece9c43b4ed..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/152.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/167.png b/ios/Assets.xcassets/AppIcon.appiconset/167.png
deleted file mode 100644
index c10c5fae9ab..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/167.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/180.png b/ios/Assets.xcassets/AppIcon.appiconset/180.png
deleted file mode 100644
index e883fea3111..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/180.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/20.png b/ios/Assets.xcassets/AppIcon.appiconset/20.png
deleted file mode 100644
index 580f31abf68..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/20.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/29.png b/ios/Assets.xcassets/AppIcon.appiconset/29.png
deleted file mode 100644
index 075803b018d..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/29.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/40.png b/ios/Assets.xcassets/AppIcon.appiconset/40.png
deleted file mode 100644
index cc301e7db69..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/40.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/50.png b/ios/Assets.xcassets/AppIcon.appiconset/50.png
deleted file mode 100644
index 4b68ad4618e..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/50.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/57.png b/ios/Assets.xcassets/AppIcon.appiconset/57.png
deleted file mode 100644
index 5af4cfb70a5..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/57.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/58.png b/ios/Assets.xcassets/AppIcon.appiconset/58.png
deleted file mode 100644
index e9c3392d48e..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/58.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/60.png b/ios/Assets.xcassets/AppIcon.appiconset/60.png
deleted file mode 100644
index 57618b80daa..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/60.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/72.png b/ios/Assets.xcassets/AppIcon.appiconset/72.png
deleted file mode 100644
index b539994906f..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/72.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/76.png b/ios/Assets.xcassets/AppIcon.appiconset/76.png
deleted file mode 100644
index caef08f4d24..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/76.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/80.png b/ios/Assets.xcassets/AppIcon.appiconset/80.png
deleted file mode 100644
index 1b956d3da49..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/80.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/87.png b/ios/Assets.xcassets/AppIcon.appiconset/87.png
deleted file mode 100644
index 17381abce12..00000000000
Binary files a/ios/Assets.xcassets/AppIcon.appiconset/87.png and /dev/null differ
diff --git a/ios/Assets.xcassets/AppIcon.appiconset/Contents.json b/ios/Assets.xcassets/AppIcon.appiconset/Contents.json
deleted file mode 100644
index cdcbf4fd039..00000000000
--- a/ios/Assets.xcassets/AppIcon.appiconset/Contents.json
+++ /dev/null
@@ -1,164 +0,0 @@
-{
-  "images" : [
-    {
-      "filename" : "40.png",
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "20x20"
-    },
-    {
-      "filename" : "60.png",
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "20x20"
-    },
-    {
-      "filename" : "29.png",
-      "idiom" : "iphone",
-      "scale" : "1x",
-      "size" : "29x29"
-    },
-    {
-      "filename" : "58.png",
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "29x29"
-    },
-    {
-      "filename" : "87.png",
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "29x29"
-    },
-    {
-      "filename" : "80.png",
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "40x40"
-    },
-    {
-      "filename" : "120.png",
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "40x40"
-    },
-    {
-      "filename" : "57.png",
-      "idiom" : "iphone",
-      "scale" : "1x",
-      "size" : "57x57"
-    },
-    {
-      "filename" : "114.png",
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "57x57"
-    },
-    {
-      "filename" : "120.png",
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "60x60"
-    },
-    {
-      "filename" : "180.png",
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "60x60"
-    },
-    {
-      "filename" : "20.png",
-      "idiom" : "ipad",
-      "scale" : "1x",
-      "size" : "20x20"
-    },
-    {
-      "filename" : "40.png",
-      "idiom" : "ipad",
-      "scale" : "2x",
-      "size" : "20x20"
-    },
-    {
-      "filename" : "29.png",
-      "idiom" : "ipad",
-      "scale" : "1x",
-      "size" : "29x29"
-    },
-    {
-      "filename" : "58.png",
-      "idiom" : "ipad",
-      "scale" : "2x",
-      "size" : "29x29"
-    },
-    {
-      "filename" : "40.png",
-      "idiom" : "ipad",
-      "scale" : "1x",
-      "size" : "40x40"
-    },
-    {
-      "filename" : "80.png",
-      "idiom" : "ipad",
-      "scale" : "2x",
-      "size" : "40x40"
-    },
-    {
-      "filename" : "50.png",
-      "idiom" : "ipad",
-      "scale" : "1x",
-      "size" : "50x50"
-    },
-    {
-      "filename" : "100.png",
-      "idiom" : "ipad",
-      "scale" : "2x",
-      "size" : "50x50"
-    },
-    {
-      "filename" : "72.png",
-      "idiom" : "ipad",
-      "scale" : "1x",
-      "size" : "72x72"
-    },
-    {
-      "filename" : "144.png",
-      "idiom" : "ipad",
-      "scale" : "2x",
-      "size" : "72x72"
-    },
-    {
-      "filename" : "76.png",
-      "idiom" : "ipad",
-      "scale" : "1x",
-      "size" : "76x76"
-    },
-    {
-      "filename" : "152.png",
-      "idiom" : "ipad",
-      "scale" : "2x",
-      "size" : "76x76"
-    },
-    {
-      "filename" : "167.png",
-      "idiom" : "ipad",
-      "scale" : "2x",
-      "size" : "83.5x83.5"
-    },
-    {
-      "filename" : "1024.png",
-      "idiom" : "ios-marketing",
-      "scale" : "1x",
-      "size" : "1024x1024"
-    },
-    {
-      "filename" : "1024 1.png",
-      "idiom" : "universal",
-      "platform" : "watchos",
-      "size" : "1024x1024"
-    }
-  ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
-  }
-}
diff --git a/ios/Libraries/SSLPinning.mm b/ios/Libraries/SSLPinning.mm
index 3ff922eecc5..d99bbb79015 100644
--- a/ios/Libraries/SSLPinning.mm
+++ b/ios/Libraries/SSLPinning.mm
@@ -9,7 +9,7 @@
 #import <objc/runtime.h>
 #import "SSLPinning.h"
 #import "../Shared/RocketChat/MMKVBridge.h"
-#import "SRWebSocket.h"
+#import <SocketRocket/SRWebSocket.h>
 #import "EXSessionTaskDispatcher.h"
 
 @implementation RCTHTTPRequestHandler (Challenge)
diff --git a/ios/Podfile b/ios/Podfile
index 4b0ef129eca..f73893b1e2f 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -1,7 +1,7 @@
 require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
 require File.join(File.dirname(`node --print "require.resolve('react-native/package.json')"`), "scripts/react_native_pods")
 
-platform :ios, '15.1'
+platform :ios, '16.4'
 install! 'cocoapods', :deterministic_uuids => false
 
 # Pin the generated workspace name so `react-native run-ios` selects it and
@@ -40,7 +40,10 @@ end
 
 $static_framework = [ 
   'WatermelonDB',
-  'simdjson'
+  'simdjson',
+  'RNFBApp',
+  'RNFBAnalytics',
+  'RNFBCrashlytics'
 ]
 pre_install do |installer|
   Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {}
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 4b134051245..412cbda7e36 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -1,17 +1,10 @@
 PODS:
-  - boost (1.84.0)
   - BugsnagReactNative (8.4.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -26,30 +19,22 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - BVLinearGradient (2.6.2):
+  - BVLinearGradient (2.8.3):
     - React-Core
-  - DoubleConversion (1.1.6)
-  - EXApplication (7.0.8):
-    - ExpoModulesCore
-  - EXConstants (18.0.12):
+  - EXApplication (57.0.3):
     - ExpoModulesCore
-  - EXNotifications (0.32.15):
+  - EXConstants (57.0.18):
     - ExpoModulesCore
-  - Expo (54.0.30):
-    - boost
-    - DoubleConversion
+  - Expo (57.0.23):
     - ExpoModulesCore
-    - fast_float
-    - fmt
-    - glog
+    - ExpoModulesJSI
     - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -66,51 +51,52 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - ExpoAppleAuthentication (8.0.8):
+  - ExpoAppleAuthentication (57.0.2):
     - ExpoModulesCore
-  - ExpoAsset (12.0.12):
+  - ExpoAsset (57.0.17):
     - ExpoModulesCore
-  - ExpoAudio (0.4.9):
+  - ExpoAudio (57.0.5):
     - ExpoModulesCore
-  - ExpoCamera (17.0.10):
+  - ExpoCamera (57.0.5):
     - ExpoModulesCore
+  - ExpoCameraBarcodeScanning (57.0.5):
+    - ExpoCamera
     - ZXingObjC/OneD
     - ZXingObjC/PDF417
-  - ExpoDevice (8.0.10):
+  - ExpoDevice (57.0.2):
+    - ExpoModulesCore
+  - ExpoDocumentPicker (57.0.2):
     - ExpoModulesCore
-  - ExpoDocumentPicker (14.0.8):
+  - ExpoDomWebView (57.0.1):
     - ExpoModulesCore
-  - ExpoFileSystem (19.0.21):
+  - ExpoFileSystem (57.0.7):
     - ExpoModulesCore
-  - ExpoFont (14.0.10):
+  - ExpoFont (57.0.4):
     - ExpoModulesCore
-  - ExpoHaptics (15.0.8):
+  - ExpoHaptics (57.0.3):
     - ExpoModulesCore
-  - ExpoImage (3.0.11):
+  - ExpoImage (57.0.5):
     - ExpoModulesCore
     - libavif/libdav1d
     - SDWebImage (~> 5.21.0)
     - SDWebImageAVIFCoder (~> 0.11.0)
     - SDWebImageSVGCoder (~> 1.7.0)
     - SDWebImageWebPCoder (~> 0.14.6)
-  - ExpoKeepAwake (15.0.8):
+  - ExpoKeepAwake (57.0.2):
     - ExpoModulesCore
-  - ExpoLocalAuthentication (17.0.8):
+  - ExpoLocalAuthentication (57.0.3):
     - ExpoModulesCore
-  - ExpoModulesCore (3.0.29):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - ExpoLogBox (57.0.4):
+    - React-Core
+  - ExpoModulesCore (57.0.18):
+    - ExpoModulesJSI
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -126,20 +112,36 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
+  - ExpoModulesJSI (57.1.0):
+    - React-Core
+    - ReactCommon
+  - ExpoModulesWorklets (57.0.18):
+    - ExpoModulesCore
+    - ExpoModulesJSI
+  - ExpoModulesWorkletsAdapter (57.0.18):
+    - ExpoModulesCore
+    - ExpoModulesJSI
+    - ExpoModulesWorklets
+    - RNWorklets
+  - ExpoNotifications (57.0.19):
+    - ExpoModulesCore
   - ExpoQuickLook (0.4.0):
     - ExpoModulesCore
-  - ExpoSystemUI (6.0.9):
+  - ExpoSystemUI (57.0.4):
     - ExpoModulesCore
-  - ExpoVideo (3.0.16):
+  - ExpoUI (57.0.19):
     - ExpoModulesCore
-  - ExpoVideoThumbnails (10.0.8):
+    - ExpoModulesWorklets
+    - React-RCTFabric
+  - ExpoVideo (57.0.4):
     - ExpoModulesCore
-  - ExpoWebBrowser (15.0.10):
+  - ExpoVideoThumbnails (57.0.2):
     - ExpoModulesCore
-  - fast_float (8.0.0)
-  - FBLazyVector (0.81.5)
+  - ExpoWebBrowser (57.0.3):
+    - ExpoModulesCore
+  - FBLazyVector (0.86.3)
   - Firebase/AnalyticsWithoutAdIdSupport (11.11.0):
     - Firebase/CoreOnly
     - FirebaseAnalytics/WithoutAdIdSupport (~> 11.11.0)
@@ -189,8 +191,6 @@ PODS:
     - GoogleUtilities/UserDefaults (~> 8.0)
     - nanopb (~> 3.30910.0)
     - PromisesSwift (~> 2.1)
-  - fmt (11.0.2)
-  - glog (0.3.5)
   - GoogleAppMeasurement/WithoutAdIdSupport (11.11.0):
     - GoogleUtilities/AppDelegateSwizzler (~> 8.0)
     - GoogleUtilities/MethodSwizzler (~> 8.0)
@@ -227,9 +227,9 @@ PODS:
   - GoogleUtilities/UserDefaults (8.1.0):
     - GoogleUtilities/Logger
     - GoogleUtilities/Privacy
-  - hermes-engine (0.81.5):
-    - hermes-engine/Pre-built (= 0.81.5)
-  - hermes-engine/Pre-built (0.81.5)
+  - hermes-engine (250829098.0.17):
+    - hermes-engine/Pre-built (= 250829098.0.17)
+  - hermes-engine/Pre-built (250829098.0.17)
   - JitsiWebRTC (124.0.2)
   - libavif/core (1.0.0)
   - libavif/libdav1d (1.0.0):
@@ -248,21 +248,15 @@ PODS:
   - libwebp/sharpyuv (1.5.0)
   - libwebp/webp (1.5.0):
     - libwebp/sharpyuv
-  - MMKV (2.2.4):
-    - MMKVCore (~> 2.2.4)
-  - MMKVCore (2.2.4)
+  - MMKV (2.4.0):
+    - MMKVCore (~> 2.4.0)
+  - MMKVCore (2.4.0)
   - MobileCrypto (0.4.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -277,28 +271,22 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - nanopb (3.30910.0):
     - nanopb/decode (= 3.30910.0)
     - nanopb/encode (= 3.30910.0)
   - nanopb/decode (3.30910.0)
   - nanopb/encode (3.30910.0)
-  - NitroMmkv (4.1.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - MMKVCore (= 2.2.4)
+  - NitroMmkv (4.3.2):
+    - hermes-engine
+    - MMKVCore (= 2.4.0)
     - NitroModules
-    - RCT-Folly
-    - RCT-Folly/Fabric
     - RCTRequired
     - RCTTypeSafety
     - React-callinvoker
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -313,21 +301,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - NitroModules (0.33.9):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - NitroModules (0.37.1):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-callinvoker
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -342,61 +324,39 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - PromisesObjC (2.4.0)
   - PromisesSwift (2.4.0):
     - PromisesObjC (= 2.4.0)
-  - RCT-Folly (2024.11.18.00):
-    - boost
-    - DoubleConversion
-    - fast_float (= 8.0.0)
-    - fmt (= 11.0.2)
-    - glog
-    - RCT-Folly/Default (= 2024.11.18.00)
-  - RCT-Folly/Default (2024.11.18.00):
-    - boost
-    - DoubleConversion
-    - fast_float (= 8.0.0)
-    - fmt (= 11.0.2)
-    - glog
-  - RCT-Folly/Fabric (2024.11.18.00):
-    - boost
-    - DoubleConversion
-    - fast_float (= 8.0.0)
-    - fmt (= 11.0.2)
-    - glog
-  - RCTDeprecation (0.81.5)
-  - RCTRequired (0.81.5)
-  - RCTTypeSafety (0.81.5):
-    - FBLazyVector (= 0.81.5)
-    - RCTRequired (= 0.81.5)
-    - React-Core (= 0.81.5)
-  - React (0.81.5):
-    - React-Core (= 0.81.5)
-    - React-Core/DevSupport (= 0.81.5)
-    - React-Core/RCTWebSocket (= 0.81.5)
-    - React-RCTActionSheet (= 0.81.5)
-    - React-RCTAnimation (= 0.81.5)
-    - React-RCTBlob (= 0.81.5)
-    - React-RCTImage (= 0.81.5)
-    - React-RCTLinking (= 0.81.5)
-    - React-RCTNetwork (= 0.81.5)
-    - React-RCTSettings (= 0.81.5)
-    - React-RCTText (= 0.81.5)
-    - React-RCTVibration (= 0.81.5)
-  - React-callinvoker (0.81.5)
-  - React-Core (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RCTDeprecation (0.86.3)
+  - RCTRequired (0.86.3)
+  - RCTSwiftUI (0.86.3)
+  - RCTSwiftUIWrapper (0.86.3):
+    - RCTSwiftUI
+  - RCTTypeSafety (0.86.3):
+    - FBLazyVector (= 0.86.3)
+    - RCTRequired (= 0.86.3)
+    - React-Core (= 0.86.3)
+  - React (0.86.3):
+    - React-Core (= 0.86.3)
+    - React-Core/DevSupport (= 0.86.3)
+    - React-Core/RCTWebSocket (= 0.86.3)
+    - React-RCTActionSheet (= 0.86.3)
+    - React-RCTAnimation (= 0.86.3)
+    - React-RCTBlob (= 0.86.3)
+    - React-RCTImage (= 0.86.3)
+    - React-RCTLinking (= 0.86.3)
+    - React-RCTNetwork (= 0.86.3)
+    - React-RCTSettings (= 0.86.3)
+    - React-RCTText (= 0.86.3)
+    - React-RCTVibration (= 0.86.3)
+  - React-callinvoker (0.86.3)
+  - React-Core (0.86.3):
+    - hermes-engine
     - RCTDeprecation
-    - React-Core/Default (= 0.81.5)
+    - React-Core-prebuilt
+    - React-Core/Default (= 0.86.3)
     - React-cxxreact
     - React-featureflags
     - React-hermes
@@ -409,18 +369,14 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/CoreModulesHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core-prebuilt (0.86.3):
+    - ReactNativeDependencies
+  - React-Core/CoreModulesHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -434,18 +390,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/Default (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/Default (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-cxxreact
     - React-featureflags
     - React-hermes
@@ -458,20 +408,14 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/DevSupport (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/DevSupport (0.86.3):
+    - hermes-engine
     - RCTDeprecation
-    - React-Core/Default (= 0.81.5)
-    - React-Core/RCTWebSocket (= 0.81.5)
+    - React-Core-prebuilt
+    - React-Core/Default (= 0.86.3)
+    - React-Core/RCTWebSocket (= 0.86.3)
     - React-cxxreact
     - React-featureflags
     - React-hermes
@@ -484,18 +428,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTActionSheetHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTActionSheetHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -509,18 +447,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTAnimationHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTAnimationHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -534,18 +466,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTBlobHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTBlobHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -559,18 +485,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTImageHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTImageHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -584,18 +504,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTLinkingHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTLinkingHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -609,18 +523,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTNetworkHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTNetworkHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -634,18 +542,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTSettingsHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTSettingsHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -659,18 +561,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTTextHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTTextHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -684,18 +580,12 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTVibrationHeaders (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTVibrationHeaders (0.86.3):
+    - hermes-engine
     - RCTDeprecation
+    - React-Core-prebuilt
     - React-Core/Default
     - React-cxxreact
     - React-featureflags
@@ -709,19 +599,13 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Core/RCTWebSocket (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Core/RCTWebSocket (0.86.3):
+    - hermes-engine
     - RCTDeprecation
-    - React-Core/Default (= 0.81.5)
+    - React-Core-prebuilt
+    - React-Core/Default (= 0.86.3)
     - React-cxxreact
     - React-featureflags
     - React-hermes
@@ -734,76 +618,65 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-CoreModules (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - RCTTypeSafety (= 0.81.5)
-    - React-Core/CoreModulesHeaders (= 0.81.5)
-    - React-jsi (= 0.81.5)
+  - React-CoreModules (0.86.3):
+    - RCTTypeSafety (= 0.86.3)
+    - React-Core-prebuilt
+    - React-Core/CoreModulesHeaders (= 0.86.3)
+    - React-debug
+    - React-featureflags
+    - React-jsi (= 0.86.3)
     - React-jsinspector
     - React-jsinspectorcdp
     - React-jsinspectortracing
     - React-NativeModulesApple
     - React-RCTBlob
     - React-RCTFBReactNativeSpec
-    - React-RCTImage (= 0.81.5)
+    - React-RCTImage (= 0.86.3)
     - React-runtimeexecutor
+    - React-utils
     - ReactCommon
-    - SocketRocket
-  - React-cxxreact (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-callinvoker (= 0.81.5)
-    - React-debug (= 0.81.5)
-    - React-jsi (= 0.81.5)
+    - ReactNativeDependencies
+  - React-cxxreact (0.86.3):
+    - hermes-engine
+    - React-callinvoker (= 0.86.3)
+    - React-Core-prebuilt
+    - React-debug (= 0.86.3)
+    - React-jsi (= 0.86.3)
     - React-jsinspector
     - React-jsinspectorcdp
     - React-jsinspectortracing
-    - React-logger (= 0.81.5)
-    - React-perflogger (= 0.81.5)
+    - React-logger (= 0.86.3)
+    - React-perflogger (= 0.86.3)
     - React-runtimeexecutor
-    - React-timing (= 0.81.5)
-    - SocketRocket
-  - React-debug (0.81.5)
-  - React-defaultsnativemodule (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-timing (= 0.86.3)
+    - React-utils
+    - ReactNativeDependencies
+  - React-debug (0.86.3):
+    - React-debug/redbox (= 0.86.3)
+  - React-debug/redbox (0.86.3)
+  - React-defaultsnativemodule (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-domnativemodule
+    - React-Fabric/animated
+    - React-featureflags
     - React-featureflagsnativemodule
     - React-idlecallbacksnativemodule
+    - React-intersectionobservernativemodule
     - React-jsi
     - React-jsiexecutor
     - React-microtasksnativemodule
+    - React-mutationobservernativemodule
     - React-RCTFBReactNativeSpec
-    - SocketRocket
-  - React-domnativemodule (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-viewtransitionnativemodule
+    - React-webperformancenativemodule
+    - ReactNativeDependencies
+    - Yoga
+  - React-domnativemodule (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-Fabric
     - React-Fabric/bridging
     - React-FabricComponents
@@ -813,39 +686,35 @@ PODS:
     - React-RCTFBReactNativeSpec
     - React-runtimeexecutor
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Fabric (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Fabric (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
-    - React-Fabric/animations (= 0.81.5)
-    - React-Fabric/attributedstring (= 0.81.5)
-    - React-Fabric/bridging (= 0.81.5)
-    - React-Fabric/componentregistry (= 0.81.5)
-    - React-Fabric/componentregistrynative (= 0.81.5)
-    - React-Fabric/components (= 0.81.5)
-    - React-Fabric/consistency (= 0.81.5)
-    - React-Fabric/core (= 0.81.5)
-    - React-Fabric/dom (= 0.81.5)
-    - React-Fabric/imagemanager (= 0.81.5)
-    - React-Fabric/leakchecker (= 0.81.5)
-    - React-Fabric/mounting (= 0.81.5)
-    - React-Fabric/observers (= 0.81.5)
-    - React-Fabric/scheduler (= 0.81.5)
-    - React-Fabric/telemetry (= 0.81.5)
-    - React-Fabric/templateprocessor (= 0.81.5)
-    - React-Fabric/uimanager (= 0.81.5)
+    - React-Fabric/animated (= 0.86.3)
+    - React-Fabric/animationbackend (= 0.86.3)
+    - React-Fabric/animations (= 0.86.3)
+    - React-Fabric/attributedstring (= 0.86.3)
+    - React-Fabric/bridging (= 0.86.3)
+    - React-Fabric/componentregistry (= 0.86.3)
+    - React-Fabric/componentregistrynative (= 0.86.3)
+    - React-Fabric/components (= 0.86.3)
+    - React-Fabric/consistency (= 0.86.3)
+    - React-Fabric/core (= 0.86.3)
+    - React-Fabric/dom (= 0.86.3)
+    - React-Fabric/imagemanager (= 0.86.3)
+    - React-Fabric/leakchecker (= 0.86.3)
+    - React-Fabric/mounting (= 0.86.3)
+    - React-Fabric/observers (= 0.86.3)
+    - React-Fabric/scheduler (= 0.86.3)
+    - React-Fabric/telemetry (= 0.86.3)
+    - React-Fabric/uimanager (= 0.86.3)
+    - React-Fabric/viewtransition (= 0.86.3)
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -856,21 +725,16 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/animations (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/animated (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
+    - React-Fabric/animationbackend
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -881,19 +745,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/attributedstring (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/animationbackend (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -906,19 +764,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/bridging (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/animations (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -931,19 +783,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/componentregistry (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/attributedstring (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -956,19 +802,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/componentregistrynative (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/bridging (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -981,25 +821,57 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/components (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/componentregistry (0.86.3):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-debug
+    - React-featureflags
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimeexecutor
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+  - React-Fabric/componentregistrynative (0.86.3):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-debug
+    - React-featureflags
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimeexecutor
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+  - React-Fabric/components (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
-    - React-Fabric/components/legacyviewmanagerinterop (= 0.81.5)
-    - React-Fabric/components/root (= 0.81.5)
-    - React-Fabric/components/scrollview (= 0.81.5)
-    - React-Fabric/components/view (= 0.81.5)
+    - React-Fabric/components/legacyviewmanagerinterop (= 0.86.3)
+    - React-Fabric/components/root (= 0.86.3)
+    - React-Fabric/components/scrollview (= 0.86.3)
+    - React-Fabric/components/view (= 0.86.3)
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -1010,19 +882,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/components/legacyviewmanagerinterop (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/components/legacyviewmanagerinterop (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1035,19 +901,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/components/root (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/components/root (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1060,19 +920,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/components/scrollview (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/components/scrollview (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1085,19 +939,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/components/view (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/components/view (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1111,20 +959,33 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-Fabric/consistency (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-Fabric/consistency (0.86.3):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-debug
+    - React-featureflags
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimeexecutor
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+  - React-Fabric/core (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1137,19 +998,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/core (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/dom (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1162,19 +1017,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/dom (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/imagemanager (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1187,19 +1036,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/imagemanager (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/leakchecker (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1212,46 +1055,38 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/leakchecker (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/mounting (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
     - React-graphics
     - React-jsi
     - React-jsiexecutor
+    - React-jsinspectortracing
     - React-logger
     - React-rendererdebug
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/mounting (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/observers (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
+    - React-Fabric/observers/events (= 0.86.3)
+    - React-Fabric/observers/intersection (= 0.86.3)
+    - React-Fabric/observers/mutation (= 0.86.3)
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -1262,22 +1097,15 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/observers (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/observers/events (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
-    - React-Fabric/observers/events (= 0.81.5)
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -1288,19 +1116,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/observers/events (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/observers/intersection (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1313,46 +1135,56 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/scheduler (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/observers/mutation (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
+    - React-featureflags
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-logger
+    - React-rendererdebug
+    - React-runtimeexecutor
+    - React-runtimescheduler
+    - React-utils
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+  - React-Fabric/scheduler (0.86.3):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-debug
+    - React-Fabric/animationbackend
     - React-Fabric/observers/events
+    - React-Fabric/viewtransition
     - React-featureflags
     - React-graphics
     - React-jsi
     - React-jsiexecutor
     - React-logger
+    - React-performancecdpmetrics
     - React-performancetimeline
     - React-rendererdebug
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/telemetry (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/telemetry (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1365,47 +1197,36 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/templateprocessor (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/uimanager (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
+    - React-Fabric/uimanager/consistency (= 0.86.3)
     - React-featureflags
     - React-graphics
     - React-jsi
     - React-jsiexecutor
     - React-logger
+    - React-rendererconsistency
     - React-rendererdebug
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/uimanager (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/uimanager/consistency (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
-    - React-Fabric/uimanager/consistency (= 0.81.5)
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -1417,19 +1238,13 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-Fabric/uimanager/consistency (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-Fabric/viewtransition (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -1437,30 +1252,23 @@ PODS:
     - React-jsi
     - React-jsiexecutor
     - React-logger
-    - React-rendererconsistency
     - React-rendererdebug
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-FabricComponents (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-FabricComponents (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
-    - React-FabricComponents/components (= 0.81.5)
-    - React-FabricComponents/textlayoutmanager (= 0.81.5)
+    - React-FabricComponents/components (= 0.86.3)
+    - React-FabricComponents/textlayoutmanager (= 0.86.3)
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -1471,34 +1279,28 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
-    - React-FabricComponents/components/inputaccessory (= 0.81.5)
-    - React-FabricComponents/components/iostextinput (= 0.81.5)
-    - React-FabricComponents/components/modal (= 0.81.5)
-    - React-FabricComponents/components/rncore (= 0.81.5)
-    - React-FabricComponents/components/safeareaview (= 0.81.5)
-    - React-FabricComponents/components/scrollview (= 0.81.5)
-    - React-FabricComponents/components/switch (= 0.81.5)
-    - React-FabricComponents/components/text (= 0.81.5)
-    - React-FabricComponents/components/textinput (= 0.81.5)
-    - React-FabricComponents/components/unimplementedview (= 0.81.5)
-    - React-FabricComponents/components/virtualview (= 0.81.5)
+    - React-FabricComponents/components/inputaccessory (= 0.86.3)
+    - React-FabricComponents/components/iostextinput (= 0.86.3)
+    - React-FabricComponents/components/modal (= 0.86.3)
+    - React-FabricComponents/components/rncore (= 0.86.3)
+    - React-FabricComponents/components/safeareaview (= 0.86.3)
+    - React-FabricComponents/components/scrollview (= 0.86.3)
+    - React-FabricComponents/components/switch (= 0.86.3)
+    - React-FabricComponents/components/text (= 0.86.3)
+    - React-FabricComponents/components/textinput (= 0.86.3)
+    - React-FabricComponents/components/unimplementedview (= 0.86.3)
+    - React-FabricComponents/components/virtualview (= 0.86.3)
     - React-featureflags
     - React-graphics
     - React-jsi
@@ -1509,20 +1311,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/inputaccessory (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/inputaccessory (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1536,20 +1332,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/iostextinput (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/iostextinput (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1563,20 +1353,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/modal (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/modal (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1590,20 +1374,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/rncore (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/rncore (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1617,20 +1395,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/safeareaview (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/safeareaview (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1644,20 +1416,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/scrollview (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/scrollview (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1671,20 +1437,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/switch (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/switch (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1698,20 +1458,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/text (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/text (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1725,20 +1479,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/textinput (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/textinput (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1752,20 +1500,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/unimplementedview (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/unimplementedview (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1779,20 +1521,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/components/virtualview (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/components/virtualview (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1806,20 +1542,14 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricComponents/textlayoutmanager (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-FabricComponents/textlayoutmanager (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-Fabric
@@ -1833,272 +1563,201 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-FabricImage (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - RCTRequired (= 0.81.5)
-    - RCTTypeSafety (= 0.81.5)
+  - React-FabricImage (0.86.3):
+    - hermes-engine
+    - RCTRequired (= 0.86.3)
+    - RCTTypeSafety (= 0.86.3)
+    - React-Core-prebuilt
     - React-Fabric
     - React-featureflags
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - React-jsiexecutor (= 0.81.5)
+    - React-jsiexecutor (= 0.86.3)
     - React-logger
     - React-rendererdebug
     - React-utils
     - ReactCommon
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-featureflags (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - SocketRocket
-  - React-featureflagsnativemodule (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-featureflags (0.86.3):
+    - React-Core-prebuilt
+    - ReactNativeDependencies
+  - React-featureflagsnativemodule (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-featureflags
     - React-jsi
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-graphics (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
+    - ReactNativeDependencies
+  - React-graphics (0.86.3):
     - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-Core-prebuilt
+    - React-featureflags
     - React-jsi
     - React-jsiexecutor
+    - React-rendererdebug
     - React-utils
-    - SocketRocket
-  - React-hermes (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-cxxreact (= 0.81.5)
-    - React-jsi
-    - React-jsiexecutor (= 0.81.5)
+    - ReactNativeDependencies
+  - React-hermes (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-cxxreact (= 0.86.3)
+    - React-jsi
+    - React-jsiexecutor (= 0.86.3)
     - React-jsinspector
     - React-jsinspectorcdp
     - React-jsinspectortracing
-    - React-perflogger (= 0.81.5)
+    - React-jsitooling
+    - React-oscompat
+    - React-perflogger (= 0.86.3)
     - React-runtimeexecutor
-    - SocketRocket
-  - React-idlecallbacksnativemodule (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
+    - ReactNativeDependencies
+  - React-idlecallbacksnativemodule (0.86.3):
     - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-Core-prebuilt
     - React-jsi
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - React-runtimeexecutor
     - React-runtimescheduler
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-ImageManager (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-ImageManager (0.86.3):
+    - React-Core-prebuilt
     - React-Core/Default
     - React-debug
     - React-Fabric
     - React-graphics
     - React-rendererdebug
     - React-utils
-    - SocketRocket
-  - React-jserrorhandler (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-intersectionobservernativemodule (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-Fabric
+    - React-Fabric/bridging
+    - React-graphics
+    - React-jsi
+    - React-jsiexecutor
+    - React-RCTFBReactNativeSpec
+    - React-runtimeexecutor
+    - React-runtimescheduler
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
+  - React-jserrorhandler (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
     - React-jsi
     - ReactCommon/turbomodule/bridging
-    - SocketRocket
-  - React-jsi (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - SocketRocket
-  - React-jsiexecutor (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-cxxreact (= 0.81.5)
-    - React-jsi (= 0.81.5)
+    - ReactNativeDependencies
+  - React-jsi (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - ReactNativeDependencies
+  - React-jsiexecutor (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-debug
+    - React-jserrorhandler
+    - React-jsi
     - React-jsinspector
     - React-jsinspectorcdp
     - React-jsinspectortracing
-    - React-perflogger (= 0.81.5)
+    - React-jsitooling
+    - React-perflogger
     - React-runtimeexecutor
-    - SocketRocket
-  - React-jsinspector (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-utils
+    - ReactNativeDependencies
+  - React-jsinspector (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-featureflags
     - React-jsi
     - React-jsinspectorcdp
     - React-jsinspectornetwork
     - React-jsinspectortracing
     - React-oscompat
-    - React-perflogger (= 0.81.5)
+    - React-perflogger (= 0.86.3)
     - React-runtimeexecutor
-    - SocketRocket
-  - React-jsinspectorcdp (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - SocketRocket
-  - React-jsinspectornetwork (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-featureflags
+    - React-utils
+    - ReactNativeDependencies
+  - React-jsinspectorcdp (0.86.3):
+    - React-Core-prebuilt
+    - ReactNativeDependencies
+  - React-jsinspectornetwork (0.86.3):
+    - React-Core-prebuilt
     - React-jsinspectorcdp
-    - React-performancetimeline
-    - React-timing
-    - SocketRocket
-  - React-jsinspectortracing (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-jsinspectortracing (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-jsi
+    - React-jsinspectornetwork
     - React-oscompat
     - React-timing
-    - SocketRocket
-  - React-jsitooling (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-cxxreact (= 0.81.5)
-    - React-jsi (= 0.81.5)
+    - React-utils
+    - ReactNativeDependencies
+  - React-jsitooling (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-cxxreact (= 0.86.3)
+    - React-debug
+    - React-jsi (= 0.86.3)
     - React-jsinspector
     - React-jsinspectorcdp
     - React-jsinspectortracing
     - React-runtimeexecutor
-    - SocketRocket
-  - React-jsitracing (0.81.5):
-    - React-jsi
-  - React-logger (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - SocketRocket
-  - React-Mapbuffer (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-utils
+    - ReactNativeDependencies
+  - React-jsitracing (0.86.3):
+    - React-jsi
+  - React-logger (0.86.3):
+    - React-Core-prebuilt
+    - ReactNativeDependencies
+  - React-Mapbuffer (0.86.3):
+    - React-Core-prebuilt
     - React-debug
-    - SocketRocket
-  - React-microtasksnativemodule (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
+    - ReactNativeDependencies
+  - React-microtasksnativemodule (0.86.3):
     - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-Core-prebuilt
     - React-jsi
     - React-jsiexecutor
     - React-RCTFBReactNativeSpec
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
+  - React-mutationobservernativemodule (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-Fabric
+    - React-Fabric/bridging
+    - React-Fabric/observers/mutation
+    - React-featureflags
+    - React-jsi
+    - React-jsiexecutor
+    - React-RCTFBReactNativeSpec
+    - React-runtimeexecutor
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
   - react-native-a11y-order (0.4.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2113,20 +1772,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - react-native-cameraroll (7.10.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2141,22 +1794,16 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - react-native-cookies (6.2.1):
     - React-Core
   - react-native-external-keyboard (0.9.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2171,20 +1818,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - react-native-keyboard-controller (1.18.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2200,20 +1841,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - react-native-keyboard-controller/common (1.18.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2228,30 +1863,44 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - react-native-netinfo (11.4.1):
+  - react-native-netinfo (12.0.1):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
     - React-Core
-  - react-native-safe-area-context (5.6.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
+  - react-native-safe-area-context (5.10.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-safe-area-context/common (= 5.6.2)
-    - react-native-safe-area-context/fabric (= 5.6.2)
+    - react-native-safe-area-context/common (= 5.10.0)
+    - react-native-safe-area-context/fabric (= 5.10.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -2260,20 +1909,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - react-native-safe-area-context/common (5.6.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - react-native-safe-area-context/common (5.10.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2288,20 +1931,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - react-native-safe-area-context/fabric (5.6.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - react-native-safe-area-context/fabric (5.10.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2317,27 +1954,21 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - react-native-slider (5.0.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - react-native-slider (5.2.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
     - React-graphics
     - React-ImageManager
     - React-jsi
-    - react-native-slider/common (= 5.0.1)
+    - react-native-slider/common (= 5.2.0)
     - React-NativeModulesApple
     - React-RCTFabric
     - React-renderercss
@@ -2346,20 +1977,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - react-native-slider/common (5.0.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - react-native-slider/common (5.2.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2374,23 +1999,17 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - react-native-webrtc (124.0.7):
     - JitsiWebRTC (~> 124.0.0)
     - React-Core
   - react-native-webview (13.16.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2405,20 +2024,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-NativeModulesApple (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-NativeModulesApple (0.86.3):
+    - hermes-engine
     - React-callinvoker
     - React-Core
+    - React-Core-prebuilt
     - React-cxxreact
+    - React-debug
     - React-featureflags
     - React-jsi
     - React-jsinspector
@@ -2426,60 +2040,53 @@ PODS:
     - React-runtimeexecutor
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - React-oscompat (0.81.5)
-  - React-perflogger (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - SocketRocket
-  - React-performancetimeline (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-networking (0.86.3):
+    - React-Core-prebuilt
+    - React-jsinspectornetwork
+    - React-jsinspectortracing
+    - React-performancetimeline
+    - React-timing
+    - ReactNativeDependencies
+  - React-oscompat (0.86.3)
+  - React-perflogger (0.86.3):
+    - React-Core-prebuilt
+    - ReactNativeDependencies
+  - React-performancecdpmetrics (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-jsi
+    - React-performancetimeline
+    - React-runtimeexecutor
+    - React-timing
+    - ReactNativeDependencies
+  - React-performancetimeline (0.86.3):
+    - React-Core-prebuilt
     - React-featureflags
+    - React-jsinspector
     - React-jsinspectortracing
     - React-perflogger
     - React-timing
-    - SocketRocket
-  - React-RCTActionSheet (0.81.5):
-    - React-Core/RCTActionSheetHeaders (= 0.81.5)
-  - React-RCTAnimation (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RCTActionSheet (0.86.3):
+    - React-Core/RCTActionSheetHeaders (= 0.86.3)
+  - React-RCTAnimation (0.86.3):
     - RCTTypeSafety
+    - React-Core-prebuilt
     - React-Core/RCTAnimationHeaders
+    - React-debug
     - React-featureflags
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-    - SocketRocket
-  - React-RCTAppDelegate (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RCTAppDelegate (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-CoreModules
     - React-debug
     - React-defaultsnativemodule
@@ -2501,16 +2108,10 @@ PODS:
     - React-runtimescheduler
     - React-utils
     - ReactCommon
-    - SocketRocket
-  - React-RCTBlob (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RCTBlob (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-Core/RCTBlobHeaders
     - React-Core/RCTWebSocket
     - React-jsi
@@ -2520,17 +2121,12 @@ PODS:
     - React-RCTFBReactNativeSpec
     - React-RCTNetwork
     - ReactCommon
-    - SocketRocket
-  - React-RCTFabric (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RCTFabric (0.86.3):
+    - hermes-engine
+    - RCTSwiftUIWrapper
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-FabricComponents
@@ -2541,8 +2137,9 @@ PODS:
     - React-jsi
     - React-jsinspector
     - React-jsinspectorcdp
-    - React-jsinspectornetwork
     - React-jsinspectortracing
+    - React-networking
+    - React-performancecdpmetrics
     - React-performancetimeline
     - React-RCTAnimation
     - React-RCTFBReactNativeSpec
@@ -2554,37 +2151,25 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-RCTFBReactNativeSpec (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-RCTFBReactNativeSpec (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-jsi
     - React-NativeModulesApple
-    - React-RCTFBReactNativeSpec/components (= 0.81.5)
+    - React-RCTFBReactNativeSpec/components (= 0.86.3)
     - ReactCommon
-    - SocketRocket
-  - React-RCTFBReactNativeSpec/components (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RCTFBReactNativeSpec/components (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2594,59 +2179,44 @@ PODS:
     - React-rendererdebug
     - React-utils
     - ReactCommon
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - React-RCTImage (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-RCTImage (0.86.3):
     - RCTTypeSafety
+    - React-Core-prebuilt
     - React-Core/RCTImageHeaders
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - React-RCTNetwork
     - ReactCommon
-    - SocketRocket
-  - React-RCTLinking (0.81.5):
-    - React-Core/RCTLinkingHeaders (= 0.81.5)
-    - React-jsi (= 0.81.5)
+    - ReactNativeDependencies
+  - React-RCTLinking (0.86.3):
+    - React-Core/RCTLinkingHeaders (= 0.86.3)
+    - React-jsi (= 0.86.3)
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-    - ReactCommon/turbomodule/core (= 0.81.5)
-  - React-RCTNetwork (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactCommon/turbomodule/core (= 0.86.3)
+  - React-RCTNetwork (0.86.3):
     - RCTTypeSafety
+    - React-Core-prebuilt
     - React-Core/RCTNetworkHeaders
+    - React-debug
     - React-featureflags
     - React-jsi
     - React-jsinspectorcdp
     - React-jsinspectornetwork
     - React-NativeModulesApple
+    - React-networking
     - React-RCTFBReactNativeSpec
     - ReactCommon
-    - SocketRocket
-  - React-RCTRuntime (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RCTRuntime (0.86.3):
+    - hermes-engine
     - React-Core
+    - React-Core-prebuilt
+    - React-debug
     - React-jsi
     - React-jsinspector
     - React-jsinspectorcdp
@@ -2656,63 +2226,40 @@ PODS:
     - React-RuntimeCore
     - React-runtimeexecutor
     - React-RuntimeHermes
-    - SocketRocket
-  - React-RCTSettings (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - React-utils
+    - ReactNativeDependencies
+  - React-RCTSettings (0.86.3):
     - RCTTypeSafety
+    - React-Core-prebuilt
     - React-Core/RCTSettingsHeaders
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-    - SocketRocket
-  - React-RCTText (0.81.5):
-    - React-Core/RCTTextHeaders (= 0.81.5)
+    - ReactNativeDependencies
+  - React-RCTText (0.86.3):
+    - React-Core/RCTTextHeaders (= 0.86.3)
     - Yoga
-  - React-RCTVibration (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-RCTVibration (0.86.3):
+    - React-Core-prebuilt
     - React-Core/RCTVibrationHeaders
     - React-jsi
     - React-NativeModulesApple
     - React-RCTFBReactNativeSpec
     - ReactCommon
-    - SocketRocket
-  - React-rendererconsistency (0.81.5)
-  - React-renderercss (0.81.5):
+    - ReactNativeDependencies
+  - React-rendererconsistency (0.86.3)
+  - React-renderercss (0.86.3):
     - React-debug
     - React-utils
-  - React-rendererdebug (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-rendererdebug (0.86.3):
+    - React-Core-prebuilt
     - React-debug
-    - SocketRocket
-  - React-RuntimeApple (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RuntimeApple (0.86.3):
+    - hermes-engine
     - React-callinvoker
+    - React-Core-prebuilt
     - React-Core/Default
     - React-CoreModules
     - React-cxxreact
@@ -2731,16 +2278,10 @@ PODS:
     - React-RuntimeHermes
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
-  - React-RuntimeCore (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RuntimeCore (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-cxxreact
     - React-Fabric
     - React-featureflags
@@ -2753,29 +2294,17 @@ PODS:
     - React-runtimeexecutor
     - React-runtimescheduler
     - React-utils
-    - SocketRocket
-  - React-runtimeexecutor (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-runtimeexecutor (0.86.3):
+    - React-Core-prebuilt
     - React-debug
     - React-featureflags
-    - React-jsi (= 0.81.5)
+    - React-jsi (= 0.86.3)
     - React-utils
-    - SocketRocket
-  - React-RuntimeHermes (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-RuntimeHermes (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-featureflags
     - React-hermes
     - React-jsi
@@ -2787,17 +2316,11 @@ PODS:
     - React-RuntimeCore
     - React-runtimeexecutor
     - React-utils
-    - SocketRocket
-  - React-runtimescheduler (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - ReactNativeDependencies
+  - React-runtimescheduler (0.86.3):
+    - hermes-engine
     - React-callinvoker
+    - React-Core-prebuilt
     - React-cxxreact
     - React-debug
     - React-featureflags
@@ -2809,35 +2332,46 @@ PODS:
     - React-runtimeexecutor
     - React-timing
     - React-utils
-    - SocketRocket
-  - React-timing (0.81.5):
+    - ReactNativeDependencies
+  - React-timing (0.86.3):
     - React-debug
-  - React-utils (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - React-utils (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
     - React-debug
-    - React-jsi (= 0.81.5)
-    - SocketRocket
-  - ReactAppDependencyProvider (0.81.5):
+    - React-jsi (= 0.86.3)
+    - ReactNativeDependencies
+  - React-viewtransitionnativemodule (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-Fabric
+    - React-Fabric/bridging
+    - React-jsi
+    - React-jsiexecutor
+    - React-RCTFBReactNativeSpec
+    - React-runtimeexecutor
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
+  - React-webperformancenativemodule (0.86.3):
+    - hermes-engine
+    - React-Core-prebuilt
+    - React-cxxreact
+    - React-jsi
+    - React-jsiexecutor
+    - React-performancetimeline
+    - React-RCTFBReactNativeSpec
+    - React-runtimeexecutor
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+  - ReactAppDependencyProvider (0.86.3):
     - ReactCodegen
-  - ReactCodegen (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - ReactCodegen (0.86.3):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-FabricImage
@@ -2851,81 +2385,74 @@ PODS:
     - React-utils
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
-  - ReactCommon (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - ReactCommon/turbomodule (= 0.81.5)
-    - SocketRocket
-  - ReactCommon/turbomodule (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-callinvoker (= 0.81.5)
-    - React-cxxreact (= 0.81.5)
-    - React-jsi (= 0.81.5)
-    - React-logger (= 0.81.5)
-    - React-perflogger (= 0.81.5)
-    - ReactCommon/turbomodule/bridging (= 0.81.5)
-    - ReactCommon/turbomodule/core (= 0.81.5)
-    - SocketRocket
-  - ReactCommon/turbomodule/bridging (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-callinvoker (= 0.81.5)
-    - React-cxxreact (= 0.81.5)
-    - React-jsi (= 0.81.5)
-    - React-logger (= 0.81.5)
-    - React-perflogger (= 0.81.5)
-    - SocketRocket
-  - ReactCommon/turbomodule/core (0.81.5):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
-    - React-callinvoker (= 0.81.5)
-    - React-cxxreact (= 0.81.5)
-    - React-debug (= 0.81.5)
-    - React-featureflags (= 0.81.5)
-    - React-jsi (= 0.81.5)
-    - React-logger (= 0.81.5)
-    - React-perflogger (= 0.81.5)
-    - React-utils (= 0.81.5)
-    - SocketRocket
+    - ReactNativeDependencies
+  - ReactCommon (0.86.3):
+    - React-Core-prebuilt
+    - ReactCommon/turbomodule (= 0.86.3)
+    - ReactNativeDependencies
+  - ReactCommon/turbomodule (0.86.3):
+    - hermes-engine
+    - React-callinvoker (= 0.86.3)
+    - React-Core-prebuilt
+    - React-cxxreact (= 0.86.3)
+    - React-jsi (= 0.86.3)
+    - React-logger (= 0.86.3)
+    - React-perflogger (= 0.86.3)
+    - ReactCommon/turbomodule/bridging (= 0.86.3)
+    - ReactCommon/turbomodule/core (= 0.86.3)
+    - ReactNativeDependencies
+  - ReactCommon/turbomodule/bridging (0.86.3):
+    - hermes-engine
+    - React-callinvoker (= 0.86.3)
+    - React-Core-prebuilt
+    - React-cxxreact (= 0.86.3)
+    - React-jsi (= 0.86.3)
+    - React-logger (= 0.86.3)
+    - React-perflogger (= 0.86.3)
+    - ReactNativeDependencies
+  - ReactCommon/turbomodule/core (0.86.3):
+    - hermes-engine
+    - React-callinvoker (= 0.86.3)
+    - React-Core-prebuilt
+    - React-cxxreact (= 0.86.3)
+    - React-debug (= 0.86.3)
+    - React-featureflags (= 0.86.3)
+    - React-jsi (= 0.86.3)
+    - React-logger (= 0.86.3)
+    - React-perflogger (= 0.86.3)
+    - React-utils (= 0.86.3)
+    - ReactNativeDependencies
+  - ReactNativeDependencies (0.86.3)
+  - ReactNativeEnrichedMarkdown (1.0.2):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
   - ReactNativeIncallManager (4.2.1):
     - React-Core
   - RNBootSplash (6.3.11):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2940,22 +2467,16 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - RNCallKeep (4.3.16):
     - React
   - RNCAsyncStorage (2.2.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2970,20 +2491,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - RNCClipboard (1.16.3):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -2998,20 +2513,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - RNCMaskedView (0.3.2):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3026,20 +2535,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - RNCPicker (2.11.4):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3054,20 +2557,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - RNDateTimePicker (8.4.4):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNDateTimePicker (9.1.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3082,7 +2579,7 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - RNDeviceInfo (11.1.0):
     - React-Core
@@ -3098,18 +2595,12 @@ PODS:
     - FirebaseCoreExtension
     - React-Core
     - RNFBApp
-  - RNGestureHandler (2.28.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNGestureHandler (3.3.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-FabricComponents
@@ -3125,20 +2616,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
+    - RNWorklets (>= 0.8.0)
     - Yoga
   - RNImageCropPicker (0.51.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3154,22 +2640,16 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
     - RNImageCropPicker/QBImagePickerController (= 0.51.1)
-    - SocketRocket
     - TOCropViewController (~> 2.8.0)
     - Yoga
   - RNImageCropPicker/QBImagePickerController (0.51.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3185,21 +2665,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - TOCropViewController (~> 2.8.0)
     - Yoga
   - RNKeychain (10.0.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3214,24 +2688,63 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - RNLocalize (3.7.0):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
+  - RNPlainText (0.8.2):
+    - hermes-engine
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-Core-prebuilt
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-jsi
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-renderercss
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
+    - Yoga
+  - RNReanimated (4.6.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
     - React-graphics
+    - React-hermes
     - React-ImageManager
     - React-jsi
     - React-NativeModulesApple
@@ -3242,20 +2755,18 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
+    - RNReanimated/apple (= 4.6.0)
+    - RNReanimated/common (= 4.6.0)
+    - RNReanimated/view (= 4.6.0)
+    - RNWorklets
     - Yoga
-  - RNReanimated (4.1.3):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNReanimated/apple (4.6.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3271,22 +2782,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 4.1.3)
+    - ReactNativeDependencies
     - RNWorklets
-    - SocketRocket
     - Yoga
-  - RNReanimated/reanimated (4.1.3):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNReanimated/common (4.6.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3302,22 +2806,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 4.1.3)
+    - ReactNativeDependencies
     - RNWorklets
-    - SocketRocket
     - Yoga
-  - RNReanimated/reanimated/apple (4.1.3):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNReanimated/view (4.6.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3333,21 +2830,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
+    - ReactNativeDependencies
     - RNWorklets
-    - SocketRocket
     - Yoga
-  - RNScreens (4.17.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNScreens (4.28.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3363,21 +2854,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNScreens/common (= 4.17.1)
-    - SocketRocket
+    - ReactNativeDependencies
+    - RNScreens/common (= 4.28.0)
     - Yoga
-  - RNScreens/common (4.17.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNScreens/common (4.28.0):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3393,20 +2878,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - RNSVG (15.12.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNSVG (15.15.4):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3421,21 +2900,15 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNSVG/common (= 15.12.1)
-    - SocketRocket
+    - ReactNativeDependencies
+    - RNSVG/common (= 15.15.4)
     - Yoga
-  - RNSVG/common (15.12.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNSVG/common (15.15.4):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3450,20 +2923,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - RNTrueSheet (3.7.3):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3478,20 +2945,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - RNWorklets (0.6.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNWorklets (0.12.2):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3507,21 +2968,16 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNWorklets/worklets (= 0.6.1)
-    - SocketRocket
+    - ReactNativeDependencies
+    - RNWorklets/apple (= 0.12.2)
+    - RNWorklets/common (= 0.12.2)
     - Yoga
-  - RNWorklets/worklets (0.6.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNWorklets/apple (0.12.2):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3537,21 +2993,14 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNWorklets/worklets/apple (= 0.6.1)
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
-  - RNWorklets/worklets/apple (0.6.1):
-    - boost
-    - DoubleConversion
-    - fast_float
-    - fmt
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCT-Folly/Fabric
+  - RNWorklets/common (0.12.2):
+    - hermes-engine
     - RCTRequired
     - RCTTypeSafety
     - React-Core
+    - React-Core-prebuilt
     - React-debug
     - React-Fabric
     - React-featureflags
@@ -3567,7 +3016,7 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - SocketRocket
+    - ReactNativeDependencies
     - Yoga
   - SDWebImage (5.21.7):
     - SDWebImage/Core (= 5.21.7)
@@ -3581,7 +3030,6 @@ PODS:
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.17)
   - simdjson (3.9.4)
-  - SocketRocket (0.7.1)
   - TOCropViewController (2.8.0)
   - WatermelonDB (0.28.1-0):
     - React
@@ -3594,49 +3042,53 @@ PODS:
     - ZXingObjC/Core
 
 DEPENDENCIES:
-  - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`)
   - "BugsnagReactNative (from `../node_modules/@bugsnag/react-native`)"
   - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
-  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - EXApplication (from `../node_modules/expo-application/ios`)
   - EXConstants (from `../node_modules/expo-constants/ios`)
-  - EXNotifications (from `../node_modules/expo-notifications/ios`)
   - Expo (from `../node_modules/expo`)
   - ExpoAppleAuthentication (from `../node_modules/expo-apple-authentication/ios`)
   - ExpoAsset (from `../node_modules/expo-asset/ios`)
   - ExpoAudio (from `../node_modules/expo-audio/ios`)
   - ExpoCamera (from `../node_modules/expo-camera/ios`)
+  - ExpoCameraBarcodeScanning (from `../node_modules/expo-camera/ios`)
   - ExpoDevice (from `../node_modules/expo-device/ios`)
   - ExpoDocumentPicker (from `../node_modules/expo-document-picker/ios`)
+  - "ExpoDomWebView (from `../node_modules/@expo/dom-webview/ios`)"
   - ExpoFileSystem (from `../node_modules/expo-file-system/ios`)
   - ExpoFont (from `../node_modules/expo-font/ios`)
   - ExpoHaptics (from `../node_modules/expo-haptics/ios`)
   - ExpoImage (from `../node_modules/expo-image/ios`)
   - ExpoKeepAwake (from `../node_modules/expo-keep-awake/ios`)
   - ExpoLocalAuthentication (from `../node_modules/expo-local-authentication/ios`)
+  - "ExpoLogBox (from `../node_modules/@expo/log-box`)"
   - ExpoModulesCore (from `../node_modules/expo-modules-core`)
+  - ExpoModulesJSI (from `../node_modules/expo-modules-jsi/apple`)
+  - ExpoModulesWorklets (from `../node_modules/expo-modules-core`)
+  - ExpoModulesWorkletsAdapter (from `../node_modules/expo-modules-core`)
+  - ExpoNotifications (from `../node_modules/expo-notifications/ios`)
   - "ExpoQuickLook (from `../node_modules/@magrinj/expo-quick-look/ios`)"
   - ExpoSystemUI (from `../node_modules/expo-system-ui/ios`)
+  - "ExpoUI (from `../node_modules/@expo/ui/ios`)"
   - ExpoVideo (from `../node_modules/expo-video/ios`)
   - ExpoVideoThumbnails (from `../node_modules/expo-video-thumbnails/ios`)
   - ExpoWebBrowser (from `../node_modules/expo-web-browser/ios`)
-  - fast_float (from `../node_modules/react-native/third-party-podspecs/fast_float.podspec`)
   - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
-  - fmt (from `../node_modules/react-native/third-party-podspecs/fmt.podspec`)
-  - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
   - MMKV
   - MMKVCore
   - "MobileCrypto (from `../node_modules/@rocket.chat/mobile-crypto`)"
   - NitroMmkv (from `../node_modules/react-native-mmkv`)
   - NitroModules (from `../node_modules/react-native-nitro-modules`)
-  - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
   - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
   - RCTRequired (from `../node_modules/react-native/Libraries/Required`)
+  - RCTSwiftUI (from `../node_modules/react-native/ReactApple/RCTSwiftUI`)
+  - RCTSwiftUIWrapper (from `../node_modules/react-native/ReactApple/RCTSwiftUIWrapper`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../node_modules/react-native/`)
   - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`)
   - React-Core (from `../node_modules/react-native/`)
+  - React-Core-prebuilt (from `../node_modules/react-native/React-Core-prebuilt.podspec`)
   - React-Core/RCTWebSocket (from `../node_modules/react-native/`)
   - React-CoreModules (from `../node_modules/react-native/React/CoreModules`)
   - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`)
@@ -3652,6 +3104,7 @@ DEPENDENCIES:
   - React-hermes (from `../node_modules/react-native/ReactCommon/hermes`)
   - React-idlecallbacksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks`)
   - React-ImageManager (from `../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios`)
+  - React-intersectionobservernativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/intersectionobserver`)
   - React-jserrorhandler (from `../node_modules/react-native/ReactCommon/jserrorhandler`)
   - React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
   - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
@@ -3664,6 +3117,7 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
+  - React-mutationobservernativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/mutationobserver`)
   - react-native-a11y-order (from `../node_modules/react-native-a11y-order`)
   - "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
   - "react-native-cookies (from `../node_modules/@react-native-cookies/cookies`)"
@@ -3675,8 +3129,10 @@ DEPENDENCIES:
   - react-native-webrtc (from `../node_modules/react-native-webrtc`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
+  - React-networking (from `../node_modules/react-native/ReactCommon/react/networking`)
   - React-oscompat (from `../node_modules/react-native/ReactCommon/oscompat`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
+  - React-performancecdpmetrics (from `../node_modules/react-native/ReactCommon/react/performance/cdpmetrics`)
   - React-performancetimeline (from `../node_modules/react-native/ReactCommon/react/performance/timeline`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
   - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
@@ -3701,9 +3157,13 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-timing (from `../node_modules/react-native/ReactCommon/react/timing`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
-  - ReactAppDependencyProvider (from `build/generated/ios`)
-  - ReactCodegen (from `build/generated/ios`)
+  - React-viewtransitionnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/viewtransition`)
+  - React-webperformancenativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/webperformance`)
+  - ReactAppDependencyProvider (from `build/generated/ios/ReactAppDependencyProvider`)
+  - ReactCodegen (from `build/generated/ios/ReactCodegen`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - ReactNativeDependencies (from `../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec`)
+  - ReactNativeEnrichedMarkdown (from `../node_modules/react-native-enriched-markdown`)
   - ReactNativeIncallManager (from `../node_modules/react-native-incall-manager`)
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - RNCallKeep (from `../node_modules/react-native-callkeep`)
@@ -3720,13 +3180,13 @@ DEPENDENCIES:
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNKeychain (from `../node_modules/react-native-keychain`)
   - RNLocalize (from `../node_modules/react-native-localize`)
+  - RNPlainText (from `../node_modules/react-native-plain-text`)
   - 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`)"
   - RNWorklets (from `../node_modules/react-native-worklets`)
   - "simdjson (from `../node_modules/@nozbe/simdjson`)"
-  - SocketRocket (~> 0.7.1)
   - "WatermelonDB (from `../node_modules/@nozbe/watermelondb`)"
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -3757,25 +3217,18 @@ SPEC REPOS:
     - SDWebImageAVIFCoder
     - SDWebImageSVGCoder
     - SDWebImageWebPCoder
-    - SocketRocket
     - TOCropViewController
     - ZXingObjC
 
 EXTERNAL SOURCES:
-  boost:
-    :podspec: "../node_modules/react-native/third-party-podspecs/boost.podspec"
   BugsnagReactNative:
     :path: "../node_modules/@bugsnag/react-native"
   BVLinearGradient:
     :path: "../node_modules/react-native-linear-gradient"
-  DoubleConversion:
-    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
   EXApplication:
     :path: "../node_modules/expo-application/ios"
   EXConstants:
     :path: "../node_modules/expo-constants/ios"
-  EXNotifications:
-    :path: "../node_modules/expo-notifications/ios"
   Expo:
     :path: "../node_modules/expo"
   ExpoAppleAuthentication:
@@ -3786,10 +3239,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-audio/ios"
   ExpoCamera:
     :path: "../node_modules/expo-camera/ios"
+  ExpoCameraBarcodeScanning:
+    :path: "../node_modules/expo-camera/ios"
   ExpoDevice:
     :path: "../node_modules/expo-device/ios"
   ExpoDocumentPicker:
     :path: "../node_modules/expo-document-picker/ios"
+  ExpoDomWebView:
+    :path: "../node_modules/@expo/dom-webview/ios"
   ExpoFileSystem:
     :path: "../node_modules/expo-file-system/ios"
   ExpoFont:
@@ -3802,41 +3259,49 @@ EXTERNAL SOURCES:
     :path: "../node_modules/expo-keep-awake/ios"
   ExpoLocalAuthentication:
     :path: "../node_modules/expo-local-authentication/ios"
+  ExpoLogBox:
+    :path: "../node_modules/@expo/log-box"
   ExpoModulesCore:
     :path: "../node_modules/expo-modules-core"
+  ExpoModulesJSI:
+    :path: "../node_modules/expo-modules-jsi/apple"
+  ExpoModulesWorklets:
+    :path: "../node_modules/expo-modules-core"
+  ExpoModulesWorkletsAdapter:
+    :path: "../node_modules/expo-modules-core"
+  ExpoNotifications:
+    :path: "../node_modules/expo-notifications/ios"
   ExpoQuickLook:
     :path: "../node_modules/@magrinj/expo-quick-look/ios"
   ExpoSystemUI:
     :path: "../node_modules/expo-system-ui/ios"
+  ExpoUI:
+    :path: "../node_modules/@expo/ui/ios"
   ExpoVideo:
     :path: "../node_modules/expo-video/ios"
   ExpoVideoThumbnails:
     :path: "../node_modules/expo-video-thumbnails/ios"
   ExpoWebBrowser:
     :path: "../node_modules/expo-web-browser/ios"
-  fast_float:
-    :podspec: "../node_modules/react-native/third-party-podspecs/fast_float.podspec"
   FBLazyVector:
     :path: "../node_modules/react-native/Libraries/FBLazyVector"
-  fmt:
-    :podspec: "../node_modules/react-native/third-party-podspecs/fmt.podspec"
-  glog:
-    :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
-    :tag: hermes-2025-07-07-RNv0.81.0-e0fc67142ec0763c6b6153ca2bf96df815539782
+    :tag: hermes-v250829098.0.17
   MobileCrypto:
     :path: "../node_modules/@rocket.chat/mobile-crypto"
   NitroMmkv:
     :path: "../node_modules/react-native-mmkv"
   NitroModules:
     :path: "../node_modules/react-native-nitro-modules"
-  RCT-Folly:
-    :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTDeprecation:
     :path: "../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation"
   RCTRequired:
     :path: "../node_modules/react-native/Libraries/Required"
+  RCTSwiftUI:
+    :path: "../node_modules/react-native/ReactApple/RCTSwiftUI"
+  RCTSwiftUIWrapper:
+    :path: "../node_modules/react-native/ReactApple/RCTSwiftUIWrapper"
   RCTTypeSafety:
     :path: "../node_modules/react-native/Libraries/TypeSafety"
   React:
@@ -3845,6 +3310,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/callinvoker"
   React-Core:
     :path: "../node_modules/react-native/"
+  React-Core-prebuilt:
+    :podspec: "../node_modules/react-native/React-Core-prebuilt.podspec"
   React-CoreModules:
     :path: "../node_modules/react-native/React/CoreModules"
   React-cxxreact:
@@ -3873,6 +3340,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/idlecallbacks"
   React-ImageManager:
     :path: "../node_modules/react-native/ReactCommon/react/renderer/imagemanager/platform/ios"
+  React-intersectionobservernativemodule:
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/intersectionobserver"
   React-jserrorhandler:
     :path: "../node_modules/react-native/ReactCommon/jserrorhandler"
   React-jsi:
@@ -3897,6 +3366,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   React-microtasksnativemodule:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
+  React-mutationobservernativemodule:
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/mutationobserver"
   react-native-a11y-order:
     :path: "../node_modules/react-native-a11y-order"
   react-native-cameraroll:
@@ -3919,10 +3390,14 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-webview"
   React-NativeModulesApple:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios"
+  React-networking:
+    :path: "../node_modules/react-native/ReactCommon/react/networking"
   React-oscompat:
     :path: "../node_modules/react-native/ReactCommon/oscompat"
   React-perflogger:
     :path: "../node_modules/react-native/ReactCommon/reactperflogger"
+  React-performancecdpmetrics:
+    :path: "../node_modules/react-native/ReactCommon/react/performance/cdpmetrics"
   React-performancetimeline:
     :path: "../node_modules/react-native/ReactCommon/react/performance/timeline"
   React-RCTActionSheet:
@@ -3971,12 +3446,20 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/timing"
   React-utils:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
+  React-viewtransitionnativemodule:
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/viewtransition"
+  React-webperformancenativemodule:
+    :path: "../node_modules/react-native/ReactCommon/react/nativemodule/webperformance"
   ReactAppDependencyProvider:
-    :path: build/generated/ios
+    :path: build/generated/ios/ReactAppDependencyProvider
   ReactCodegen:
-    :path: build/generated/ios
+    :path: build/generated/ios/ReactCodegen
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  ReactNativeDependencies:
+    :podspec: "../node_modules/react-native/third-party-podspecs/ReactNativeDependencies.podspec"
+  ReactNativeEnrichedMarkdown:
+    :path: "../node_modules/react-native-enriched-markdown"
   ReactNativeIncallManager:
     :path: "../node_modules/react-native-incall-manager"
   RNBootSplash:
@@ -4009,6 +3492,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-keychain"
   RNLocalize:
     :path: "../node_modules/react-native-localize"
+  RNPlainText:
+    :path: "../node_modules/react-native-plain-text"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
   RNScreens:
@@ -4027,34 +3512,38 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
-  BugsnagReactNative: 2078dec76e54db9f6e687743af45dc3673cb32ab
-  BVLinearGradient: 7815a70ab485b7b155186dd0cc836363e0288cad
-  DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
-  EXApplication: 1e98d4b1dccdf30627f92917f4b2c5a53c330e5f
-  EXConstants: 805f35b1b295c542ca6acce836f21a1f9ee104d5
-  EXNotifications: 983f04ad4ad879b181179e326bf220541e478386
-  Expo: 6118272de314ed3d4bc74de3b1229b8f5b324ef1
-  ExpoAppleAuthentication: 9413ae9a5e631a424cc04c1b13b0694dbab7d594
-  ExpoAsset: f867e55ceb428aab99e1e8c082b5aee7c159ea18
-  ExpoAudio: d98f922b17a945cd33f8462d086278dbd810c537
-  ExpoCamera: 6a326deb45ba840749652e4c15198317aa78497e
-  ExpoDevice: 6327c3c200816795708885adf540d26ecab83d1a
-  ExpoDocumentPicker: 7cd9e71a0f66fb19eb0a586d6f26eee1284692e0
-  ExpoFileSystem: 858a44267a3e6e9057e0888ad7c7cfbf55d52063
-  ExpoFont: 35ac6191ed86bbf56b3ebd2d9154eda9fad5b509
-  ExpoHaptics: d3a6375d8dcc3a1083d003bc2298ff654fafb536
-  ExpoImage: 686f972bff29525733aa13357f6691dc90aa03d8
-  ExpoKeepAwake: 55f75eca6499bb9e4231ebad6f3e9cb8f99c0296
-  ExpoLocalAuthentication: 8a31808565da7af926dd9b595e98594d8b1553b6
-  ExpoModulesCore: 91a57f1d109cf53fe58d44fcf6b68a777561549a
+  BugsnagReactNative: 33c924422b4d4fac76459ac818500586dd53debf
+  BVLinearGradient: cb006ba232a1f3e4f341bb62c42d1098c284da70
+  EXApplication: a727f05eb8592f0bc764f6ab8d51eacc158652ec
+  EXConstants: 8948a340eb14bf2bdaaa0e21a63cb9343860b87a
+  Expo: dfda0a34acc90766241acc0ba214badf45330567
+  ExpoAppleAuthentication: 16c2955d33ec7315e5a99d17fb5d62ed33cdb5b9
+  ExpoAsset: b3999ffb3d4049b6c870708c60ea2209ace9f170
+  ExpoAudio: edc9230b788be6f65238a53907d5c176b57a7ce0
+  ExpoCamera: c4c16b83b6db376e5a0e538fe2a04deafbb5b6d8
+  ExpoCameraBarcodeScanning: 69275ab8ecd76f338da22df825c59405bcf36472
+  ExpoDevice: 5c638e530304a51992263ab5c1cab726f992b9dc
+  ExpoDocumentPicker: fe03a24855e39af0f9b5aee17e7eb4813f6e44a6
+  ExpoDomWebView: beaec034e51bd028428b98bb1f2633ab79c6d095
+  ExpoFileSystem: 28778f942725170102f7c6cf4dee05a526ddacd0
+  ExpoFont: f8198a952ba2ff53c9b393b5269ea435f232cfc3
+  ExpoHaptics: 32efd02d88953d30a5c2ff796c0fce692e7bcd2e
+  ExpoImage: abe60c6c68d08d837b2c51fb9e8b6c6e320b9125
+  ExpoKeepAwake: 72af0b3be3615e59bc819d26061ff4e06b155ee0
+  ExpoLocalAuthentication: 1e4aef156a3a1f953f8278b8d8309f6118919640
+  ExpoLogBox: 80957303325cd4439137765c90a87d7f22aaf2ff
+  ExpoModulesCore: a220d034f6873d06db8ee66af1b33fca51c65318
+  ExpoModulesJSI: 21c947f0cc559401c86995dad7a0b1112c7fd656
+  ExpoModulesWorklets: 986cf72c18400743869b4642d243115f831e404d
+  ExpoModulesWorkletsAdapter: ae4dd675418c2bbdf802ae74f7f78442e7010ab7
+  ExpoNotifications: 098f80e610228da37ee98c0828931337cf5b1106
   ExpoQuickLook: 7ac65cd559a74619ea41e13df20e9d7a61e79ea6
-  ExpoSystemUI: 2ad325f361a2fcd96a464e8574e19935c461c9cc
-  ExpoVideo: 8d9e8a1acd0c4c210e538b4355e34ae8ff5e04f7
-  ExpoVideoThumbnails: 503a79271416c8723f04b55ea4737282513ebe4f
-  ExpoWebBrowser: 17b064c621789e41d4816c95c93f429b84971f52
-  fast_float: b32c788ed9c6a8c584d114d0047beda9664e7cc6
-  FBLazyVector: 5beb8028d5a2e75dd9634917f23e23d3a061d2aa
+  ExpoSystemUI: 05ee8d4aaba1b6af330f3621e19b39ff9f21e718
+  ExpoUI: 98d4650d9d32daaf772597adc76525c645b1ff76
+  ExpoVideo: 56ed2863b981dd5ae946d8ef23ecfcae855863a0
+  ExpoVideoThumbnails: da5d471c170bf4110f681b6649524eace9c95b5b
+  ExpoWebBrowser: a4d7c382116fbe33c1ec7f60293f02b7e97042e4
+  FBLazyVector: 2138c6c2ab66c31bf5754dc18097fbc498a49c7f
   Firebase: 6a8f201c61eda24e98f1ce2b44b1b9c2caf525cc
   FirebaseAnalytics: acfa848bf81e1a4dbf60ef1f0eddd7328fe6673e
   FirebaseCore: 2321536f9c423b1f857e047a82b8a42abc6d9e2c
@@ -4064,129 +3553,137 @@ SPEC CHECKSUMS:
   FirebaseInstallations: 781e0e37aa0e1c92b44d00e739aba79ad31b2dba
   FirebaseRemoteConfigInterop: 1c6135e8a094cc6368949f5faeeca7ee8948b8aa
   FirebaseSessions: f5c6bfeb66a7202deaf33352017bb6365e395820
-  fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
-  glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   GoogleAppMeasurement: 8a82b93a6400c8e6551c0bcd66a9177f2e067aed
   GoogleDataTransport: aae35b7ea0c09004c3797d53c8c41f66f219d6a7
   GoogleUtilities: 00c88b9a86066ef77f0da2fab05f65d7768ed8e1
-  hermes-engine: 9f4dfe93326146a1c99eb535b1cb0b857a3cd172
+  hermes-engine: 63c5db7d529c36335fada6582fd293ae2a105d77
   JitsiWebRTC: b47805ab5668be38e7ee60e2258f49badfe8e1d0
   libavif: 5f8e715bea24debec477006f21ef9e95432e254d
   libdav1d: 23581a4d8ec811ff171ed5e2e05cd27bad64c39f
   libwebp: 02b23773aedb6ff1fd38cec7a77b81414c6842a8
-  MMKV: 1a8e7dbce7f9cad02c52e1b1091d07bd843aefaf
-  MMKVCore: f2dd4c9befea04277a55e84e7812f930537993df
-  MobileCrypto: cbe4be11a33b5888e77861de9346fa5d3fccc8ac
+  MMKV: 86859fdfa2b0b21db1fd6e48788474a6416a2c77
+  MMKVCore: 3d16ce9f7d411e135020915fde98a056859a1efa
+  MobileCrypto: 182433a43bce9ff7ac5b0a46ca09e907b5194e92
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
-  NitroMmkv: 4a2d747ce97a4ae740b3cb3a3853366813faf831
-  NitroModules: 18e41c298d86fc753fc754969fa9f84044e70711
+  NitroMmkv: 38b271a19e7e152025a6893160c98326872ea05f
+  NitroModules: 6232dc95a28a7a221227e618733ce0e674e8753b
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
-  RCT-Folly: 846fda9475e61ec7bcbf8a3fe81edfcaeb090669
-  RCTDeprecation: 5eb1d2eeff5fb91151e8a8eef45b6c7658b6c897
-  RCTRequired: cebcf9442fc296c9b89ac791dfd463021d9f6f23
-  RCTTypeSafety: b99aa872829ee18f6e777e0ef55852521c5a6788
-  React: 914f8695f9bf38e6418228c2ffb70021e559f92f
-  React-callinvoker: 23cd4e33928608bd0cc35357597568b8b9a5f068
-  React-Core: 6a0a97598e9455348113bfe4c573fe8edac34469
-  React-CoreModules: a88a6ca48b668401b9780e272e2a607e70f9f955
-  React-cxxreact: 06265fd7e8d5c3b6b49e00d328ef76e5f1ae9c8b
-  React-debug: 29aed758c756956a51b4560223edbd15191ca4c5
-  React-defaultsnativemodule: c406bf7cd78036efffb7dec9df469257a1bca58c
-  React-domnativemodule: 925ea5ff8cb05c68e910057e6349e5898cce00f3
-  React-Fabric: 13130d0a70f17e913865b04673ee64603d6c42fe
-  React-FabricComponents: 1f01ea24a1314bf9abcac4743bb7ad8791336be6
-  React-FabricImage: f364dc54fcf8b0ef77192674a009aa4f65b34d75
-  React-featureflags: 32217ac18a8c216fc571044186fb04164af72772
-  React-featureflagsnativemodule: 9c552bb908a7434baa846002ee1752a77b1a5520
-  React-graphics: 3034a698e46e947f74a443e761f1feef742e9d71
-  React-hermes: a852be3ab9e1f515e46ba3ea9f48c31d4a9df437
-  React-idlecallbacksnativemodule: c43fe1f2221b0548cc366bf15f88efb3b3221bbf
-  React-ImageManager: 7efd7b19cdfaa3a82482e9e6ac0b56606a3ec271
-  React-jserrorhandler: 597057d0b9d158c03e02aa376a4a95f64f46a910
-  React-jsi: 7b53959aea60909ac6bbe4dd0bdec6c10d7dc597
-  React-jsiexecutor: 19938072af05ade148474bac41e0324a2d733f44
-  React-jsinspector: eb6bb244a75cbd56f32767daf2efdb344e2ff10c
-  React-jsinspectorcdp: 727f37537e9c7ab22b6b86c802d879efae5e2757
-  React-jsinspectornetwork: 11d47e644701c58038ef8d7f54a405ddd62b3b16
-  React-jsinspectortracing: 8875637e6c65b3b9a3852b006856562e874e7a78
-  React-jsitooling: b6e6a2551459a6ef9e1529df2ea981fa27ed3a91
-  React-jsitracing: 879e2b2f80dd33d84175989de0a8db5d662505db
-  React-logger: a913317214a26565cd4c045347edf1bcacb80a3f
-  React-Mapbuffer: 017336879e2e0fb7537bbc08c24f34e2384c9260
-  React-microtasksnativemodule: 63ee6730cec233feab9cdcc0c100dc28a12e4165
-  react-native-a11y-order: 20b33ff538af60d8b8a7f7284115a7febc9034d4
-  react-native-cameraroll: ae31ba7ee17d31c5ee05d7bb248742e3af482783
+  RCTDeprecation: 96f68ebf33f8762466b01d57d6e873c4f30efb07
+  RCTRequired: 166eed8ad6d8440e73e56d09a9090366609823d2
+  RCTSwiftUI: e818198d11928a78c2b2afe281d072171dab617f
+  RCTSwiftUIWrapper: b9457f8613a1d0c8146c08844a04154702ff8809
+  RCTTypeSafety: efc19e6b92931abf0b68b064212323a258a5f019
+  React: 52dce66f71097ed7a4968673d95eeb8095ded74e
+  React-callinvoker: afa0525ab27f4ffbb4c377f855fe9368edb099bc
+  React-Core: fdb67992e049f2526ade3e258c21b8404e7943a3
+  React-Core-prebuilt: 9abc518a8aa7aa4fa3bbbe52bc825bcd9fb3c3ce
+  React-CoreModules: 456d91152aa283ddc6ae8abfcec3292af88912f6
+  React-cxxreact: 73a20c0dde5ec221f98d5e4da0e71349ab48353d
+  React-debug: 4a1d2ef3086d88dd35f28cfb5da803584f819924
+  React-defaultsnativemodule: 65c2620e6e8b3426fe227fa546425395fad38b9d
+  React-domnativemodule: 9fa0a7b5ed12355add4e56b6c44c18afd4a7b409
+  React-Fabric: 9f83fc6b78f3717dc7c0d98ecbee5e18f1849c6a
+  React-FabricComponents: eacd7040d74c3c8f0f400a0f53870a24dc1c70b0
+  React-FabricImage: 3e6ccf1e63427426334e239699d1989c289fe8e8
+  React-featureflags: 0856ddd67965e449ad24d27b8d9b166b9904523f
+  React-featureflagsnativemodule: 9fd134748e9befe3766bce575570dbf6666bad1a
+  React-graphics: 37e133f18290451de3c05306d21c2964053b651e
+  React-hermes: 65cfbf62d8d31c1e69f3556ff6836a2890cf4a62
+  React-idlecallbacksnativemodule: 5a6dd45a2fa8ae6373ed5dd9547e98d15a8ba61c
+  React-ImageManager: 9f554c1e6340161c22d6c01291d0b773167a6c36
+  React-intersectionobservernativemodule: 8882f818e84fe44d8246f9e25f4a6621e7cd2d08
+  React-jserrorhandler: 8c8db1ad69aed9556c4f2083c82c902901b0171e
+  React-jsi: 69052b2d1958c9069a143f1637f382b933917b43
+  React-jsiexecutor: b9b98ea432f58ee2899a60204f090d0bc8d48313
+  React-jsinspector: 5b1972a5cea8b6dd8170f88f532493a333c8d74b
+  React-jsinspectorcdp: ab3fcfaa5c149f8fc5d5e8274eb9bfcecf4e5cc3
+  React-jsinspectornetwork: c533e6e6bdc6a7d3477a3e46886707cc6b9bd715
+  React-jsinspectortracing: 0775adf8a09823fce36b21f95a3caad06c4fa168
+  React-jsitooling: c9c3e7cea49b264bf1f89f998673310bc37908a2
+  React-jsitracing: 6293ec5716e46c568aaf4ffe766f4c5c5e1d69e7
+  React-logger: b9bf04943233973fece220497f0784eaad409b3a
+  React-Mapbuffer: e05fcc335c004b3b2a45889244c5c27bbbfad64c
+  React-microtasksnativemodule: 27f8495905481c29ac6acd0e37313b3fbfb17cf0
+  React-mutationobservernativemodule: 012f3688a7e96d459e5d787264724875939f6f43
+  react-native-a11y-order: c1727d69dda91472e3479e2fdea0832fa8d426ae
+  react-native-cameraroll: d7e55dae97acb52c4ce88a32deb02841fa15de12
   react-native-cookies: d648ab7025833b977c0b19e142503034f5f29411
-  react-native-external-keyboard: db51d3a78d68c1f87fef41c67353a7c0ddbe51dd
-  react-native-keyboard-controller: c4ca61f44d66c2f8987a7e67e9b78e80dc965c45
-  react-native-netinfo: cec9c4e86083cb5b6aba0e0711f563e2fbbff187
-  react-native-safe-area-context: 0a3b034bb63a5b684dd2f5fffd3c90ef6ed41ee8
-  react-native-slider: 6201419b3e3f7c6b7cf2068e0c01274fa86a1da5
+  react-native-external-keyboard: f89ea61eb77875621a1ad086769d829da8ae3fcd
+  react-native-keyboard-controller: c5ba8bf515b500ecb3692bc5ecc944c6be4b3290
+  react-native-netinfo: a05f9b897e76ad24b53f615fed1cbb731932363d
+  react-native-safe-area-context: 678f254e77e69986ae9d9e62721f152e73dbc76b
+  react-native-slider: b15258ac3d287a5951f76b11497d659ed20c0def
   react-native-webrtc: e8f0ce746353adc2744a2b933645e1aeb41eaa74
-  react-native-webview: 83c663c5bdf1357d3e7c00986260cb888ea0e328
-  React-NativeModulesApple: cbceb3c4cb726838c461b13802a76cefa6f3476f
-  React-oscompat: eb0626e8ba1a2c61673c991bf9dc21834898475d
-  React-perflogger: 509e1f9a3ee28df71b0a66de806ac515ce951246
-  React-performancetimeline: 9ce28cce1cded27410c293283f99fe62bebdb920
-  React-RCTActionSheet: 30fe8f9f8d86db4a25ff34595a658ecd837485fc
-  React-RCTAnimation: 3126eb1cb8e7a6ca33a52fd833d8018aa9311af1
-  React-RCTAppDelegate: b03981c790aa40cf26e0f78cc0f1f2df8287ead4
-  React-RCTBlob: 53c35e85c85d6bdaa55dc81a0b290d4e78431095
-  React-RCTFabric: 59ad9008775f123019c508efff260594a8509791
-  React-RCTFBReactNativeSpec: 82b605ab4f6f8da0a7ad88641161df5a0bafb1fb
-  React-RCTImage: 074b2faa71a152a456c974e118b60c9eeda94a64
-  React-RCTLinking: e5ca17a4f7ae2ad7b0c0483be77e1b383ecd0a8a
-  React-RCTNetwork: c508d7548c9eceac30a8100a846ea00033a03366
-  React-RCTRuntime: 6979568c0bc276fe785e085894f954fa15e0ec7e
-  React-RCTSettings: dd84c857a4fce42c1e08c1dabcda894e25af4a6e
-  React-RCTText: 6e4b177d047f98bccb90d6fb1ebdd3391cf8b299
-  React-RCTVibration: 9572d4a06a0c92650bcc62913e50eb2a89f19fb6
-  React-rendererconsistency: a7b47f8b186af64ff8509c8caec4114a2f1ae63f
-  React-renderercss: 9845c5063b3a2d0462ed4e4c7fc34219a5d608ed
-  React-rendererdebug: 3905e346c06347b86c6e49d427062cdd638a3044
-  React-RuntimeApple: 97233caf2b635c40819bf5be38d818777f8229ab
-  React-RuntimeCore: dc41f86fcdf1fbb42a5b8388a29bf59dfa56b2f8
-  React-runtimeexecutor: d16d045faaf6cd7de8d1aa8e31a51c13d8db84a4
-  React-RuntimeHermes: 5a9d132554c8d6b416d794cd4ac7d927b2f88f7b
-  React-runtimescheduler: 689d805d43c28b8fb1ab390914e042d10e2ea2ab
-  React-timing: c39eeb992274aeaeb9f4666dc97a36a31d33fe94
-  React-utils: 2f9ba0088251788ad66aa1855ff99ed2424024d2
-  ReactAppDependencyProvider: 1bcd3527ac0390a1c898c114f81ff954be35ed79
-  ReactCodegen: 7fadc30654a54b3a0d62df08f55e2211e25486ee
-  ReactCommon: 6d0fa86a4510730da7c72560e0ced14258292ab9
+  react-native-webview: 2a4da2e03d3ec2c731c4d1a389cb86aaa4902167
+  React-NativeModulesApple: 2b658272ca69df0694cf5d54f9510aa7c33977bc
+  React-networking: 8ff98fbf96752706ec66ccc1d0089c1005a5be11
+  React-oscompat: cea7c66df8076bd97e95885d7f584b86afffde41
+  React-perflogger: 9110ba33a4aa70c708e9d50aeca040e6f2aefaf7
+  React-performancecdpmetrics: 6c158ff2e7a8ecf9a4618350b93b86e83d4f3b59
+  React-performancetimeline: a6c41ea140789bbeacb60a123ae34cf18abd7b9d
+  React-RCTActionSheet: aeb20277150454e9020517c6a2cb70410d4856d9
+  React-RCTAnimation: 8453deeb01d0f284202c9670b5f7d827575b4967
+  React-RCTAppDelegate: 5e9c748cc138decd9045683d8987700d824a99ff
+  React-RCTBlob: e6c01cae3eeb7e63a55b12f72b7dfcfd8236b4b2
+  React-RCTFabric: a641da4b62d3eab2479dfc057190740bb83a5989
+  React-RCTFBReactNativeSpec: 7a20b043840a40f790e47c2fc79f28f54dd8eae1
+  React-RCTImage: ec8488bc119d7e5d3209f85be3ebda7e4a937c61
+  React-RCTLinking: b6ff56c2f206127d49d338262418c097ea306ad0
+  React-RCTNetwork: 08d71b365278511a9bb07885b4a54bdc510d99bf
+  React-RCTRuntime: 9b306501174b368a4ded95bc86934bffe54e1bf5
+  React-RCTSettings: 372551bc9f30d26890f5c5fd569dcd15243c656c
+  React-RCTText: 62cff7e93aeb3c06e3634f1c59984e8c5322b542
+  React-RCTVibration: 2e8c1630ae80c092f437db9638a03715f616ac03
+  React-rendererconsistency: 86b56864046a6622bcbf829db78e3dcbb15462b1
+  React-renderercss: a1457503aef12d882e530a9fefc9f475fc46443c
+  React-rendererdebug: 4ccd491bef79e3bfa6b9ac3424ebec5c1e8c795e
+  React-RuntimeApple: f3e01025b46b99e089b1170b81d428bdc1d4260a
+  React-RuntimeCore: 7db4a36cccb24f8374ccfb887c46577c11955625
+  React-runtimeexecutor: 6e11e5addf6d1d1dcff16359a298c0726f0c4f31
+  React-RuntimeHermes: c124599239ce984c1bafabbce975c9c5595ead53
+  React-runtimescheduler: bdcc80a052783ccbf9dd6aade14072618599736e
+  React-timing: 9b5e7d1b657745cd88398d04b8c042debc22ac82
+  React-utils: 8c00679add05bd780264773f7582582b4e9db95d
+  React-viewtransitionnativemodule: e89719ba504600d18f59eec5a104ffb3cac7cb80
+  React-webperformancenativemodule: f94d244822b5413c8ce3fb542e41976e7a202e50
+  ReactAppDependencyProvider: bb350d1333fd459c1aabe782088419a9b8894d3a
+  ReactCodegen: 4acb96173b6ecf8bb9a42044614b848dcfbc4fc6
+  ReactCommon: 02f6a489d5eb4ab79d7deba5cd4434e0ba351a07
+  ReactNativeDependencies: 6738e602b46fd24aa453cd58267ec3bb8bf29d27
+  ReactNativeEnrichedMarkdown: e1daa0dc301192ffbae33ddf73e284d5a47d562b
   ReactNativeIncallManager: dccd3e7499caa3bb73d3acfedf4fb0360f1a87d5
-  RNBootSplash: 7fcc9a58ae343aeb1a1dd49f9030832fe432c544
+  RNBootSplash: 768ba7c7983ab8415dce47ac54815acd4f5ae843
   RNCallKeep: 1930a01d8caf48f018be4f2db0c9f03405c2f977
-  RNCAsyncStorage: fd44f4b03e007e642e98df6726737bc66e9ba609
-  RNCClipboard: e560338bf6cc4656a09ff90610b62ddc0dbdad65
-  RNCMaskedView: d707a83784c67099b54b37d056ababb2767ce15e
-  RNCPicker: 35fc66f352403cdfe99d53b541f5180482ca2bc5
-  RNDateTimePicker: ca1dc7e24d0b4839877f0ab619e7bca5db715289
+  RNCAsyncStorage: d90e523830fa7705f8c61632479abde871bc792f
+  RNCClipboard: 7a7d4557bfd3370b35c99dfecd92ae7b9fc4948a
+  RNCMaskedView: 8069b4d4e23b3d28b4fcac70bf266be43ffc3d2e
+  RNCPicker: a3921be99ae291e420e3e8940e5b2b53e572c543
+  RNDateTimePicker: afe0288e6c7855994f7f2617b7b2c05799fea7f3
   RNDeviceInfo: 900bd20e1fd3bfd894e7384cc4a83880c0341bd3
   RNFBAnalytics: 2e8b8ffcd2bb3d59a43ecbe09571c73c56edef7a
   RNFBApp: a448037d2df74af9d374a0b765be12ff1e844dc0
   RNFBCrashlytics: c3bb5533f9957eddc88f3ea383583309a4ce9f89
-  RNGestureHandler: b8d2e75c2e88fc2a1f6be3b3beeeed80b88fa37d
-  RNImageCropPicker: 0a63af4b79e514c1edd6c3152f19300c5ed85312
-  RNKeychain: 76d042fc1dfba47f3945920bc82e0bce9ad1ff55
-  RNLocalize: c46dd4008dc8990a098fcafd6ee051122a1ccfda
-  RNReanimated: e1690cdd7f215cfb96a3b7986b81889867dfdb4f
-  RNScreens: ccfcc2f7d9c0d458b7fc41b3f4f0bea054602b3a
-  RNSVG: 94a1be05fab4043354bcf7104f0f9b0e2231ef05
-  RNTrueSheet: 53f29088da313dabff8b81d7c4d52afd8e609cfa
-  RNWorklets: ab618bf7d1c7fd2cb793b9f0f39c3e29274b3ebf
+  RNGestureHandler: 85e32defcf23dd3b023356355c5c1dd1d9d51bde
+  RNImageCropPicker: 5c9c8bef4c72d3f451b499aa0ecd90a644ea1bbd
+  RNKeychain: d57edf101a72acf3ae85fe4d796eed1d951d2a90
+  RNLocalize: 17bce0556e2d33fe1201c8cef53b3b7786e07612
+  RNPlainText: 3b6117ad475ad861bc45988e133b465b2e335c2a
+  RNReanimated: c57ef141c7843c2849531e7556236d7223b7db1a
+  RNScreens: 8708989f700bdc3dc5abc3c77aa3b5f3e73ce2b2
+  RNSVG: 68c366b996064ea99cee1e55da62b8feafb33a78
+  RNTrueSheet: 93f1765e65782ef6de12fd9338061a51399bb337
+  RNWorklets: 453d16f4cb680d5a4262b314519711e7765a80a1
   SDWebImage: e9fc87c1aab89a8ab1bbd74eba378c6f53be8abf
   SDWebImageAVIFCoder: afe194a084e851f70228e4be35ef651df0fc5c57
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   simdjson: 7bb9e33d87737cec966e7b427773c67baa4458fe
-  SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   TOCropViewController: 797deaf39c90e6e9ddd848d88817f6b9a8a09888
   WatermelonDB: 4c846c8cb94eef3cba90fa034d15310163226703
-  Yoga: 1e91d83a5286cfd3b725eade59274c92270540d4
+  Yoga: 269d501078efa6b25cd57f7f326fc3da213580be
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
-PODFILE CHECKSUM: 9ef0d302aac0150cec49089c7c416db32bb9d3ec
+PODFILE CHECKSUM: 3ef18da69ac141a16cded1b74c0bc71b2f7216a7
 
 COCOAPODS: 1.15.2
diff --git a/ios/RocketChat.xcodeproj/project.pbxproj b/ios/RocketChat.xcodeproj/project.pbxproj
index a37be2d721d..e9daf9f0433 100644
--- a/ios/RocketChat.xcodeproj/project.pbxproj
+++ b/ios/RocketChat.xcodeproj/project.pbxproj
@@ -143,6 +143,7 @@
 		65B9A71B2AFC24190088956F /* ringtone.mp3 in Resources */ = {isa = PBXBuildFile; fileRef = 65B9A7192AFC24190088956F /* ringtone.mp3 */; };
 		66C2701C2EBBCB570062725F /* MMKVKeyManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = 66C2701A2EBBCB570062725F /* MMKVKeyManager.mm */; };
 		66C2701D2EBBCB570062725F /* MMKVKeyManager.mm in Sources */ = {isa = PBXBuildFile; fileRef = 66C2701A2EBBCB570062725F /* MMKVKeyManager.mm */; };
+		6F204E445C3D44699793D4F8 /* SceneDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 680FA18DB475479CAD48F334 /* SceneDelegate.swift */; };
 		6FA7E2392F28A9D300A1D45E /* ExternalInputModule.m in Sources */ = {isa = PBXBuildFile; fileRef = 6FA7E2372F28A9D300A1D45E /* ExternalInputModule.m */; };
 		782E0520ED599FF8DDC2318F /* Pods_defaults_Rocket_Chat.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 88ED4E003393D3A9256F4EB3 /* Pods_defaults_Rocket_Chat.framework */; };
 		79D8C97F8CE2EC1B6882826B /* SecureStorage.m in Sources */ = {isa = PBXBuildFile; fileRef = 9B215A42CFB843397273C7EA /* SecureStorage.m */; };
@@ -214,6 +215,8 @@
 		7AE10C0828A59530003593CB /* Inter.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 7AE10C0528A59530003593CB /* Inter.ttf */; };
 		7AVR00022F5F5900002A6BDE /* VoipRegion.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7AVR00002F5F5900002A6BDE /* VoipRegion.swift */; };
 		85160EB6C143E0493FE5F014 /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 194D9A8897F4A486C2C6F89A /* ExpoModulesProvider.swift */; };
+		A1C0E0022F90000000C0FFEE /* AppIcon.icon in Resources */ = {isa = PBXBuildFile; fileRef = A1C0E0012F90000000C0FFEE /* AppIcon.icon */; };
+		A1C0E0032F90000000C0FFEE /* AppIcon.icon in Resources */ = {isa = PBXBuildFile; fileRef = A1C0E0012F90000000C0FFEE /* AppIcon.icon */; };
 		A48B46DA2D3FFBD200945489 /* A11yFlowModule.m in Sources */ = {isa = PBXBuildFile; fileRef = A48B46D82D3FFBD200945489 /* A11yFlowModule.m */; };
 		B1E1F0022F03A00000EXT002 /* ExternalInputModule.m in Sources */ = {isa = PBXBuildFile; fileRef = B1E1F0042F03A00000EXT004 /* ExternalInputModule.m */; };
 		B1E1F0062F03A00000EXT006 /* GameController.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B1E1F0072F03A00000EXT007 /* GameController.framework */; };
@@ -428,6 +431,7 @@
 		65B9A7192AFC24190088956F /* ringtone.mp3 */ = {isa = PBXFileReference; lastKnownFileType = audio.mp3; path = ringtone.mp3; sourceTree = "<group>"; };
 		66C270192EBBCB570062725F /* MMKVKeyManager.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = MMKVKeyManager.h; sourceTree = "<group>"; };
 		66C2701A2EBBCB570062725F /* MMKVKeyManager.mm */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.objcpp; path = MMKVKeyManager.mm; sourceTree = "<group>"; };
+		680FA18DB475479CAD48F334 /* SceneDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SceneDelegate.swift; sourceTree = "<group>"; };
 		6FA7E2362F28A9D300A1D45E /* ExternalInputModule.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = ExternalInputModule.h; sourceTree = "<group>"; };
 		6FA7E2372F28A9D300A1D45E /* ExternalInputModule.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = ExternalInputModule.m; sourceTree = "<group>"; };
 		7A0000032F1BAFA700B6B4BD /* VoipService.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = VoipService.swift; sourceTree = "<group>"; };
@@ -459,6 +463,7 @@
 		9BE2F3DC02A264F204E3EDE3 /* DDPClient.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; path = DDPClient.swift; sourceTree = "<group>"; };
 		9E19E897C464DE3A91E1DAFD /* Pods-defaults-NotificationService.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-defaults-NotificationService.debug.xcconfig"; path = "Target Support Files/Pods-defaults-NotificationService/Pods-defaults-NotificationService.debug.xcconfig"; sourceTree = "<group>"; };
 		9F66BEF98C5CF2CFDD4B4C87 /* Pods-defaults-RocketChatRN.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-defaults-RocketChatRN.release.xcconfig"; path = "Target Support Files/Pods-defaults-RocketChatRN/Pods-defaults-RocketChatRN.release.xcconfig"; sourceTree = "<group>"; };
+		A1C0E0012F90000000C0FFEE /* AppIcon.icon */ = {isa = PBXFileReference; lastKnownFileType = folder.iconcomposer.icon; path = AppIcon.icon; sourceTree = "<group>"; };
 		A48B46D72D3FFBD200945489 /* A11yFlowModule.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = A11yFlowModule.h; sourceTree = "<group>"; };
 		A48B46D82D3FFBD200945489 /* A11yFlowModule.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = A11yFlowModule.m; sourceTree = "<group>"; };
 		B179038FDD7AAF285047814B /* SecureStorage.h */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.c.h; path = SecureStorage.h; sourceTree = "<group>"; };
@@ -519,6 +524,7 @@
 				6FA7E2362F28A9D300A1D45E /* ExternalInputModule.h */,
 				6FA7E2372F28A9D300A1D45E /* ExternalInputModule.m */,
 				7ACFE7D82DDE48760090D9BC /* AppDelegate.swift */,
+				680FA18DB475479CAD48F334 /* SceneDelegate.swift */,
 				B1E1F0032F03A00000EXT003 /* ExternalInputModule.h */,
 				B1E1F0042F03A00000EXT004 /* ExternalInputModule.m */,
 				65B9A7192AFC24190088956F /* ringtone.mp3 */,
@@ -527,6 +533,7 @@
 				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				7A14FCF3257FEB59005BDCD4 /* Assets.xcassets */,
+				A1C0E0012F90000000C0FFEE /* AppIcon.icon */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				7AAA749C23043B1D00F1ADE9 /* RocketChatRN-Bridging-Header.h */,
 				7A0D62D1242AB187006D5C06 /* LaunchScreen.storyboard */,
@@ -1196,6 +1203,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				1ED1ECEA2B869A4A00F6620C /* Assets.xcassets in Resources */,
+				A1C0E0032F90000000C0FFEE /* AppIcon.icon in Resources */,
 				1ED038982B507B4D00C007D4 /* Preview Assets.xcassets in Resources */,
 				1E044F992B92798E00BCA2FD /* Localizable.xcstrings in Resources */,
 				65AD383B2BFBDF4A00271B39 /* PrivacyInfo.xcprivacy in Resources */,
@@ -1227,6 +1235,7 @@
 			files = (
 				65B9A71B2AFC24190088956F /* ringtone.mp3 in Resources */,
 				7A14FCF4257FEB59005BDCD4 /* Assets.xcassets in Resources */,
+				A1C0E0022F90000000C0FFEE /* AppIcon.icon in Resources */,
 				7A610CD527ECE38100B8ABDD /* custom.ttf in Resources */,
 				7AAB3E42257E6A6E00707CF6 /* Images.xcassets in Resources */,
 				7AE10C0828A59530003593CB /* Inter.ttf in Resources */,
@@ -1274,9 +1283,9 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXApplication/ExpoApplication_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/EXNotifications/ExpoNotifications_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoDevice/ExpoDevice_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoNotifications/ExpoNotifications_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoSystemUI/ExpoSystemUI_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseCore/FirebaseCore_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseCoreExtension/FirebaseCoreExtension_Privacy.bundle",
@@ -1285,9 +1294,9 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseInstallations/FirebaseInstallations_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleDataTransport/GoogleDataTransport_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleUtilities/GoogleUtilities_Privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/MMKV/MMKV_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/PromisesObjC/FBLPromises_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/PromisesSwift/Promises_Privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNDeviceInfo/RNDeviceInfoPrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/RNImageCropPickerPrivacyInfo.bundle",
@@ -1295,10 +1304,10 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-timing/React-timing_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/ReactNativeEnrichedMarkdown/RaTeXCoreFonts.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/nanopb/nanopb_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-cameraroll/RNCameraRollPrivacyInfo.bundle",
 			);
@@ -1308,9 +1317,9 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoApplication_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoNotifications_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoDevice_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoNotifications_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoSystemUI_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseCore_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseCoreExtension_Privacy.bundle",
@@ -1319,9 +1328,9 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseInstallations_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleDataTransport_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleUtilities_Privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MMKV_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FBLPromises_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Promises_Privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNDeviceInfoPrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNImageCropPickerPrivacyInfo.bundle",
@@ -1329,10 +1338,10 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-timing_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RaTeXCoreFonts.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/nanopb_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCameraRollPrivacyInfo.bundle",
 			);
@@ -1357,7 +1366,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $TMPDIR/$(md5 -qs \"$CONFIGURATION_BUILD_DIR\")-main.jsbundle.map\"\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
+			shellScript = "export EXTRA_PACKAGER_ARGS=\"--sourcemap-output $TMPDIR/$(md5 -qs \"$CONFIGURATION_BUILD_DIR\")-main.jsbundle.map\"\nexport NODE_BINARY=/opt/homebrew/bin/node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
 		};
 		7A55BE3C2F1131C000D8744D /* ShellScript */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -1393,7 +1402,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "SOURCE_MAP=\"$TMPDIR/$(md5 -qs \"$CONFIGURATION_BUILD_DIR\")-main.jsbundle.map\" ../node_modules/@bugsnag/react-native/bugsnag-react-native-xcode.sh\n";
+			shellScript = "#SOURCE_MAP=\"$TMPDIR/$(md5 -qs \"$CONFIGURATION_BUILD_DIR\")-main.jsbundle.map\" ../node_modules/@bugsnag/react-native/bugsnag-react-native-xcode.sh\n";
 			showEnvVarsInLog = 0;
 		};
 		86A998705576AFA7CE938617 /* [Expo] Configure project */ = {
@@ -1431,9 +1440,9 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXApplication/ExpoApplication_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/EXNotifications/ExpoNotifications_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoDevice/ExpoDevice_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoNotifications/ExpoNotifications_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoSystemUI/ExpoSystemUI_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseCore/FirebaseCore_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseCoreExtension/FirebaseCoreExtension_Privacy.bundle",
@@ -1442,9 +1451,9 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/FirebaseInstallations/FirebaseInstallations_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleDataTransport/GoogleDataTransport_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/GoogleUtilities/GoogleUtilities_Privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/MMKV/MMKV_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/PromisesObjC/FBLPromises_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/PromisesSwift/Promises_Privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/RCT-Folly/RCT-Folly_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNDeviceInfo/RNDeviceInfoPrivacyInfo.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNImageCropPicker/RNImageCropPickerPrivacyInfo.bundle",
@@ -1452,10 +1461,10 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/RNSVG/RNSVGFilters.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-Core/React-Core_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/React-cxxreact/React-cxxreact_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/React-timing/React-timing_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/ReactNativeEnrichedMarkdown/RaTeXCoreFonts.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/SDWebImage/SDWebImage.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/TOCropViewController/TOCropViewControllerBundle.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/boost/boost_privacy.bundle",
-				"${PODS_CONFIGURATION_BUILD_DIR}/glog/glog_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/nanopb/nanopb_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/react-native-cameraroll/RNCameraRollPrivacyInfo.bundle",
 			);
@@ -1465,9 +1474,9 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoApplication_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoNotifications_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoDevice_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoNotifications_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoSystemUI_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseCore_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseCoreExtension_Privacy.bundle",
@@ -1476,9 +1485,9 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FirebaseInstallations_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleDataTransport_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/GoogleUtilities_Privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/MMKV_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/FBLPromises_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Promises_Privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCT-Folly_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNDeviceInfoPrivacyInfo.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNImageCropPickerPrivacyInfo.bundle",
@@ -1486,10 +1495,10 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNSVGFilters.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-Core_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-cxxreact_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/React-timing_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RaTeXCoreFonts.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/SDWebImage.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/TOCropViewControllerBundle.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/boost_privacy.bundle",
-				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/glog_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/nanopb_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCameraRollPrivacyInfo.bundle",
 			);
@@ -1549,13 +1558,19 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-defaults-Rocket.Chat/Pods-defaults-Rocket.Chat-frameworks.sh",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ExpoModulesJSI/ExpoModulesJSI.framework/ExpoModulesJSI",
 				"${PODS_XCFRAMEWORKS_BUILD_DIR}/JitsiWebRTC/WebRTC.framework/WebRTC",
-				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/React-Core-prebuilt/React.framework/React",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/ReactNativeDependencies/ReactNativeDependencies.framework/ReactNativeDependencies",
+				"${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermesvm.framework/hermesvm",
 			);
 			name = "[CP] Embed Pods Frameworks";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ExpoModulesJSI.framework",
 				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/WebRTC.framework",
-				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/React.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/ReactNativeDependencies.framework",
+				"${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermesvm.framework",
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
@@ -1725,6 +1740,7 @@
 				7AAB3E24257E6A6E00707CF6 /* Date+Extensions.swift in Sources */,
 				7AAB3E25257E6A6E00707CF6 /* Database.swift in Sources */,
 				7ACFE7D92DDE48760090D9BC /* AppDelegate.swift in Sources */,
+				6F204E445C3D44699793D4F8 /* SceneDelegate.swift in Sources */,
 				7A3704572F7DB36E009085FC /* VoipPerCallDdpRegistry.swift in Sources */,
 				1E9A71752B59F36E00477BA2 /* ClientSSL.swift in Sources */,
 				A48B46DA2D3FFBD200945489 /* A11yFlowModule.m in Sources */,
@@ -1849,7 +1865,7 @@
 					"$PODS_CONFIGURATION_BUILD_DIR/Firebase",
 				);
 				INFOPLIST_FILE = ShareRocketChatRN/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",
@@ -1925,7 +1941,7 @@
 					"$PODS_CONFIGURATION_BUILD_DIR/Firebase",
 				);
 				INFOPLIST_FILE = ShareRocketChatRN/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",
@@ -1979,6 +1995,7 @@
 				INFOPLIST_KEY_CFBundleDisplayName = Rocket.Chat;
 				INFOPLIST_KEY_UISupportedInterfaceOrientations = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown";
 				INFOPLIST_KEY_WKCompanionAppBundleIdentifier = chat.rocket.ios;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -1998,7 +2015,7 @@
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = 4;
-				WATCHOS_DEPLOYMENT_TARGET = 8.0;
+				WATCHOS_DEPLOYMENT_TARGET = 9.0;
 			};
 			name = Debug;
 		};
@@ -2032,6 +2049,7 @@
 				INFOPLIST_KEY_CFBundleDisplayName = Rocket.Chat;
 				INFOPLIST_KEY_UISupportedInterfaceOrientations = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown";
 				INFOPLIST_KEY_WKCompanionAppBundleIdentifier = chat.rocket.ios;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -2049,7 +2067,7 @@
 				SWIFT_EMIT_LOC_STRINGS = YES;
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = 4;
-				WATCHOS_DEPLOYMENT_TARGET = 8.0;
+				WATCHOS_DEPLOYMENT_TARGET = 9.0;
 			};
 			name = Release;
 		};
@@ -2083,7 +2101,7 @@
 					"$(SRCROOT)",
 				);
 				INFOPLIST_FILE = NotificationService/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -2136,7 +2154,7 @@
 					"$(SRCROOT)",
 				);
 				INFOPLIST_FILE = NotificationService/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -2189,7 +2207,7 @@
 					"$(SRCROOT)/../node_modules/react-native-mmkv/MMKV/Core/**",
 				);
 				INFOPLIST_FILE = RocketChatRN/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -2253,7 +2271,7 @@
 					"$(SRCROOT)/../node_modules/react-native-mmkv/MMKV/Core/**",
 				);
 				INFOPLIST_FILE = RocketChatRN/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 15.1;
+				IPHONEOS_DEPLOYMENT_TARGET = 16.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -2344,19 +2362,41 @@
 					"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios",
 					"${PODS_CONFIGURATION_BUILD_DIR}/React-runtimeexecutor/React_runtimeexecutor.framework/Headers",
 					"${PODS_CONFIGURATION_BUILD_DIR}/React-runtimeexecutor/React_runtimeexecutor.framework/Headers/platform/ios",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-featureflags/React_featureflags.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-renderercss/React_renderercss.framework/Headers",
+					"${PODS_ROOT}/ReactCommon",
+					"${PODS_ROOT}/ReactCommon/react/nativemodule/core",
+					"${PODS_ROOT}/React-runtimeexecutor",
+					"${PODS_ROOT}/React-runtimeexecutor/platform/ios",
+					"${PODS_ROOT}/ReactCommon-Samples",
+					"${PODS_ROOT}/ReactCommon-Samples/platform/ios",
+					"${PODS_ROOT}/React-Fabric/react/renderer/components/view/platform/cxx",
+					"${PODS_ROOT}/React-NativeModulesApple",
+					"${PODS_ROOT}/React-graphics",
+					"${PODS_ROOT}/React-graphics/react/renderer/graphics/platform/ios",
+					"${PODS_ROOT}/React-featureflags",
+					"${PODS_ROOT}/React-renderercss",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
-				OTHER_CFLAGS = "$(inherited)";
-				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
+				OTHER_CFLAGS = (
+					"$(inherited)",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
+				);
+				OTHER_CPLUSPLUSFLAGS = (
+					"$(inherited)",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
+				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					" ",
 				);
+				PODFILE_DIR = "$(SRCROOT)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "$(inherited) DEBUG";
+				SWIFT_ENABLE_EXPLICIT_MODULES = NO;
 				USE_HERMES = true;
 			};
 			name = Debug;
@@ -2414,18 +2454,40 @@
 					"${PODS_CONFIGURATION_BUILD_DIR}/React-graphics/React_graphics.framework/Headers/react/renderer/graphics/platform/ios",
 					"${PODS_CONFIGURATION_BUILD_DIR}/React-runtimeexecutor/React_runtimeexecutor.framework/Headers",
 					"${PODS_CONFIGURATION_BUILD_DIR}/React-runtimeexecutor/React_runtimeexecutor.framework/Headers/platform/ios",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-featureflags/React_featureflags.framework/Headers",
+					"${PODS_CONFIGURATION_BUILD_DIR}/React-renderercss/React_renderercss.framework/Headers",
+					"${PODS_ROOT}/ReactCommon",
+					"${PODS_ROOT}/ReactCommon/react/nativemodule/core",
+					"${PODS_ROOT}/React-runtimeexecutor",
+					"${PODS_ROOT}/React-runtimeexecutor/platform/ios",
+					"${PODS_ROOT}/ReactCommon-Samples",
+					"${PODS_ROOT}/ReactCommon-Samples/platform/ios",
+					"${PODS_ROOT}/React-Fabric/react/renderer/components/view/platform/cxx",
+					"${PODS_ROOT}/React-NativeModulesApple",
+					"${PODS_ROOT}/React-graphics",
+					"${PODS_ROOT}/React-graphics/react/renderer/graphics/platform/ios",
+					"${PODS_ROOT}/React-featureflags",
+					"${PODS_ROOT}/React-renderercss",
 				);
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
-				OTHER_CFLAGS = "$(inherited)";
-				OTHER_CPLUSPLUSFLAGS = "$(inherited)";
+				OTHER_CFLAGS = (
+					"$(inherited)",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
+				);
+				OTHER_CPLUSPLUSFLAGS = (
+					"$(inherited)",
+					"-DRCT_REMOVE_LEGACY_ARCH=1",
+				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					" ",
 				);
+				PODFILE_DIR = "$(SRCROOT)";
 				REACT_NATIVE_PATH = "${PODS_ROOT}/../../node_modules/react-native";
 				SDKROOT = iphoneos;
 				SWIFT_COMPILATION_MODE = wholemodule;
+				SWIFT_ENABLE_EXPLICIT_MODULES = NO;
 				USE_HERMES = true;
 				VALIDATE_PRODUCT = YES;
 			};
diff --git a/ios/RocketChatRN/Info.plist b/ios/RocketChatRN/Info.plist
index 372948e2af8..4a4abe4efc0 100644
--- a/ios/RocketChatRN/Info.plist
+++ b/ios/RocketChatRN/Info.plist
@@ -4,11 +4,6 @@
 <dict>
 	<key>AppGroupIdentifier</key>
 	<string>group.ios.chat.rocket</string>
-	<key>bugsnag</key>
-	<dict>
-		<key>apiKey</key>
-		<string>apiKeyValue</string>
-	</dict>
 	<key>CADisableMinimumFrameDurationOnPhone</key>
 	<true/>
 	<key>CFBundleDevelopmentRegion</key>
@@ -75,6 +70,10 @@
 	<string>Give $(PRODUCT_NAME) permission to save photos</string>
 	<key>NSPhotoLibraryUsageDescription</key>
 	<string>Upload photos to share with other users or to change your avatar</string>
+	<key>NSUserActivityTypes</key>
+	<array>
+		<string>INSendMessageIntent</string>
+	</array>
 	<key>RCTNewArchEnabled</key>
 	<true/>
 	<key>UIAppFonts</key>
@@ -86,6 +85,18 @@
 	<dict>
 		<key>UIApplicationSupportsMultipleScenes</key>
 		<false/>
+		<key>UISceneConfigurations</key>
+		<dict>
+			<key>UIWindowSceneSessionRoleApplication</key>
+			<array>
+				<dict>
+					<key>UISceneConfigurationName</key>
+					<string>Default Configuration</string>
+					<key>UISceneDelegateClassName</key>
+					<string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
+				</dict>
+			</array>
+		</dict>
 	</dict>
 	<key>UIBackgroundModes</key>
 	<array>
@@ -93,6 +104,8 @@
 		<string>fetch</string>
 		<string>voip</string>
 	</array>
+	<key>UIDesignRequiresCompatibility</key>
+	<false/>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -108,9 +121,10 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
-	<key>NSUserActivityTypes</key>
-	<array>
-		<string>INSendMessageIntent</string>
-	</array>
+	<key>bugsnag</key>
+	<dict>
+		<key>apiKey</key>
+		<string>apiKeyValue</string>
+	</dict>
 </dict>
 </plist>
diff --git a/ios/SceneDelegate.swift b/ios/SceneDelegate.swift
new file mode 100644
index 00000000000..dead07a76e4
--- /dev/null
+++ b/ios/SceneDelegate.swift
@@ -0,0 +1,17 @@
+import Expo
+import UIKit
+
+@available(iOSApplicationExtension, unavailable)
+class SceneDelegate: ExpoAppSceneDelegate {
+  override func scene(
+    _ scene: UIScene,
+    willConnectTo session: UISceneSession,
+    options connectionOptions: UIScene.ConnectionOptions
+  ) {
+    super.scene(scene, willConnectTo: session, options: connectionOptions)
+
+    if let rootViewController = window?.rootViewController {
+      RNBootSplash.initWithStoryboard("LaunchScreen", rootView: rootViewController.view)
+    }
+  }
+}
diff --git a/ios/ShareRocketChatRN/Info.plist b/ios/ShareRocketChatRN/Info.plist
index 4149cf89cb8..2d315a3290a 100644
--- a/ios/ShareRocketChatRN/Info.plist
+++ b/ios/ShareRocketChatRN/Info.plist
@@ -67,6 +67,8 @@
 		<string>custom.ttf</string>
 		<string>Inter.ttf</string>
 	</array>
+	<key>UIDesignRequiresCompatibility</key>
+	<false/>
 	<key>bugsnag</key>
 	<dict>
 		<key>apiKey</key>
diff --git a/jest.config.js b/jest.config.js
index d8ca39be13d..ea997537e7c 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,6 +1,9 @@
 const getAliasConfig = require('./config/import-aliases');
 
 module.exports = {
+	maxWorkers: 2,
+	fakeTimers: { doNotFake: ['setImmediate'] },
+	workerIdleMemoryLimit: '512MB',
 	modulePathIgnorePatterns: ['<rootDir>/.*worktrees/'],
 	testPathIgnorePatterns: [
 		'e2e',
@@ -10,7 +13,7 @@ module.exports = {
 		'/__tests__/mockedWatermelonDB\\.tsx$'
 	],
 	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|@rocket.chat/ui-kit|@rocket.chat/sdk|@rocket.chat/message-parser|tiny-events)'
+		'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|@rocket.chat/sdk|@rocket.chat/message-parser|tiny-events|react-native-enriched-markdown)'
 	],
 	preset: './jest.preset.js',
 	cacheDirectory: '<rootDir>/.jest-cache',
@@ -21,5 +24,6 @@ module.exports = {
 		'.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
 		...getAliasConfig().jest
 	},
+	setupFiles: ['react-native-gesture-handler/jestSetup.js'],
 	setupFilesAfterEnv: ['./jest.setup.js']
 };
diff --git a/jest.preset.js b/jest.preset.js
index 32b28ff7b71..92c0a951b5e 100644
--- a/jest.preset.js
+++ b/jest.preset.js
@@ -1,7 +1,5 @@
-const jestRN = 'react-native';
 const jestExpo = require('jest-expo/jest-preset.js');
 
 module.exports = {
-	...jestRN,
 	...jestExpo
 };
diff --git a/jest.setup.js b/jest.setup.js
index 84d08c3bede..3dd405a113a 100644
--- a/jest.setup.js
+++ b/jest.setup.js
@@ -1,3 +1,5 @@
+Object.defineProperty(globalThis, 'fetch', { value: globalThis.fetch, writable: true, configurable: true });
+
 import mockClipboard from '@react-native-clipboard/clipboard/jest/clipboard-mock.js';
 import mockAsyncStorage from '@react-native-async-storage/async-storage/jest/async-storage-mock';
 import { Image } from 'expo-image';
@@ -18,27 +20,19 @@ jest.mock('react-native-safe-area-context', () => {
 const loadAsyncMock = jest.spyOn(Image, 'loadAsync');
 loadAsyncMock.mockImplementation(() => Promise.resolve({ width: 200, height: 300 }));
 
-jest.mock('react-native-worklets', () => ({
-	RuntimeKind: { ReactNative: 1, UI: 2, Worker: 3 },
-	getRuntimeKind: jest.fn(() => 1),
-	createSerializable: jest.fn(value => value),
-	isWorkletFunction: jest.fn(() => false),
-	runOnUI: jest.fn(fn => fn),
-	runOnJS: jest.fn(fn => fn),
-	makeShareable: jest.fn(value => value),
-	callMicrotasks: jest.fn(),
-	executeOnUIRuntimeSync: jest.fn(fn => fn()),
-	serializableMappingCache: { get: jest.fn(), set: jest.fn(), has: jest.fn(() => false), delete: jest.fn() },
-	scheduleOnRN: jest.fn((fn, ...args) => fn(...args))
+jest.mock('react-native-worklets', () => jest.requireActual('react-native-worklets/lib/module/mock'));
+
+jest.mock('react-native-reanimated/src/css/native/proxy', () => ({
+	...jest.requireActual('react-native-reanimated/src/css/native/proxy'),
+	setCSSEventHandler: jest.fn()
 }));
 
-// @ts-ignore
-global.__reanimatedWorkletInit = () => {};
 jest.mock('react-native-reanimated', () => {
 	const actual = jest.requireActual('react-native-reanimated/mock');
 	return {
 		...actual,
-		useSharedValue: jest.fn(init => ({ value: init })),
+		useSharedValue: jest.fn(init => jest.requireActual('react').useState(() => ({ value: init }))[0]),
+		makeMutable: jest.fn(init => ({ value: init })),
 		useAnimatedReaction: jest.fn(),
 		withTiming: jest.fn(value => value),
 		useAnimatedGestureHandler: jest.fn(() => jest.fn()),
@@ -74,20 +68,14 @@ jest.mock('expo-haptics', () => ({
 	}
 }));
 
-jest.mock('react-native-gesture-handler', () => {
-	const { forwardRef } = require('react');
-	const { View } = require('react-native');
-	const GestureHandlerRootView = forwardRef(({ children, ...props }, ref) => (
-		<View ref={ref} {...props}>
-			{children}
-		</View>
-	));
-	GestureHandlerRootView.displayName = 'GestureHandlerRootView';
-	return {
-		...jest.requireActual('react-native-gesture-handler'),
-		GestureHandlerRootView,
-		gestureHandlerRootHOC: Component => Component
-	};
+jest.mock('react-native-gesture-handler/lib/module/v3/detectors/useEnsureGestureHandlerRootView', () => ({
+	useEnsureGestureHandlerRootView: () => {}
+}));
+
+jest.mock('react-native-gesture-handler/lib/module/v3/components/Touchable/Touchable', () => {
+	const { Pressable } = require('react-native');
+	const Touchable = ({ children, ...props }) => <Pressable {...props}>{children}</Pressable>;
+	return { Touchable };
 });
 
 jest.mock('expo-font', () => ({
@@ -191,7 +179,8 @@ jest.mock('./app/containers/CustomIcon', () => {
 	return {
 		...actualNav,
 		IconSet: {
-			hasIcon: () => true
+			hasIcon: () => true,
+			getImageSource: () => Promise.resolve({ uri: 'file:///icon.png' })
 		}
 	};
 });
@@ -257,15 +246,6 @@ jest.mock('@lodev09/react-native-true-sheet', () => {
 	};
 });
 
-jest.mock('react-native-math-view', () => {
-	const react = require('react-native');
-	return {
-		__esModule: true,
-		default: react.View, // Default export
-		MathText: react.View // {...} Named export
-	};
-});
-
 jest.mock('react-native-keyboard-controller');
 
 jest.mock('react-native-keychain', () => ({
@@ -288,6 +268,8 @@ jest.mock('./app/lib/methods/helpers/externalInput', () => ({
 	isExternalKeyboardConnected: jest.fn(() => false)
 }));
 
+jest.mock('react-native-enriched-markdown', () => require('react-native-enriched-markdown/jest'));
+
 jest.mock('react-native-webview', () => {
 	const { forwardRef } = require('react');
 	const { View } = require('react-native');
diff --git a/metro.config.js b/metro.config.js
index 5b1d7cb76a9..bd22faf1ff1 100644
--- a/metro.config.js
+++ b/metro.config.js
@@ -14,7 +14,6 @@ const config = {
 	},
 	resolver: {
 		// When running E2E tests, prioritize .mock.ts files for app code
-		// Note: react-native-mmkv's internal mock file is disabled via patch-package
 		sourceExts: process.env.RUNNING_E2E_TESTS === 'true' ? ['mock.ts', ...sourceExts] : sourceExts
 	}
 };
diff --git a/package.json b/package.json
index a1f63135872..11409f3b889 100644
--- a/package.json
+++ b/package.json
@@ -27,34 +27,37 @@
 	},
 	"dependencies": {
 		"@bugsnag/react-native": "8.4.0",
+		"@expo/ui": "~57.0.19",
 		"@expo/vector-icons": "^15.0.3",
 		"@hookform/resolvers": "^2.9.10",
+		"@legendapp/list": "3.4.0",
 		"@lodev09/react-native-true-sheet": "~3.7.0",
 		"@magrinj/expo-quick-look": "0.4.0",
 		"@nozbe/watermelondb": "^0.28.1-0",
 		"@react-native-async-storage/async-storage": "2.2.0",
 		"@react-native-camera-roll/camera-roll": "^7.10.0",
 		"@react-native-clipboard/clipboard": "^1.13.2",
-		"@react-native-community/datetimepicker": "8.4.4",
+		"@react-native-community/datetimepicker": "9.1.0",
 		"@react-native-community/hooks": "^100.1.0",
-		"@react-native-community/netinfo": "^11.3.1",
-		"@react-native-community/slider": "5.0.1",
+		"@react-native-community/netinfo": "^12.0.1",
+		"@react-native-community/slider": "5.2.0",
 		"@react-native-cookies/cookies": "6.2.1",
 		"@react-native-firebase/analytics": "^21.12.2",
 		"@react-native-firebase/app": "^21.12.2",
 		"@react-native-firebase/crashlytics": "^21.12.2",
 		"@react-native-masked-view/masked-view": "^0.3.1",
 		"@react-native-picker/picker": "2.11.4",
-		"@react-native/codegen": "^0.80.0",
-		"@react-navigation/drawer": "^7.12.2",
-		"@react-navigation/elements": "^2.9.25",
-		"@react-navigation/native": "^7.3.3",
-		"@react-navigation/native-stack": "^7.17.5",
+		"@react-native/codegen": "0.86.3",
+		"@react-navigation/drawer": "^7.14.1",
+		"@react-navigation/elements": "^2.9.42",
+		"@react-navigation/native": "^7.4.1",
+		"@react-navigation/native-stack": "^7.19.1",
 		"@rocket.chat/media-signaling": "1.0.0-rc.1",
 		"@rocket.chat/message-parser": "0.31.36",
 		"@rocket.chat/mobile-crypto": "RocketChat/rocket.chat-mobile-crypto#main",
 		"@rocket.chat/sdk": "RocketChat/Rocket.Chat.js.SDK#ecf4fedcf8ab6121e62a6b95bb48823afd805afd",
 		"@rocket.chat/ui-kit": "^0.39.0",
+		"@shopify/flash-list": "2.3.2",
 		"@zoontek/react-native-navigation-bar": "^1.1.1",
 		"axios": "0.30.3",
 		"bytebuffer": "~5.0.1",
@@ -63,23 +66,23 @@
 		"dequal": "2.0.3",
 		"ejson": "2.2.3",
 		"eslint-import-resolver-typescript": "^4.4.4",
-		"expo": "^54.0.0",
-		"expo-apple-authentication": "~8.0.8",
-		"expo-audio": "~0.4.9",
-		"expo-camera": "~17.0.10",
-		"expo-device": "^8.0.10",
-		"expo-document-picker": "~14.0.8",
-		"expo-file-system": "~19.0.21",
-		"expo-haptics": "~15.0.8",
-		"expo-image": "~3.0.11",
-		"expo-keep-awake": "~15.0.8",
-		"expo-local-authentication": "~17.0.8",
-		"expo-notifications": "~0.32.15",
-		"expo-status-bar": "~3.0.9",
-		"expo-system-ui": "~6.0.9",
-		"expo-video": "~3.0.16",
-		"expo-video-thumbnails": "~10.0.8",
-		"expo-web-browser": "~15.0.10",
+		"expo": "^57.0.0",
+		"expo-apple-authentication": "~57.0.2",
+		"expo-audio": "~57.0.5",
+		"expo-camera": "~57.0.5",
+		"expo-device": "^57.0.2",
+		"expo-document-picker": "~57.0.2",
+		"expo-file-system": "~57.0.7",
+		"expo-haptics": "~57.0.3",
+		"expo-image": "~57.0.5",
+		"expo-keep-awake": "~57.0.2",
+		"expo-local-authentication": "~57.0.3",
+		"expo-notifications": "~57.0.19",
+		"expo-status-bar": "~57.0.1",
+		"expo-system-ui": "~57.0.4",
+		"expo-video": "~57.0.4",
+		"expo-video-thumbnails": "~57.0.2",
+		"expo-web-browser": "~57.0.3",
 		"hoist-non-react-statics": "3.3.2",
 		"i18n-js": "3.9.2",
 		"js-base64": "3.6.1",
@@ -88,9 +91,9 @@
 		"lodash": "4.17.21",
 		"mitt": "3.0.1",
 		"pretty-bytes": "5.6.0",
-		"react": "19.1.0",
+		"react": "19.2.3",
 		"react-hook-form": "7.34.2",
-		"react-native": "0.81.5",
+		"react-native": "0.86.3",
 		"react-native-a11y-order": "^0.4.0",
 		"react-native-animatable": "1.3.3",
 		"react-native-bootsplash": "^6.3.8",
@@ -99,32 +102,32 @@
 		"react-native-device-info": "11.1.0",
 		"react-native-easy-grid": "0.2.2",
 		"react-native-easy-toast": "2.3.0",
+		"react-native-enriched-markdown": "1.0.2",
 		"react-native-external-keyboard": "^0.9.0",
-		"react-native-gesture-handler": "~2.28.0",
+		"react-native-gesture-handler": "~3.3.0",
 		"react-native-image-crop-picker": "RocketChat/react-native-image-crop-picker#47092e8c90550a54d45fe307f7cb2a24c9535ed5",
 		"react-native-incall-manager": "^4.2.1",
-		"react-native-katex": "git+https://github.com/RocketChat/react-native-katex.git",
 		"react-native-keyboard-controller": "1.18.5",
 		"react-native-keychain": "10.0.0",
-		"react-native-linear-gradient": "2.6.2",
+		"react-native-linear-gradient": "2.8.3",
 		"react-native-localize": "3.7.0",
-		"react-native-math-view": "3.9.5",
 		"react-native-mime-types": "2.3.0",
-		"react-native-mmkv": "^4.1.2",
+		"react-native-mmkv": "^4.3.2",
 		"react-native-modal": "13.0.1",
-		"react-native-nitro-modules": "^0.33.9",
+		"react-native-nitro-modules": "^0.37.1",
 		"react-native-notifier": "1.6.1",
 		"react-native-picker-select": "9.0.1",
+		"react-native-plain-text": "0.8.2",
 		"react-native-popover-view": "5.1.7",
-		"react-native-reanimated": "4.1.3",
-		"react-native-safe-area-context": "^5.5.2",
-		"react-native-screens": "~4.17.1",
+		"react-native-reanimated": "4.6.0",
+		"react-native-safe-area-context": "^5.10.0",
+		"react-native-screens": "~4.28.0",
 		"react-native-skeleton-placeholder": "5.2.4",
 		"react-native-svg": "^15.12.1",
 		"react-native-url-polyfill": "2.0.0",
 		"react-native-webrtc": "124.0.7",
 		"react-native-webview": "13.16.1",
-		"react-native-worklets": "^0.6.1",
+		"react-native-worklets": "0.12.2",
 		"react-redux": "8.0.5",
 		"reanimated-tab-view": "^0.3.0",
 		"redux": "4.2.0",
@@ -147,7 +150,9 @@
 	"pnpm": {
 		"overrides": {
 			"ua-parser-js": "1.0.2",
-			"jpeg-js": "0.4.4"
+			"jpeg-js": "0.4.4",
+			"typescript": "7.0.2",
+			"react-native-nitro-modules": "^0.37.1"
 		},
 		"onlyBuiltDependencies": [
 			"@bugsnag/cli",
@@ -155,25 +160,26 @@
 			"core-js-pure",
 			"esbuild",
 			"protobufjs",
+			"react-native-enriched-markdown",
 			"sharp",
 			"unrs-resolver"
 		]
 	},
 	"devDependencies": {
-		"@babel/core": "~7.25.9",
+		"@babel/core": "~7.29.7",
 		"@babel/plugin-proposal-decorators": "~7.25.9",
 		"@babel/plugin-transform-named-capturing-groups-regex": "~7.25.9",
 		"@babel/preset-env": "~7.25.9",
 		"@babel/runtime": "~7.25.9",
-		"@bugsnag/cli": "^3.2.1",
+		"@bugsnag/cli": "^3.10.6",
 		"@bugsnag/source-maps": "^2.3.3",
 		"@gorhom/bottom-sheet": "^5",
 		"@react-native-community/cli": "20.0.0",
 		"@react-native-community/cli-platform-android": "20.0.0",
 		"@react-native-community/cli-platform-ios": "20.0.0",
-		"@react-native/babel-preset": "0.81.5",
-		"@react-native/metro-config": "0.81.5",
-		"@react-native/typescript-config": "0.81.5",
+		"@react-native/babel-preset": "0.86.3",
+		"@react-native/metro-config": "0.86.3",
+		"@react-native/typescript-config": "0.86.3",
 		"@storybook/react": "~9.0.9",
 		"@storybook/react-native": "~9.0.9",
 		"@testing-library/react-native": "^13.2.0",
@@ -185,7 +191,7 @@
 		"@types/jsrsasign": "^10.5.8",
 		"@types/lodash": "^4.14.188",
 		"@types/node": "25.0.3",
-		"@types/react": "~19.1.0",
+		"@types/react": "~19.2.18",
 		"@types/semver": "7.3.13",
 		"@types/ua-parser-js": "^0.7.36",
 		"@types/url-parse": "^1.4.8",
@@ -195,26 +201,38 @@
 		"babel-plugin-react-compiler": "1.0.0",
 		"babel-plugin-transform-inline-environment-variables": "^0.4.4",
 		"babel-plugin-transform-remove-console": "^6.9.4",
-		"babel-preset-expo": "~54.0.9",
+		"babel-preset-expo": "~57.0.12",
 		"emojibase-data": "17.0.0",
 		"eslint-plugin-react-native": "~5.0.0",
 		"fast-glob": "3.3.3",
 		"identity-obj-proxy": "^3.0.0",
 		"jest": "^29.7.0",
 		"jest-cli": "^29.7.0",
-		"jest-expo": "~54.0.16",
+		"jest-expo": "~57.0.5",
 		"oxfmt": "^0.60.0",
 		"oxlint": "^1.75.0",
 		"oxlint-plugin-complexity": "^2.1.8",
 		"patch-package": "~8.0.1",
-		"react-dom": "19.1.0",
+		"react-dom": "19.2.3",
 		"sniffler": "0.4.0",
 		"storybook": "~9.0.9",
 		"typescript": "7.0.2"
 	},
 	"snyk": true,
+	"expo": {
+		"autolinking": {
+			"android": {
+				"buildFromSource": [
+					"expo-asset",
+					"expo-audio",
+					"expo-file-system",
+					"expo-font"
+				]
+			}
+		}
+	},
 	"engines": {
-		"node": ">=18"
+		"node": ">=22.13.0"
 	},
 	"codegenConfig": {
 		"name": "SSLPinning",
@@ -225,6 +243,10 @@
 		}
 	},
 	"volta": {
-		"node": "24.13.1"
+		"node": "22.13.0"
+	},
+	"enriched-markdown": {
+		"enableCodeHighlight": false,
+		"enableMath": true
 	}
 }
diff --git a/patches/@react-native-camera-roll+camera-roll+7.10.2.patch b/patches/@react-native-camera-roll+camera-roll+7.10.2.patch
new file mode 100644
index 00000000000..d2ea78a557f
--- /dev/null
+++ b/patches/@react-native-camera-roll+camera-roll+7.10.2.patch
@@ -0,0 +1,26 @@
+diff --git a/node_modules/@react-native-camera-roll/camera-roll/src/NativeCameraRollModule.ts b/node_modules/@react-native-camera-roll/camera-roll/src/NativeCameraRollModule.ts
+index 63e1136..634a40b 100644
+--- a/node_modules/@react-native-camera-roll/camera-roll/src/NativeCameraRollModule.ts
++++ b/node_modules/@react-native-camera-roll/camera-roll/src/NativeCameraRollModule.ts
+@@ -21,8 +21,8 @@ type Album = {
+   id: string;
+   title: string;
+   count: number;
+-  type: AlbumType;
+-  subtype?: AlbumSubType;
++  type: string;
++  subtype?: string;
+ };
+ 
+ type SubTypes =
+@@ -41,8 +41,8 @@ type PhotoIdentifier = {
+   node: {
+     id: string;
+     type: string;
+-    subTypes: SubTypes;
+-    sourceType: SourceType;
++    subTypes: string;
++    sourceType: string;
+     group_name: string[];
+     image: {
+       filename: string | null;
diff --git a/patches/@react-native-cookies+cookies+6.2.1.patch b/patches/@react-native-cookies+cookies+6.2.1.patch
new file mode 100644
index 00000000000..d0a8cee9581
--- /dev/null
+++ b/patches/@react-native-cookies+cookies+6.2.1.patch
@@ -0,0 +1,20 @@
+diff --git a/node_modules/@react-native-cookies/cookies/android/build.gradle b/node_modules/@react-native-cookies/cookies/android/build.gradle
+index 13c7e43..626fb5a 100644
+--- a/node_modules/@react-native-cookies/cookies/android/build.gradle
++++ b/node_modules/@react-native-cookies/cookies/android/build.gradle
+@@ -31,7 +31,6 @@ buildscript {
+     if (project == rootProject) {
+         repositories {
+             google()
+-            jcenter()
+         }
+         dependencies {
+             classpath 'com.android.tools.build:gradle:3.5.3'
+@@ -67,7 +66,6 @@ repositories {
+         url "$rootDir/../node_modules/jsc-android/dist"
+     }
+     google()
+-    jcenter()
+ }
+ 
+ dependencies {
diff --git a/patches/@react-navigation+core+7.21.1.patch b/patches/@react-navigation+core+7.22.1.patch
similarity index 100%
rename from patches/@react-navigation+core+7.21.1.patch
rename to patches/@react-navigation+core+7.22.1.patch
diff --git a/patches/@react-navigation+native-stack+7.19.2.patch b/patches/@react-navigation+native-stack+7.19.2.patch
new file mode 100644
index 00000000000..cca22e78ec9
--- /dev/null
+++ b/patches/@react-navigation+native-stack+7.19.2.patch
@@ -0,0 +1,279 @@
+diff --git a/node_modules/@react-navigation/native-stack/lib/module/views/useHeaderConfigProps.js b/node_modules/@react-navigation/native-stack/lib/module/views/useHeaderConfigProps.js
+index a56cb12..3b65c3a 100644
+--- a/node_modules/@react-navigation/native-stack/lib/module/views/useHeaderConfigProps.js
++++ b/node_modules/@react-navigation/native-stack/lib/module/views/useHeaderConfigProps.js
+@@ -149,7 +149,13 @@ export function useHeaderConfigProps({
+   headerStyle,
+   headerBlurEffect,
+   headerTintColor,
++  headerSubtitle,
++  headerSubtitleImageSource,
++  headerSubtitleColor,
+   headerTitle,
++  headerTitleImageSource,
++  onHeaderTitlePress,
++  headerTitleTestID,
+   headerTitleAlign,
+   headerTitleStyle,
+   headerTransparent,
+@@ -230,6 +236,15 @@ export function useHeaderConfigProps({
+     tintColor,
+     children: titleText
+   }) : null;
++  if (process.env.NODE_ENV !== 'production') {
++    if (headerTitleElement != null && headerSubtitle != null) {
++      console.warn(`'headerSubtitle' is ignored when 'headerTitle' renders a custom element for the screen '${route.name}'. Remove 'headerSubtitle' or use a string 'headerTitle' instead.`);
++    }
++  }
++  const subtitleText = headerTitleElement != null ? undefined : headerSubtitle;
++  const titleImageSource = headerTitleElement != null ? undefined : headerTitleImageSource;
++  const subtitleImageSource = headerTitleElement != null ? undefined : headerSubtitleImageSource;
++  const titlePress = headerTitleElement != null ? undefined : onHeaderTitlePress;
+   const supportsHeaderSearchBar = typeof isSearchBarAvailableForCurrentPlatform === 'boolean' ? isSearchBarAvailableForCurrentPlatform :
+   // Fallback for older versions of react-native-screens
+   Platform.OS === 'ios' && SearchBar != null;
+@@ -356,7 +371,14 @@ export function useHeaderConfigProps({
+     largeTitleFontSize,
+     largeTitleFontWeight,
+     largeTitleHideShadow: headerLargeTitleShadowVisible === false,
++    subtitle: subtitleText,
++    subtitleImageSource,
++    subtitleColor: headerSubtitleColor,
+     title: titleText,
++    titleImageSource,
++    titlePressEnabled: titlePress != null,
++    onTitlePress: titlePress,
++    titleTestID: headerTitleTestID,
+     titleColor,
+     titleFontFamily,
+     titleFontSize,
+diff --git a/node_modules/@react-navigation/native-stack/lib/typescript/src/types.d.ts b/node_modules/@react-navigation/native-stack/lib/typescript/src/types.d.ts
+index c32d1da..c011b9b 100644
+--- a/node_modules/@react-navigation/native-stack/lib/typescript/src/types.d.ts
++++ b/node_modules/@react-navigation/native-stack/lib/typescript/src/types.d.ts
+@@ -321,6 +321,74 @@ export type NativeStackNavigationOptions = {
+          */
+         tintColor?: string;
+     }) => React.ReactNode);
++    /**
++     * Image rendered as a leading glyph before the header title.
++     *
++     * Ignored when `headerTitle` renders a custom element.
++     *
++     * Only supported on iOS.
++     *
++     * @platform ios
++     *
++     * @supported iOS 26 or higher
++     */
++    headerTitleImageSource?: ImageSourcePropType;
++    /**
++     * String to display in the header underneath the title.
++     *
++     * Ignored when `headerTitle` renders a custom element.
++     *
++     * Only supported on iOS.
++     *
++     * @platform ios
++     *
++     * @supported iOS 26 or higher
++     */
++    headerSubtitle?: string;
++    /**
++     * Image rendered as a leading glyph before the header subtitle.
++     *
++     * Ignored when `headerTitle` renders a custom element.
++     *
++     * Only supported on iOS.
++     *
++     * @platform ios
++     *
++     * @supported iOS 26 or higher
++     */
++    headerSubtitleImageSource?: ImageSourcePropType;
++    /**
++     * Color of the header subtitle text. Defaults to the title color.
++     *
++     * Only supported on iOS.
++     *
++     * @platform ios
++     *
++     * @supported iOS 26 or higher
++     */
++    headerSubtitleColor?: ColorValue;
++    /**
++     * Called when the native header title or subtitle is tapped.
++     *
++     * Ignored when `headerTitle` renders a custom element.
++     *
++     * Only supported on iOS.
++     *
++     * @platform ios
++     *
++     * @supported iOS 26 or higher
++     */
++    onHeaderTitlePress?: () => void;
++    /**
++     * Accessibility identifier of the native header title, for e2e tests.
++     *
++     * Only supported on iOS.
++     *
++     * @platform ios
++     *
++     * @supported iOS 26 or higher
++     */
++    headerTitleTestID?: string;
+     /**
+      * How to align the the header title.
+      * Defaults to `left` on platforms other than iOS.
+@@ -937,6 +1005,7 @@ export type NativeStackHeaderItemButton = SharedHeaderItem & {
+      * Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected
+      */
+     selected?: boolean;
++    showsLabelWithIcon?: boolean;
+ };
+ /**
+  * An action item in a menu.
+diff --git a/node_modules/@react-navigation/native-stack/src/types.tsx b/node_modules/@react-navigation/native-stack/src/types.tsx
+index aeb4939..3e02d47 100644
+--- a/node_modules/@react-navigation/native-stack/src/types.tsx
++++ b/node_modules/@react-navigation/native-stack/src/types.tsx
+@@ -371,6 +371,74 @@ export type NativeStackNavigationOptions = {
+          */
+         tintColor?: string;
+       }) => React.ReactNode);
++  /**
++   * Image rendered as a leading glyph before the header title.
++   *
++   * Ignored when `headerTitle` renders a custom element.
++   *
++   * Only supported on iOS.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  headerTitleImageSource?: ImageSourcePropType;
++  /**
++   * String to display in the header underneath the title.
++   *
++   * Ignored when `headerTitle` renders a custom element.
++   *
++   * Only supported on iOS.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  headerSubtitle?: string;
++  /**
++   * Image rendered as a leading glyph before the header subtitle.
++   *
++   * Ignored when `headerTitle` renders a custom element.
++   *
++   * Only supported on iOS.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  headerSubtitleImageSource?: ImageSourcePropType;
++  /**
++   * Color of the header subtitle text. Defaults to the title color.
++   *
++   * Only supported on iOS.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  headerSubtitleColor?: ColorValue;
++  /**
++   * Called when the native header title or subtitle is tapped.
++   *
++   * Ignored when `headerTitle` renders a custom element.
++   *
++   * Only supported on iOS.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  onHeaderTitlePress?: () => void;
++  /**
++   * Accessibility identifier of the native header title, for e2e tests.
++   *
++   * Only supported on iOS.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  headerTitleTestID?: string;
+   /**
+    * How to align the the header title.
+    * Defaults to `left` on platforms other than iOS.
+@@ -994,6 +1062,7 @@ export type NativeStackHeaderItemButton = SharedHeaderItem & {
+    * Read more: https://developer.apple.com/documentation/uikit/uibarbuttonitem/isselected
+    */
+   selected?: boolean;
++  showsLabelWithIcon?: boolean;
+ };
+ 
+ /**
+diff --git a/node_modules/@react-navigation/native-stack/src/views/useHeaderConfigProps.tsx b/node_modules/@react-navigation/native-stack/src/views/useHeaderConfigProps.tsx
+index a7e3004..180964c 100644
+--- a/node_modules/@react-navigation/native-stack/src/views/useHeaderConfigProps.tsx
++++ b/node_modules/@react-navigation/native-stack/src/views/useHeaderConfigProps.tsx
+@@ -210,7 +210,13 @@ export function useHeaderConfigProps({
+   headerStyle,
+   headerBlurEffect,
+   headerTintColor,
++  headerSubtitle,
++  headerSubtitleImageSource,
++  headerSubtitleColor,
+   headerTitle,
++  headerTitleImageSource,
++  onHeaderTitlePress,
++  headerTitleTestID,
+   headerTitleAlign,
+   headerTitleStyle,
+   headerTransparent,
+@@ -330,6 +336,22 @@ export function useHeaderConfigProps({
+         })
+       : null;
+ 
++  if (process.env.NODE_ENV !== 'production') {
++    if (headerTitleElement != null && headerSubtitle != null) {
++      console.warn(
++        `'headerSubtitle' is ignored when 'headerTitle' renders a custom element for the screen '${route.name}'. Remove 'headerSubtitle' or use a string 'headerTitle' instead.`
++      );
++    }
++  }
++
++  const subtitleText = headerTitleElement != null ? undefined : headerSubtitle;
++  const titleImageSource =
++    headerTitleElement != null ? undefined : headerTitleImageSource;
++  const subtitleImageSource =
++    headerTitleElement != null ? undefined : headerSubtitleImageSource;
++  const titlePress =
++    headerTitleElement != null ? undefined : onHeaderTitlePress;
++
+   const supportsHeaderSearchBar =
+     typeof isSearchBarAvailableForCurrentPlatform === 'boolean'
+       ? isSearchBarAvailableForCurrentPlatform
+@@ -522,7 +544,14 @@ export function useHeaderConfigProps({
+     largeTitleFontSize,
+     largeTitleFontWeight,
+     largeTitleHideShadow: headerLargeTitleShadowVisible === false,
++    subtitle: subtitleText,
++    subtitleImageSource,
++    subtitleColor: headerSubtitleColor,
+     title: titleText,
++    titleImageSource,
++    titlePressEnabled: titlePress != null,
++    onTitlePress: titlePress,
++    titleTestID: headerTitleTestID,
+     titleColor,
+     titleFontFamily,
+     titleFontSize,
diff --git a/patches/expo-asset+12.0.12.patch b/patches/expo-asset+57.0.17.patch
similarity index 68%
rename from patches/expo-asset+12.0.12.patch
rename to patches/expo-asset+57.0.17.patch
index dd415ccd507..1a7de8cc921 100644
--- a/patches/expo-asset+12.0.12.patch
+++ b/patches/expo-asset+57.0.17.patch
@@ -1,24 +1,21 @@
 diff --git a/node_modules/expo-asset/android/src/main/java/expo/modules/asset/AssetModule.kt b/node_modules/expo-asset/android/src/main/java/expo/modules/asset/AssetModule.kt
-index 9f1e2c6..d4c49cd 100644
+index cff5e41..a57e8a8 100644
 --- a/node_modules/expo-asset/android/src/main/java/expo/modules/asset/AssetModule.kt
 +++ b/node_modules/expo-asset/android/src/main/java/expo/modules/asset/AssetModule.kt
-@@ -3,6 +3,7 @@ package expo.modules.asset
+@@ -2,6 +2,7 @@ package expo.modules.asset
+ 
  import android.content.Context
  import android.net.Uri
- import android.util.Log
 +import android.os.Build
- import expo.modules.interfaces.filesystem.Permission
+ import android.util.Log
  import expo.modules.kotlin.AppContext
  import expo.modules.kotlin.exception.CodedException
-@@ -80,6 +81,13 @@ class AssetModule : Module() {
+@@ -83,6 +84,10 @@ class AssetModule : Module() {
      Name("ExpoAsset")
  
      AsyncFunction("downloadAsync") Coroutine { uri: URI, md5Hash: String?, type: String ->
-+      // If the scheme is null, it's a raw asset (e.g., "custom.ttf").
-+      // Returning early prevents Expo from trying to "cache" a local native file.
-+      // Only for Android 8 and early
 +      if (uri.scheme == null && Build.VERSION.SDK_INT <= Build.VERSION_CODES.O) {
-+          return@Coroutine uri
++        return@Coroutine uri
 +      }
 +
        if (uri.scheme == "file" && !uri.toString().startsWith(ANDROID_EMBEDDED_URL_BASE_RESOURCE)) {
diff --git a/patches/expo-audio+0.4.9.patch b/patches/expo-audio+57.0.5.patch
similarity index 94%
rename from patches/expo-audio+0.4.9.patch
rename to patches/expo-audio+57.0.5.patch
index 7b6f7a2961e..0d7210ec4b5 100644
--- a/patches/expo-audio+0.4.9.patch
+++ b/patches/expo-audio+57.0.5.patch
@@ -1,5 +1,5 @@
 diff --git a/node_modules/expo-audio/android/src/main/java/expo/modules/audio/AudioModule.kt b/node_modules/expo-audio/android/src/main/java/expo/modules/audio/AudioModule.kt
-index c9fd366..5c74acf 100644
+index 992239b..df504ce 100644
 --- a/node_modules/expo-audio/android/src/main/java/expo/modules/audio/AudioModule.kt
 +++ b/node_modules/expo-audio/android/src/main/java/expo/modules/audio/AudioModule.kt
 @@ -26,6 +26,7 @@ import androidx.media3.datasource.okhttp.OkHttpDataSource
@@ -10,7 +10,7 @@ index c9fd366..5c74acf 100644
  import androidx.media3.exoplayer.source.MediaSource
  import androidx.media3.exoplayer.source.ProgressiveMediaSource
  import expo.modules.interfaces.permissions.Permissions
-@@ -553,7 +554,10 @@ class AudioModule : Module() {
+@@ -931,7 +932,10 @@ class AudioModule : Module() {
        CONTENT_TYPE_SS -> SsMediaSource.Factory(factory)
        CONTENT_TYPE_DASH -> DashMediaSource.Factory(factory)
        CONTENT_TYPE_HLS -> HlsMediaSource.Factory(factory)
diff --git a/patches/expo-file-system+19.0.21.patch b/patches/expo-file-system+57.0.7.patch
similarity index 80%
rename from patches/expo-file-system+19.0.21.patch
rename to patches/expo-file-system+57.0.7.patch
index 8633be6f991..37a07aee726 100644
--- a/patches/expo-file-system+19.0.21.patch
+++ b/patches/expo-file-system+57.0.7.patch
@@ -1,11 +1,11 @@
 diff --git a/node_modules/expo-file-system/android/src/main/java/expo/modules/filesystem/legacy/FileSystemLegacyModule.kt b/node_modules/expo-file-system/android/src/main/java/expo/modules/filesystem/legacy/FileSystemLegacyModule.kt
-index f6d43bf..197bebf 100644
+index 4626dac..a17bc35 100644
 --- a/node_modules/expo-file-system/android/src/main/java/expo/modules/filesystem/legacy/FileSystemLegacyModule.kt
 +++ b/node_modules/expo-file-system/android/src/main/java/expo/modules/filesystem/legacy/FileSystemLegacyModule.kt
-@@ -80,11 +80,20 @@ fun slashifyFilePath(path: String?): String? {
- open class FileSystemLegacyModule : Module() {
-   private val context: Context
-     get() = appContext.reactContext ?: throw Exceptions.AppContextLost()
+@@ -83,11 +83,20 @@ open class FileSystemLegacyModule : Module() {
+     get() = appContext.persistentFilesDirectory
+   private val cacheDirectory: File
+     get() = appContext.cacheDirectory
 -  private var client: OkHttpClient? = null
    private var dirPermissionsRequest: Promise? = null
    private val taskHandlers: MutableMap<String, TaskHandler> = HashMap()
diff --git a/patches/expo-font+14.0.10.patch b/patches/expo-font+57.0.4.patch
similarity index 94%
rename from patches/expo-font+14.0.10.patch
rename to patches/expo-font+57.0.4.patch
index 4735b243f74..14a4f88ce5a 100644
--- a/patches/expo-font+14.0.10.patch
+++ b/patches/expo-font+57.0.4.patch
@@ -26,7 +26,7 @@ index 2cd51dc..db368ff 100644
 +                val typeface = runCatching { Typeface.createFromAsset(context.assets, candidate) }.getOrNull()
 +                if (typeface != null) {
 +                    ReactFontManager.getInstance().setTypeface(fontFamilyName, Typeface.NORMAL, typeface)
-+                    loadedFonts = loadedFonts.toMutableSet().apply { add(fontFamilyName) }.toList()
++                    loadedFonts = getLoadedFonts().toMutableSet().apply { add(fontFamilyName) }.toList()
 +                    return@AsyncFunction // Exit early if we successfully loaded the font
 +                }
 +            }
diff --git a/patches/react-native+0.81.5.patch b/patches/react-native+0.81.5.patch
deleted file mode 100644
index 8c17708ee96..00000000000
--- a/patches/react-native+0.81.5.patch
+++ /dev/null
@@ -1,38 +0,0 @@
-diff --git a/node_modules/react-native/React/Views/RCTViewManager.m b/node_modules/react-native/React/Views/RCTViewManager.m
-index f017cb8..f6aaafb 100644
---- a/node_modules/react-native/React/Views/RCTViewManager.m
-+++ b/node_modules/react-native/React/Views/RCTViewManager.m
-@@ -225,7 +225,9 @@ RCT_CUSTOM_VIEW_PROPERTY(accessibilityRole, UIAccessibilityTraits, RCTView)
- {
-   UIAccessibilityTraits accessibilityRoleTraits =
-       json ? [RCTConvert UIAccessibilityTraits:json] : UIAccessibilityTraitNone;
--  if (view.reactAccessibilityElement.accessibilityRoleTraits != accessibilityRoleTraits) {
-+    NSString *roleString = json ? [RCTConvert NSString:json] : nil;
-+    if (view.reactAccessibilityElement.accessibilityRoleTraits != accessibilityRoleTraits || view.reactAccessibilityElement.accessibilityRole != roleString) {
-+
-     view.accessibilityRoleTraits = accessibilityRoleTraits;
-     view.reactAccessibilityElement.accessibilityRole = json ? [RCTConvert NSString:json] : nil;
-     [self updateAccessibilityTraitsForRole:view withDefaultView:defaultView];
-@@ -235,7 +237,8 @@ RCT_CUSTOM_VIEW_PROPERTY(accessibilityRole, UIAccessibilityTraits, RCTView)
- RCT_CUSTOM_VIEW_PROPERTY(role, UIAccessibilityTraits, RCTView)
- {
-   UIAccessibilityTraits roleTraits = json ? [RCTConvert UIAccessibilityTraits:json] : UIAccessibilityTraitNone;
--  if (view.reactAccessibilityElement.roleTraits != roleTraits) {
-+    NSString *roleString = json ? [RCTConvert NSString:json] : nil;
-+    if (view.reactAccessibilityElement.roleTraits != roleTraits || view.reactAccessibilityElement.role != roleString) {
-     view.roleTraits = roleTraits;
-     view.reactAccessibilityElement.role = json ? [RCTConvert NSString:json] : nil;
-     [self updateAccessibilityTraitsForRole:view withDefaultView:defaultView];
-diff --git a/node_modules/react-native/scripts/cocoapods/new_architecture.rb b/node_modules/react-native/scripts/cocoapods/new_architecture.rb
-index 7d8f8e6..d2852a2 100644
---- a/node_modules/react-native/scripts/cocoapods/new_architecture.rb
-+++ b/node_modules/react-native/scripts/cocoapods/new_architecture.rb
-@@ -163,7 +163,7 @@ class NewArchitectureHelper
-             .uniq{ |p| p.path }
-             .map{ |p| p.path }
- 
--        excluded_info_plist = ["/Pods", "Tests", "metainternal", ".bundle", "build/", "DerivedData/"]
-+        excluded_info_plist = ["/Pods", "Tests", "metainternal", ".bundle", "build/", "DerivedData/", ".xcframework", ".framework"]
-         projectPaths.each do |projectPath|
-             projectFolderPath = File.dirname(projectPath)
-             infoPlistFiles = `find #{projectFolderPath} -name "Info.plist"`
diff --git a/patches/react-native-enriched-markdown+1.0.2.patch b/patches/react-native-enriched-markdown+1.0.2.patch
new file mode 100644
index 00000000000..b23b5a13e13
--- /dev/null
+++ b/patches/react-native-enriched-markdown+1.0.2.patch
@@ -0,0 +1,377 @@
+diff --git a/node_modules/react-native-enriched-markdown/jest.d.ts b/node_modules/react-native-enriched-markdown/jest.d.ts
+index 0000000..0000000 100644
+--- a/node_modules/react-native-enriched-markdown/jest.d.ts
++++ b/node_modules/react-native-enriched-markdown/jest.d.ts
+@@ -1 +1,12 @@
+-export * from './src/jest';
++import type { ComponentType } from 'react';
++import type {
++	EnrichedMarkdownTextProps,
++	EnrichedMarkdownTextInputProps,
++	DEFAULT_ACCESSIBILITY_LABELS as DefaultAccessibilityLabels,
++	resolveAccessibilityLabels as ResolveAccessibilityLabels
++} from './lib/typescript/src/index';
++
++export declare const EnrichedMarkdownText: ComponentType<EnrichedMarkdownTextProps>;
++export declare const EnrichedMarkdownTextInput: ComponentType<EnrichedMarkdownTextInputProps>;
++export declare const DEFAULT_ACCESSIBILITY_LABELS: typeof DefaultAccessibilityLabels;
++export declare const resolveAccessibilityLabels: typeof ResolveAccessibilityLabels;
+diff --git a/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/spans/ImageSpan.kt b/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/spans/ImageSpan.kt
+index 0bac034784..c2d2915ba3 100644
+--- a/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/spans/ImageSpan.kt
++++ b/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/spans/ImageSpan.kt
+@@ -4,11 +4,15 @@ import android.content.Context
+ import android.graphics.Bitmap
+ import android.graphics.Canvas
+ import android.graphics.Color
++import android.graphics.ImageDecoder
+ import android.graphics.Paint
+ import android.graphics.Path
++import android.graphics.drawable.Animatable
++import android.graphics.drawable.AnimatedImageDrawable
+ import android.graphics.drawable.Drawable
+ import android.net.Uri
+ import android.os.Build
++import android.os.SystemClock
+ import android.text.Spannable
+ import android.text.Spanned
+ import android.text.style.LeadingMarginSpan
+@@ -25,6 +29,7 @@ import com.swmansion.enriched.markdown.utils.text.ImageCache
+ import com.swmansion.enriched.markdown.utils.text.ImageDownloader
+ import com.swmansion.enriched.markdown.utils.text.LocalImageLoader
+ import java.lang.ref.WeakReference
++import java.nio.ByteBuffer
+ import java.util.concurrent.Executors
+ import android.text.style.ImageSpan as AndroidImageSpan
+ import android.text.style.LineHeightSpan as AndroidLineHeightSpan
+@@ -44,7 +49,7 @@ class ImageSpan(
+   private var loadedDrawable: Drawable? = null
+   private val height: Int = if (isInline) styleConfig.inlineImageStyle.size.toInt() else styleConfig.imageStyle.height.toInt()
+ 
+-  private val borderRadiusPx: Int = styleConfig.imageStyle.borderRadius.toInt()
++  private val borderRadiusPx: Int = if (isInline) 0 else styleConfig.imageStyle.borderRadius.toInt()
+   private val maxHeightPx: Int = if (isInline) 0 else styleConfig.imageStyle.maxHeight.toInt()
+   private val aspectRatio: Float = if (isInline) 0f else styleConfig.imageStyle.aspectRatio
+   private val resizeMode: String = if (isInline) "" else styleConfig.imageStyle.resizeMode
+@@ -68,6 +73,43 @@ class ImageSpan(
+   private var viewRef: WeakReference<TextView>? = null
+   private var sourceDrawable: Drawable? = null
+ 
++  private val animationCallback =
++    object : Drawable.Callback {
++      override fun invalidateDrawable(who: Drawable) {
++        viewRef?.get()?.invalidate()
++      }
++
++      override fun scheduleDrawable(
++        who: Drawable,
++        what: Runnable,
++        `when`: Long,
++      ) {
++        viewRef?.get()?.postDelayed(what, `when` - SystemClock.uptimeMillis())
++      }
++
++      override fun unscheduleDrawable(
++        who: Drawable,
++        what: Runnable,
++      ) {
++        viewRef?.get()?.removeCallbacks(what)
++      }
++    }
++
++  private fun decodeAnimatedDrawable(): Drawable? {
++    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.P) return null
++    val bytes = ImageDownloader.animatedSource(requestKey) ?: return null
++    return try {
++      val drawable = ImageDecoder.decodeDrawable(ImageDecoder.createSource(ByteBuffer.wrap(bytes)))
++      (drawable as? AnimatedImageDrawable)?.apply {
++        callback = animationCallback
++        start()
++      }
++    } catch (e: Exception) {
++      Log.e("ImageSpan", "Failed to decode animated image: $imageUrl", e)
++      null
++    }
++  }
++
+   private fun intrinsicImageSize(): Pair<Int, Int> {
+     sourceDrawable?.let { return it.intrinsicWidth to it.intrinsicHeight }
+     val cached = ImageCache.getOriginal(imageUrl) ?: return 0 to 0
+@@ -110,7 +152,7 @@ class ImageSpan(
+     if (scheme == "http" || scheme == "https") {
+       ImageDownloader.download(context, imageUrl, requestHeaders) { bitmap ->
+         if (bitmap != null) {
+-          sourceDrawable = bitmap.toDrawable(context.resources)
++          sourceDrawable = decodeAnimatedDrawable() ?: bitmap.toDrawable(context.resources)
+           wrapAndAssignDrawable()
+         }
+       }
+@@ -137,7 +179,9 @@ class ImageSpan(
+ 
+     boxHeight = resolveBoxHeight(targetWidth)
+ 
+-    val cachedBitmap = ImageCache.getProcessed(requestKey, targetWidth, boxHeight, borderRadiusPx, resizeMode)
++    val isAnimated = base is Animatable
++    val cachedBitmap =
++      if (isAnimated) null else ImageCache.getProcessed(requestKey, targetWidth, boxHeight, borderRadiusPx, resizeMode)
+ 
+     if (cachedBitmap != null) {
+       loadedDrawable =
+@@ -154,7 +198,7 @@ class ImageSpan(
+           isBlockImage = !isInline,
+           resizeMode = resizeMode,
+           legacySizing = legacySizing,
+-          cacheKey = CacheKey(requestKey, targetWidth, boxHeight, borderRadiusPx, resizeMode),
++          cacheKey = if (isAnimated) null else CacheKey(requestKey, targetWidth, boxHeight, borderRadiusPx, resizeMode),
+         )
+     }
+     requestReflow()
+diff --git a/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/utils/text/ImageDownloader.kt b/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/utils/text/ImageDownloader.kt
+index 7a2071e4d8..746ef5f9df 100644
+--- a/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/utils/text/ImageDownloader.kt
++++ b/node_modules/react-native-enriched-markdown/android/src/main/java/com/swmansion/enriched/markdown/utils/text/ImageDownloader.kt
+@@ -6,6 +6,7 @@ import android.graphics.BitmapFactory
+ import android.os.Handler
+ import android.os.Looper
+ import android.util.Log
++import android.util.LruCache
+ import okhttp3.Cache
+ import okhttp3.Call
+ import okhttp3.Callback
+@@ -20,6 +21,8 @@ object ImageDownloader {
+   private const val TAG = "ImageDownloader"
+   private const val DISK_CACHE_SIZE = 100L * 1024 * 1024
+   private const val TIMEOUT = 15L
++  private const val ANIMATED_SOURCES_SIZE = 8 * 1024 * 1024
++  private const val WEBP_ANIMATION_FLAG = 0x02
+ 
+   private val mainHandler = Handler(Looper.getMainLooper())
+ 
+@@ -29,6 +32,26 @@ object ImageDownloader {
+ 
+   private val inFlight = HashMap<String, MutableList<(Bitmap?) -> Unit>>()
+ 
++  private val animatedSources =
++    object : LruCache<String, ByteArray>(ANIMATED_SOURCES_SIZE) {
++      override fun sizeOf(
++        key: String,
++        value: ByteArray,
++      ): Int = value.size
++    }
++
++  fun animatedSource(requestKey: String): ByteArray? = animatedSources.get(requestKey)
++
++  private fun isAnimatedFormat(bytes: ByteArray): Boolean {
++    val isGif = bytes.size > 4 && String(bytes, 0, 4, Charsets.US_ASCII) == "GIF8"
++    val isAnimatedWebp =
++      bytes.size > 20 &&
++        String(bytes, 0, 4, Charsets.US_ASCII) == "RIFF" &&
++        String(bytes, 8, 8, Charsets.US_ASCII) == "WEBPVP8X" &&
++        (bytes[20].toInt() and WEBP_ANIMATION_FLAG) != 0
++    return isGif || isAnimatedWebp
++  }
++
+   private fun getClient(context: Context): OkHttpClient =
+     client ?: synchronized(this) {
+       client ?: buildClient(context).also {
+@@ -85,6 +108,7 @@ object ImageDownloader {
+             response.use {
+               try {
+                 val bytes = it.body?.bytes() ?: return@use null
++                if (isAnimatedFormat(bytes)) animatedSources.put(requestKey, bytes)
+                 decodeDownsampled(bytes, maxTargetWidth)
+               } catch (_: OutOfMemoryError) {
+                 Log.e(TAG, "OOM decoding image: $url")
+diff --git a/node_modules/react-native-enriched-markdown/ios/attachments/ENRMImageAttachment.m b/node_modules/react-native-enriched-markdown/ios/attachments/ENRMImageAttachment.m
+index 3a8f80a1ca..b54a8f95e6 100644
+--- a/node_modules/react-native-enriched-markdown/ios/attachments/ENRMImageAttachment.m
++++ b/node_modules/react-native-enriched-markdown/ios/attachments/ENRMImageAttachment.m
+@@ -36,6 +36,9 @@ static NSMapTable<NSString *, ENRMImageAttachment *> *_attachmentRegistry;
+ @property (nonatomic, strong) RCTUIImage *loadedImage;
+ @property (nonatomic, strong) RCTUIImage *placeholderImage;
+ @property (nonatomic, copy) NSString *lastProcessedKey;
++@property (nonatomic, strong) NSHashTable<NSTextContainer *> *displayedContainers;
++@property (nonatomic, strong, nullable) NSTimer *animationTimer;
++@property (nonatomic, assign) NSUInteger frameIndex;
+ 
+ @end
+ 
+@@ -72,8 +75,9 @@ static NSMapTable<NSString *, ENRMImageAttachment *> *_attachmentRegistry;
+ 
+ + (instancetype)attachmentForURL:(NSString *)imageURL config:(StyleConfig *)config isInline:(BOOL)isInline
+ {
+-  NSString *key =
+-      [NSString stringWithFormat:@"%@_%d", ENRMImageCacheKey(imageURL, [config imageRequestHeaders]), isInline];
++  CGFloat height = isInline ? [config inlineImageSize] : [config imageHeight];
++  NSString *key = [NSString stringWithFormat:@"%@_%d_%.2f_%.2f", ENRMImageCacheKey(imageURL, [config imageRequestHeaders]),
++                                             isInline, height, [config imageMaxHeight]];
+   ENRMImageAttachment *existing = [[self attachmentRegistry] objectForKey:key];
+   if (existing && existing.loadedImage) {
+     return existing;
+@@ -101,7 +105,8 @@ static NSMapTable<NSString *, ENRMImageAttachment *> *_attachmentRegistry;
+     _cachedMaxHeight = [config imageMaxHeight];
+     _cachedAspectRatio = [config imageAspectRatio];
+     _cachedResizeMode = [config imageResizeMode];
+-    _cachedBorderRadius = [config imageBorderRadius];
++    _cachedBorderRadius = isInline ? 0 : [config imageBorderRadius];
++    _displayedContainers = [NSHashTable weakObjectsHashTable];
+ 
+     [self setupPlaceholder];
+     [self startDownloadingImage];
+@@ -172,13 +177,62 @@ static NSMapTable<NSString *, ENRMImageAttachment *> *_attachmentRegistry;
+                 characterIndex:(NSUInteger)characterIndex
+ {
+   self.textContainer = textContainer;
++  if (textContainer) {
++    [self.displayedContainers addObject:textContainer];
++  }
+ 
+   if (self.originalImage && imageBounds.size.width > 0) {
+     self.bounds = imageBounds;
+     [self processAndApplyImage:self.originalImage withTargetWidth:imageBounds.size.width];
+   }
+ 
+-  return self.loadedImage ?: self.placeholderImage;
++  return [self currentFrame] ?: self.placeholderImage;
++}
++
++- (void)dealloc
++{
++  [_animationTimer invalidate];
++}
++
++- (void)setLoadedImage:(RCTUIImage *)loadedImage
++{
++  _loadedImage = loadedImage;
++  self.frameIndex = 0;
++  [self.animationTimer invalidate];
++  self.animationTimer = nil;
++#if !TARGET_OS_OSX
++  NSUInteger frameCount = loadedImage.images.count;
++  if (frameCount <= 1 || loadedImage.duration <= 0)
++    return;
++
++  __weak typeof(self) weakSelf = self;
++  self.animationTimer = [NSTimer scheduledTimerWithTimeInterval:loadedImage.duration / frameCount
++                                                        repeats:YES
++                                                          block:^(NSTimer *timer) { [weakSelf advanceFrame]; }];
++#endif
++}
++
++- (RCTUIImage *)currentFrame
++{
++#if !TARGET_OS_OSX
++  NSArray<RCTUIImage *> *frames = self.loadedImage.images;
++  if (frames.count > 1) {
++    return frames[self.frameIndex % frames.count];
++  }
++#endif
++  return self.loadedImage;
++}
++
++- (void)advanceFrame
++{
++  self.frameIndex += 1;
++  for (NSTextContainer *container in self.displayedContainers.allObjects) {
++    NSLayoutManager *layoutManager = container.layoutManager;
++    NSRange range = [self findAttachmentRangeInText:layoutManager.textStorage];
++    if (range.location != NSNotFound) {
++      [layoutManager invalidateDisplayForCharacterRange:range];
++    }
++  }
+ }
+ 
+ - (void)handleLoadedImage:(RCTUIImage *)image
+@@ -259,6 +313,19 @@ static NSMapTable<NSString *, ENRMImageAttachment *> *_attachmentRegistry;
+                            height:(CGFloat)targetHeight
+                      borderRadius:(CGFloat)radius
+ {
++#if !TARGET_OS_OSX
++  if (image.images.count > 1) {
++    NSMutableArray<RCTUIImage *> *scaledFrames = [NSMutableArray arrayWithCapacity:image.images.count];
++    for (RCTUIImage *frame in image.images) {
++      RCTUIImage *scaledFrame = [self createScaledImage:frame toWidth:targetWidth height:targetHeight borderRadius:radius];
++      if (scaledFrame) {
++        [scaledFrames addObject:scaledFrame];
++      }
++    }
++    return [RCTUIImage animatedImageWithImages:scaledFrames duration:image.duration];
++  }
++#endif
++
+   CGFloat sourceWidth = image.size.width;
+   CGFloat sourceHeight = image.size.height;
+   if (sourceWidth <= 0 || sourceHeight <= 0)
+diff --git a/node_modules/react-native-enriched-markdown/ios/utils/ENRMImageDownloader.m b/node_modules/react-native-enriched-markdown/ios/utils/ENRMImageDownloader.m
+index 974154201f..c2a891d30c 100644
+--- a/node_modules/react-native-enriched-markdown/ios/utils/ENRMImageDownloader.m
++++ b/node_modules/react-native-enriched-markdown/ios/utils/ENRMImageDownloader.m
+@@ -2,6 +2,7 @@
+ #import "ENRMImageAttachment.h"
+ #import "ENRMLocalImageLoader.h"
+ #import <CommonCrypto/CommonDigest.h>
++#import <ImageIO/ImageIO.h>
+ #include <TargetConditionals.h>
+ 
+ static const NSUInteger kDiskCacheMemoryCapacity = 10 * 1024 * 1024;
+@@ -15,6 +16,51 @@ static inline NSUInteger ENRMImageByteCost(RCTUIImage *image)
+   return CGImageGetBytesPerRow(cgImage) * CGImageGetHeight(cgImage);
+ }
+ 
++#if !TARGET_OS_OSX
++static NSTimeInterval ENRMFrameDuration(CGImageSourceRef source, size_t index)
++{
++  NSDictionary *properties = CFBridgingRelease(CGImageSourceCopyPropertiesAtIndex(source, index, NULL));
++  NSDictionary *frameProperties = properties[(NSString *)kCGImagePropertyGIFDictionary]
++                                      ?: properties[(NSString *)kCGImagePropertyPNGDictionary]
++                                      ?: properties[(NSString *)kCGImagePropertyWebPDictionary];
++  NSNumber *delay = frameProperties[(NSString *)kCGImagePropertyGIFUnclampedDelayTime];
++  if (delay.doubleValue <= 0) {
++    delay = frameProperties[(NSString *)kCGImagePropertyGIFDelayTime];
++  }
++  return delay.doubleValue >= 0.02 ? delay.doubleValue : 0.1;
++}
++
++static RCTUIImage *ENRMImageFromData(NSData *data)
++{
++  CGImageSourceRef source = CGImageSourceCreateWithData((__bridge CFDataRef)data, NULL);
++  if (!source)
++    return nil;
++
++  size_t frameCount = CGImageSourceGetCount(source);
++  if (frameCount <= 1) {
++    CFRelease(source);
++    return [RCTUIImage imageWithData:data];
++  }
++
++  NSMutableArray<RCTUIImage *> *frames = [NSMutableArray arrayWithCapacity:frameCount];
++  NSTimeInterval duration = 0;
++  for (size_t index = 0; index < frameCount; index++) {
++    CGImageRef frame = CGImageSourceCreateImageAtIndex(source, index, NULL);
++    if (!frame)
++      continue;
++    [frames addObject:[RCTUIImage imageWithCGImage:frame]];
++    CGImageRelease(frame);
++    duration += ENRMFrameDuration(source, index);
++  }
++  CFRelease(source);
++
++  if (frames.count <= 1) {
++    return frames.firstObject;
++  }
++  return [RCTUIImage animatedImageWithImages:frames duration:duration];
++}
++#endif
++
+ NSString *ENRMImageCacheKey(NSString *url, NSDictionary<NSString *, NSString *> *headers)
+ {
+   if (headers.count == 0) {
+@@ -116,7 +162,7 @@ NSString *ENRMImageCacheKey(NSString *url, NSDictionary<NSString *, NSString *>
+   [[_session dataTaskWithRequest:request
+                completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+ #if !TARGET_OS_OSX
+-                 RCTUIImage *image = (data && !error) ? [RCTUIImage imageWithData:data] : nil;
++                 RCTUIImage *image = (data && !error) ? ENRMImageFromData(data) : nil;
+ #else
+         RCTUIImage *image = (data && !error) ? [[RCTUIImage alloc] initWithData:data] : nil;
+ #endif
diff --git a/patches/react-native-gesture-handler+2.28.0.patch b/patches/react-native-gesture-handler+3.3.0.patch
similarity index 54%
rename from patches/react-native-gesture-handler+2.28.0.patch
rename to patches/react-native-gesture-handler+3.3.0.patch
index 309449cc7c5..d5a28998eb6 100644
--- a/patches/react-native-gesture-handler+2.28.0.patch
+++ b/patches/react-native-gesture-handler+3.3.0.patch
@@ -1,9 +1,35 @@
+diff --git a/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt b/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt
+index f964945..8df6494 100644
+--- a/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt
++++ b/node_modules/react-native-gesture-handler/android/src/main/java/com/swmansion/gesturehandler/react/RNGestureHandlerButtonViewManager.kt
+@@ -1459,9 +1459,21 @@ class RNGestureHandlerButtonViewManager :
+ 
+     override fun onKeyUp(keyCode: Int, event: KeyEvent?): Boolean {
+       receivedKeyEvent = true
++      if (isActivationKey(keyCode) && isEnabled && event?.isCanceled != true) {
++        performClick()
++        return true
++      }
+       return super.onKeyUp(keyCode, event)
+     }
+ 
++    private fun isActivationKey(keyCode: Int) = when (keyCode) {
++      KeyEvent.KEYCODE_DPAD_CENTER,
++      KeyEvent.KEYCODE_ENTER,
++      KeyEvent.KEYCODE_NUMPAD_ENTER,
++      KeyEvent.KEYCODE_SPACE -> true
++      else -> false
++    }
++
+     override fun performClick(): Boolean {
+       // don't perform click when a child button is pressed (mainly to prevent sound effect of
+       // a parent button from playing)
 diff --git a/node_modules/react-native-gesture-handler/apple/RNGestureHandlerButton.mm b/node_modules/react-native-gesture-handler/apple/RNGestureHandlerButton.mm
-index 2296c39..0a872ba 100644
+index 994b3d3..c46411b 100644
 --- a/node_modules/react-native-gesture-handler/apple/RNGestureHandlerButton.mm
 +++ b/node_modules/react-native-gesture-handler/apple/RNGestureHandlerButton.mm
-@@ -89,6 +89,52 @@
- }
+@@ -1274,6 +1274,52 @@ static CATransform3D RNGHCenterScaleTransform(NSRect bounds, CGFloat scale)
+ #endif
  
  #if !TARGET_OS_OSX
 +- (BOOL)canBecomeFocused
diff --git a/patches/react-native-keyboard-controller+1.18.5.patch b/patches/react-native-keyboard-controller+1.18.5.patch
new file mode 100644
index 00000000000..82f20514f2e
--- /dev/null
+++ b/patches/react-native-keyboard-controller+1.18.5.patch
@@ -0,0 +1,26 @@
+diff --git a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt
+index e13177c..45bc4e6 100644
+--- a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt
++++ b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/EdgeToEdgeReactViewGroup.kt
+@@ -91,7 +91,7 @@ class EdgeToEdgeReactViewGroup(
+     this.deactivate()
+   }
+
+-  override fun onConfigurationChanged(newConfig: Configuration?) {
++  override fun onConfigurationChanged(newConfig: Configuration) {
+     this.reApplyWindowInsets()
+   }
+   // endregion
+diff --git a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/background/KeyboardBackgroundViewGroup.kt b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/background/KeyboardBackgroundViewGroup.kt
+index f19514f..8de0cf7 100644
+--- a/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/background/KeyboardBackgroundViewGroup.kt
++++ b/node_modules/react-native-keyboard-controller/android/src/main/java/com/reactnativekeyboardcontroller/views/background/KeyboardBackgroundViewGroup.kt
+@@ -17,7 +17,7 @@ class KeyboardBackgroundViewGroup(
+   }
+
+   // theme changed
+-  override fun onConfigurationChanged(newConfig: Configuration?) {
++  override fun onConfigurationChanged(newConfig: Configuration) {
+     super.onConfigurationChanged(newConfig)
+     super.setBackgroundColor(reactContext.getInputMethodColor())
+   }
diff --git a/patches/react-native-mmkv+4.1.2.patch b/patches/react-native-mmkv+4.1.2.patch
deleted file mode 100644
index e11f0299747..00000000000
--- a/patches/react-native-mmkv+4.1.2.patch
+++ /dev/null
@@ -1,26 +0,0 @@
-diff --git a/node_modules/react-native-mmkv/src/createMMKV/createMMKV.ts b/node_modules/react-native-mmkv/src/createMMKV/createMMKV.ts
-index d5142f9..5da521f 100644
---- a/node_modules/react-native-mmkv/src/createMMKV/createMMKV.ts
-+++ b/node_modules/react-native-mmkv/src/createMMKV/createMMKV.ts
-@@ -2,15 +2,15 @@ import type { MMKV } from '../specs/MMKV.nitro'
- import type { Configuration } from '../specs/MMKVFactory.nitro'
- import { Platform } from 'react-native'
- import { addMemoryWarningListener } from '../addMemoryWarningListener/addMemoryWarningListener'
--import { isTest } from '../isTest'
--import { createMockMMKV } from './createMockMMKV'
-+// import { isTest } from '../isTest'
-+// import { createMockMMKV } from './createMockMMKV' // Disabled via patch-package for E2E tests
- import { getMMKVFactory, getPlatformContext } from '../getMMKVFactory'
- 
- export function createMMKV(configuration?: Configuration): MMKV {
--  if (isTest()) {
--    // In a test environment, we mock the MMKV instance.
--    return createMockMMKV(configuration)
--  }
-+  //if (isTest()) {
-+  // In a test environment, we mock the MMKV instance.
-+  //  return createMockMMKV(configuration)
-+  //}
- 
-   const factory = getMMKVFactory()
- 
diff --git a/patches/react-native-screens+4.28.0.patch b/patches/react-native-screens+4.28.0.patch
new file mode 100644
index 00000000000..770f7cb0186
--- /dev/null
+++ b/patches/react-native-screens+4.28.0.patch
@@ -0,0 +1,1093 @@
+diff --git a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
+index fa1b773..8fe75d7 100644
+--- a/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
++++ b/node_modules/react-native-screens/android/src/main/java/com/swmansion/rnscreens/ScreenStackHeaderConfigViewManager.kt
+@@ -3,6 +3,7 @@ package com.swmansion.rnscreens
+ import android.view.View
+ import com.facebook.react.bridge.JSApplicationCausedNativeException
+ import com.facebook.react.bridge.ReadableArray
++import com.facebook.react.bridge.ReadableMap
+ import com.facebook.react.module.annotations.ReactModule
+ import com.facebook.react.uimanager.ReactStylesDiffMap
+ import com.facebook.react.uimanager.StateWrapper
+@@ -236,6 +237,36 @@ class ScreenStackHeaderConfigViewManager :
+         value: String?,
+     ) = Unit
+ 
++    override fun setSubtitle(
++        view: ScreenStackHeaderConfig?,
++        value: String?,
++    ) = Unit
++
++    override fun setTitleImageSource(
++        view: ScreenStackHeaderConfig?,
++        value: ReadableMap?,
++    ) = Unit
++
++    override fun setSubtitleImageSource(
++        view: ScreenStackHeaderConfig?,
++        value: ReadableMap?,
++    ) = Unit
++
++    override fun setSubtitleColor(
++        view: ScreenStackHeaderConfig?,
++        value: Int?,
++    ) = Unit
++
++    override fun setTitlePressEnabled(
++        view: ScreenStackHeaderConfig?,
++        value: Boolean,
++    ) = Unit
++
++    override fun setTitleTestID(
++        view: ScreenStackHeaderConfig?,
++        value: String?,
++    ) = Unit
++
+     override fun setBackTitleFontFamily(
+         view: ScreenStackHeaderConfig?,
+         value: String?,
+diff --git a/node_modules/react-native-screens/ios/helpers/image/RNSImageLoadingHelper.mm b/node_modules/react-native-screens/ios/helpers/image/RNSImageLoadingHelper.mm
+index 64beb49..14bb54a 100644
+--- a/node_modules/react-native-screens/ios/helpers/image/RNSImageLoadingHelper.mm
++++ b/node_modules/react-native-screens/ios/helpers/image/RNSImageLoadingHelper.mm
+@@ -13,6 +13,15 @@
+   RCTImageSource *imageSource = [RCTConvert RCTImageSource:jsonImageSource];
+   RCTAssert(imageSource != nil, @"[RNScreens] Expected nonnil image source");
+ 
++  NSNumber *alignmentInset = jsonImageSource[@"alignmentInset"];
++  if (alignmentInset != nil) {
++    CGFloat inset = alignmentInset.doubleValue;
++    void (^loadingCompletionBlock)(UIImage *_Nullable) = imageLoadingCompletionBlock;
++    imageLoadingCompletionBlock = ^(UIImage *_Nullable image) {
++      loadingCompletionBlock([image imageWithAlignmentRectInsets:UIEdgeInsetsMake(inset, inset, inset, inset)]);
++    };
++  }
++
+ #if !defined(NDEBUG) // We're in debug mode here
+   if (imageSource.packagerAsset) {
+     // We use `+ [RCTConvert UIImage:]` only in debug mode, because it is deprecated, however
+@@ -38,6 +47,15 @@
+   RCTAssert(imageSource != nil, @"[RNScreens] imageSource must not be nil");
+   RCTAssert(imageLoader != nil, @"[RNScreens] imageLoader must not be nil");
+ 
++  if (imageSource.request.URL.isFileURL) {
++    UIImage *image = [UIImage imageWithContentsOfFile:imageSource.request.URL.path];
++    if (image != nil) {
++      image = [UIImage imageWithCGImage:image.CGImage scale:imageSource.scale orientation:image.imageOrientation];
++    }
++    imageLoadingCompletionBlock([RNSImageLoadingHelper handleRenderingModeForImage:image isTemplate:isTemplate]);
++    return;
++  }
++
+   [imageLoader loadImageWithURLRequest:imageSource.request
+       size:imageSource.size
+       scale:imageSource.scale
+diff --git a/node_modules/react-native-screens/ios/RNSBarButtonItem.mm b/node_modules/react-native-screens/ios/RNSBarButtonItem.mm
+index 76a39d4..160a373 100644
+--- a/node_modules/react-native-screens/ios/RNSBarButtonItem.mm
++++ b/node_modules/react-native-screens/ios/RNSBarButtonItem.mm
+@@ -126,10 +126,34 @@ static UIMenuOptions RNSMakeUIMenuOptionsFromConfig(NSDictionary *config);
+     self.action = @selector(handleBarButtonItemPress:);
+     _itemAction = action;
+     _buttonId = buttonId;
++    if ([dict[@"showsLabelWithIcon"] boolValue] && self.image != nil && self.title.length > 0) {
++      [self useImageAndTitleButton];
++    }
+   }
+   return self;
+ }
+ 
++- (void)useImageAndTitleButton
++{
++  UIButtonConfiguration *configuration = [UIButtonConfiguration plainButtonConfiguration];
++  configuration.image = self.image;
++  configuration.title = self.title;
++  configuration.imagePadding = 6;
++  if (self.tintColor != nil) {
++    configuration.baseForegroundColor = self.tintColor;
++  }
++  configuration.preferredSymbolConfigurationForImage = [[UIImageSymbolConfiguration
++      configurationWithTextStyle:UIFontTextStyleBody
++                           scale:UIImageSymbolScaleLarge]
++      configurationByApplyingConfiguration:[UIImageSymbolConfiguration configurationWithWeight:UIImageSymbolWeightSemibold]];
++  UIButton *button = [UIButton buttonWithConfiguration:configuration primaryAction:nil];
++  button.automaticallyUpdatesConfiguration = NO;
++  [button addTarget:self action:@selector(handleBarButtonItemPress:) forControlEvents:UIControlEventPrimaryActionTriggered];
++  button.accessibilityLabel = self.accessibilityLabel;
++  [button setContentCompressionResistancePriority:UILayoutPriorityRequired forAxis:UILayoutConstraintAxisHorizontal];
++  self.customView = button;
++}
++
+ + (void)resolveImageFromConfig:(NSDictionary *)dict
+                    imageLoader:(RCTImageLoader *)imageLoader
+                completionBlock:(void (^)(UIImage *_Nullable))completionBlock
+diff --git a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.h b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.h
+index 8a41697..6e1b3e3 100644
+--- a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.h
++++ b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.h
+@@ -8,10 +8,14 @@
+ #import "RNSScreenStackHeaderSubview.h"
+ #import "RNSSearchBar.h"
+ 
++@class RCTImageSource;
++
+ @interface NSString (RNSStringUtil)
+ 
+ + (BOOL)rnscreens_isBlankOrNull:(nullable NSString *)string;
+ 
+++ (nullable NSString *)rnscreens_stringByStrippingTitleGlyph:(nullable NSString *)string;
++
+ @end
+ 
+ @interface RNSScreenStackHeaderConfig : RNSReactBaseView
+@@ -23,10 +27,16 @@
+ NS_ASSUME_NONNULL_BEGIN
+ 
+ @property (nonatomic, retain) NSString *title;
++@property (nonatomic, retain) NSString *subtitle;
+ @property (nonatomic, retain) NSString *titleFontFamily;
+ @property (nonatomic, retain) NSNumber *titleFontSize;
+ @property (nonatomic, retain) NSString *titleFontWeight;
+ @property (nonatomic, retain) UIColor *titleColor;
++@property (nonatomic, retain, nullable) UIColor *subtitleColor;
++@property (nonatomic, retain, nullable) RCTImageSource *titleImageSource;
++@property (nonatomic, retain, nullable) RCTImageSource *subtitleImageSource;
++@property (nonatomic) BOOL titlePressEnabled;
++@property (nonatomic, retain, nullable) NSString *titleTestID;
+ @property (nonatomic, retain) NSString *backTitle;
+ @property (nonatomic, retain) NSString *backTitleFontFamily;
+ @property (nonatomic, retain) NSNumber *backTitleFontSize;
+diff --git a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.mm b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.mm
+index a54cb63..366121a 100644
+--- a/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.mm
++++ b/node_modules/react-native-screens/ios/RNSScreenStackHeaderConfig.mm
+@@ -1,4 +1,5 @@
+ #import "RNSScreenStackHeaderConfig.h"
++#import <objc/runtime.h>
+ #import <React/RCTConversions.h>
+ #import <React/RCTFabricComponentsPlugins.h>
+ #import <React/RCTFont.h>
+@@ -13,6 +14,7 @@
+ #import <react/renderer/components/rnscreens/EventEmitters.h>
+ #import <react/renderer/components/rnscreens/Props.h>
+ #import <react/renderer/components/rnscreens/RCTComponentViewHelpers.h>
++#import <react/renderer/imagemanager/RCTImagePrimitivesConversions.h>
+ #import <react/utils/ManagedObjectWrapper.h>
+ #import <rnscreens/RNSScreenStackHeaderConfigComponentDescriptor.h>
+ #import "RCTImageComponentView+RNSScreenStackHeaderConfig.h"
+@@ -20,6 +22,7 @@
+ #import "RNSBarButtonItem.h"
+ #import "RNSConvert.h"
+ #import "RNSDefines.h"
++#import "RNSImageLoadingHelper.h"
+ #import "RNSScreen.h"
+ #import "RNSSearchBar.h"
+ #import "UINavigationBar+RNSUtility.h"
+@@ -28,11 +31,200 @@ namespace react = facebook::react;
+ 
+ static const NSNumber *const DEFAULT_TITLE_FONT_SIZE = @17;
+ static const NSNumber *const DEFAULT_TITLE_LARGE_FONT_SIZE = @34;
++static const NSNumber *const DEFAULT_SUBTITLE_FONT_SIZE = @12;
++
++#define RNS_TITLE_GLYPH_PLACEHOLDER @"\uFFFC"
++#define RNS_TITLE_GLYPH_SPACING_EM 0.2
+ 
+ @interface RCTImageLoader (Private)
+ - (id<RCTImageCache>)imageCache;
+ @end
+ 
++@interface RNSScreenStackHeaderConfig ()
++- (void)emitTitlePress;
++@end
++
++@interface RNSHeaderTitlePressHandler : NSObject <UIGestureRecognizerDelegate>
++@property (nonatomic, weak) UINavigationController *navigationController;
++@property (nonatomic, copy) NSArray<UIView *> *highlightedViews;
++@property (nonatomic) CGRect pressFrame;
+++ (void)installOnNavigationController:(UINavigationController *)navigationController;
++@end
++
++@implementation RNSHeaderTitlePressHandler
++
++static const void *RNSHeaderTitlePressHandlerKey = &RNSHeaderTitlePressHandlerKey;
++static const CGFloat RNSHeaderTitlePressSlop = 8;
++static const CGFloat RNSHeaderTitlePressHighlightAlpha = 0.35;
++
+++ (void)installOnNavigationController:(UINavigationController *)navigationController
++{
++  UINavigationBar *bar = navigationController.navigationBar;
++  RNSHeaderTitlePressHandler *handler = objc_getAssociatedObject(bar, RNSHeaderTitlePressHandlerKey);
++  if (handler != nil) {
++    handler.navigationController = navigationController;
++    [handler scheduleTitleIdentifier];
++    return;
++  }
++  handler = [RNSHeaderTitlePressHandler new];
++  handler.navigationController = navigationController;
++  UILongPressGestureRecognizer *recognizer =
++      [[UILongPressGestureRecognizer alloc] initWithTarget:handler action:@selector(handlePress:)];
++  recognizer.minimumPressDuration = 0;
++  recognizer.allowableMovement = CGFLOAT_MAX;
++  recognizer.cancelsTouchesInView = NO;
++  recognizer.delaysTouchesEnded = NO;
++  recognizer.delegate = handler;
++  [navigationController.view addGestureRecognizer:recognizer];
++  objc_setAssociatedObject(bar, RNSHeaderTitlePressHandlerKey, handler, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
++  [handler scheduleTitleIdentifier];
++}
++
++- (void)scheduleTitleIdentifier
++{
++  __weak RNSHeaderTitlePressHandler *weakSelf = self;
++  dispatch_async(dispatch_get_main_queue(), ^{
++    [weakSelf applyTitleIdentifier];
++  });
++  [self.navigationController.transitionCoordinator
++      animateAlongsideTransition:nil
++                      completion:^(id<UIViewControllerTransitionCoordinatorContext> context) {
++                        [weakSelf applyTitleIdentifier];
++                      }];
++}
++
++- (void)applyTitleIdentifier
++{
++  RNSScreenStackHeaderConfig *config = [self topConfig];
++  if (config.titleTestID == nil) {
++    return;
++  }
++  for (UIView *view in [self titleViewsInBar:self.navigationController.navigationBar forConfig:config]) {
++    if ([view isKindOfClass:[UILabel class]]) {
++      view.accessibilityIdentifier = config.titleTestID;
++    }
++  }
++}
++
++- (nullable RNSScreenStackHeaderConfig *)topConfig
++{
++  UIViewController *top = self.navigationController.topViewController;
++  if (![top isKindOfClass:[RNSScreen class]]) {
++    return nil;
++  }
++  return [((RNSScreen *)top).screenView findHeaderConfig];
++}
++
++- (NSArray<UIView *> *)titleViewsInBar:(UINavigationBar *)bar forConfig:(RNSScreenStackHeaderConfig *)config
++{
++  NSMutableArray<UIView *> *titleViews = [NSMutableArray new];
++  NSMutableArray<UIView *> *pending = [NSMutableArray arrayWithArray:bar.subviews];
++  UIView *topView = self.navigationController.topViewController.view;
++  if (topView != nil) {
++    [pending addObject:topView];
++  }
++  while (pending.count > 0) {
++    UIView *view = pending.lastObject;
++    [pending removeLastObject];
++    if (view.isHidden || view.alpha <= 0 || !CGRectIntersectsRect([view convertRect:view.bounds toView:bar], bar.bounds)) {
++      continue;
++    }
++    if ([view isKindOfClass:[UILabel class]]) {
++      NSString *text = ((UILabel *)view).attributedText.string ?: ((UILabel *)view).text;
++      BOOL isTitle = config.title.length > 0 && [text containsString:config.title];
++      BOOL isSubtitle = config.subtitle.length > 0 && [text containsString:config.subtitle];
++      if (isTitle || isSubtitle) {
++        [titleViews addObject:view];
++        for (UIView *sibling in view.superview.subviews) {
++          if ([sibling isKindOfClass:[UIImageView class]] && !sibling.isHidden && ![titleViews containsObject:sibling]) {
++            [titleViews addObject:sibling];
++          }
++        }
++      }
++      continue;
++    }
++    [pending addObjectsFromArray:view.subviews];
++  }
++  return titleViews;
++}
++
++- (CGRect)frameOfViews:(NSArray<UIView *> *)views inBar:(UINavigationBar *)bar
++{
++  CGRect frame = CGRectNull;
++  for (UIView *view in views) {
++    frame = CGRectUnion(frame, [view convertRect:view.bounds toView:bar]);
++  }
++  return CGRectIsNull(frame) ? frame : CGRectInset(frame, -RNSHeaderTitlePressSlop, -RNSHeaderTitlePressSlop);
++}
++
++- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldReceiveTouch:(UITouch *)touch
++{
++  RNSScreenStackHeaderConfig *config = [self topConfig];
++  if (config == nil || !config.titlePressEnabled) {
++    return NO;
++  }
++  UINavigationBar *bar = self.navigationController.navigationBar;
++  if (!CGRectContainsPoint(bar.bounds, [touch locationInView:bar])) {
++    return NO;
++  }
++  NSArray<UIView *> *titleViews = [self titleViewsInBar:bar forConfig:config];
++  CGRect titleFrame = [self frameOfViews:titleViews inBar:bar];
++  if (CGRectIsNull(titleFrame) || !CGRectContainsPoint(titleFrame, [touch locationInView:bar])) {
++    return NO;
++  }
++  self.highlightedViews = titleViews;
++  self.pressFrame = titleFrame;
++  return YES;
++}
++
++- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
++    shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
++{
++  return YES;
++}
++
++- (void)setHighlighted:(BOOL)highlighted
++{
++  CGFloat alpha = highlighted ? RNSHeaderTitlePressHighlightAlpha : 1;
++  NSArray<UIView *> *views = self.highlightedViews;
++  [UIView animateWithDuration:highlighted ? 0.1 : 0.25
++                        delay:0
++                      options:UIViewAnimationOptionBeginFromCurrentState | UIViewAnimationOptionAllowUserInteraction
++                   animations:^{
++                     for (UIView *view in views) {
++                       view.alpha = alpha;
++                     }
++                   }
++                   completion:nil];
++}
++
++- (void)handlePress:(UILongPressGestureRecognizer *)recognizer
++{
++  BOOL isInside = CGRectContainsPoint(self.pressFrame, [recognizer locationInView:self.navigationController.navigationBar]);
++  switch (recognizer.state) {
++    case UIGestureRecognizerStateBegan:
++    case UIGestureRecognizerStateChanged:
++      [self setHighlighted:isInside];
++      break;
++    case UIGestureRecognizerStateEnded: {
++      [self setHighlighted:NO];
++      RNSScreenStackHeaderConfig *config = [self topConfig];
++      if (isInside && config.titlePressEnabled) {
++        [config emitTitlePress];
++      }
++      break;
++    }
++    case UIGestureRecognizerStateCancelled:
++    case UIGestureRecognizerStateFailed:
++      [self setHighlighted:NO];
++      break;
++    default:
++      break;
++  }
++}
++
++@end
++
+ @implementation NSString (RNSStringUtil)
+ 
+ + (BOOL)rnscreens_isBlankOrNull:(NSString *)string
+@@ -43,6 +235,105 @@ static const NSNumber *const DEFAULT_TITLE_LARGE_FONT_SIZE = @34;
+   return [[string stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceAndNewlineCharacterSet]] length] == 0;
+ }
+ 
+++ (nullable NSString *)rnscreens_stringByStrippingTitleGlyph:(nullable NSString *)string
++{
++  if (string == nil) {
++    return nil;
++  }
++  NSCharacterSet *glyphCharacters =
++      [NSCharacterSet characterSetWithCharactersInString:RNS_TITLE_GLYPH_PLACEHOLDER];
++  return [[string componentsSeparatedByCharactersInSet:glyphCharacters] componentsJoinedByString:@""];
++}
++
++@end
++
++@interface RNSHeaderImageSlot : NSObject
++
++- (nullable UIImage *)resolveImageFromSource:(nullable RCTImageSource *)source
++                             withImageLoader:(nullable RCTImageLoader *)imageLoader
++                                    onLoaded:(nonnull dispatch_block_t)onLoaded;
++
++- (void)reset;
++
++@end
++
++@implementation RNSHeaderImageSlot {
++  NSString *_Nullable _requestedUri;
++  NSUInteger _generation;
++}
++
+++ (NSCache<NSString *, UIImage *> *)sharedImageCache
++{
++  static NSCache<NSString *, UIImage *> *cache;
++  static dispatch_once_t onceToken;
++  dispatch_once(&onceToken, ^{
++    cache = [NSCache new];
++  });
++  return cache;
++}
++
++- (nullable UIImage *)resolveImageFromSource:(nullable RCTImageSource *)source
++                             withImageLoader:(nullable RCTImageLoader *)imageLoader
++                                    onLoaded:(nonnull dispatch_block_t)onLoaded
++{
++  if (source == nil) {
++    [self reset];
++    return nil;
++  }
++
++  NSString *uri = source.request.URL.absoluteString;
++  if (uri == nil) {
++    [self reset];
++    return nil;
++  }
++
++  const BOOL isNewSource = ![uri isEqualToString:_requestedUri];
++  if (isNewSource) {
++    _requestedUri = uri;
++    _generation += 1;
++  }
++
++  UIImage *cachedImage = [[RNSHeaderImageSlot sharedImageCache] objectForKey:uri];
++  if (cachedImage != nil) {
++    return cachedImage;
++  }
++
++  if (!isNewSource || imageLoader == nil) {
++    return nil;
++  }
++
++  const NSUInteger generation = _generation;
++
++  __weak RNSHeaderImageSlot *weakSelf = self;
++  [RNSImageLoadingHelper
++      loadImageFromSource:source
++          withImageLoader:imageLoader
++               asTemplate:YES
++          completionBlock:^(UIImage *image) {
++            RNSHeaderImageSlot *strongSelf = weakSelf;
++            if (strongSelf == nil || generation != strongSelf->_generation) {
++              return;
++            }
++            if (image == nil) {
++#if !defined(NDEBUG)
++              RCTLogWarn(
++                  @"[RNScreens] Failed to load header image source \"%@\", falling back to text-only header.", uri);
++#endif // !defined(NDEBUG)
++              return;
++            }
++            [[RNSHeaderImageSlot sharedImageCache] setObject:image forKey:uri];
++            dispatch_async(dispatch_get_main_queue(), onLoaded);
++          }];
++
++  return [[RNSHeaderImageSlot sharedImageCache] objectForKey:uri];
++}
++
++- (void)reset
++{
++  _requestedUri = nil;
++  _generation += 1;
++}
++
+ @end
+ 
+ @interface RNSScreenStackHeaderConfig () <RCTMountingTransactionObserving>
+@@ -59,6 +350,8 @@ static const NSNumber *const DEFAULT_TITLE_LARGE_FONT_SIZE = @34;
+   /// transaction via RCTMountingTransactionObserving protocol.
+   bool _addedReactSubviewsInCurrentTransaction;
+   RCTImageLoader *_imageLoader;
++  RNSHeaderImageSlot *_titleImageSlot;
++  RNSHeaderImageSlot *_subtitleImageSlot;
+ }
+ 
+ - (instancetype)initWithFrame:(CGRect)frame
+@@ -69,6 +362,8 @@ static const NSNumber *const DEFAULT_TITLE_LARGE_FONT_SIZE = @34;
+     _show = YES;
+     _translucent = NO;
+     _addedReactSubviewsInCurrentTransaction = false;
++    _titleImageSlot = [RNSHeaderImageSlot new];
++    _subtitleImageSlot = [RNSHeaderImageSlot new];
+     _lastSendState = react::RNSScreenStackHeaderConfigState(react::Size{}, react::EdgeInsets{}, react::Point{});
+     [self initProps];
+   }
+@@ -131,6 +426,56 @@ RNS_IGNORE_SUPER_CALL_END
+   return nil;
+ }
+ 
++- (nullable UIImage *)resolvedTitleImage
++{
++  __weak RNSScreenStackHeaderConfig *weakSelf = self;
++  return [_titleImageSlot resolveImageFromSource:_titleImageSource
++                                 withImageLoader:_imageLoader
++                                        onLoaded:^{
++                                          [weakSelf updateViewControllerIfNeeded];
++                                        }];
++}
++
++- (nullable UIImage *)resolvedSubtitleImage
++{
++  __weak RNSScreenStackHeaderConfig *weakSelf = self;
++  return [_subtitleImageSlot resolveImageFromSource:_subtitleImageSource
++                                    withImageLoader:_imageLoader
++                                           onLoaded:^{
++                                             [weakSelf updateViewControllerIfNeeded];
++                                           }];
++}
++
++- (nullable NSAttributedString *)attributedTitle
++{
++  UIImage *glyph = [self resolvedTitleImage];
++  if (glyph == nil || _title == nil) {
++    return nil;
++  }
++
++  return [RNSScreenStackHeaderConfig
++      attributedStringWithLeadingGlyph:glyph
++                                  text:_title
++                        textAttributes:[RNSScreenStackHeaderConfig titleTextAttributesForConfig:self]];
++}
++
++- (nullable NSAttributedString *)attributedSubtitle
++{
++  UIImage *glyph = [self resolvedSubtitleImage];
++  if (_subtitle == nil || (glyph == nil && _subtitleColor == nil)) {
++    return nil;
++  }
++  if (glyph == nil) {
++    return [[NSAttributedString alloc] initWithString:_subtitle
++                                           attributes:[RNSScreenStackHeaderConfig subtitleTextAttributesForConfig:self]];
++  }
++
++  return [RNSScreenStackHeaderConfig
++      attributedStringWithLeadingGlyph:glyph
++                                  text:_subtitle
++                        textAttributes:[RNSScreenStackHeaderConfig subtitleTextAttributesForConfig:self]];
++}
++
+ - (void)updateViewControllerIfNeeded
+ {
+   UIViewController *vc = _screenView.controller;
+@@ -181,10 +526,10 @@ RNS_IGNORE_SUPER_CALL_END
+ 
+   if (newState != _lastSendState) {
+     _lastSendState = newState;
+-    _state->updateState(std::move(newState),
+-                        _synchronousShadowStateUpdatesEnabled
+-                            ? facebook::react::EventQueue::UpdateMode::unstable_Immediate
+-                            : facebook::react::EventQueue::UpdateMode::Asynchronous);
++    _state->updateState(
++        std::move(newState),
++        _synchronousShadowStateUpdatesEnabled ? facebook::react::EventQueue::UpdateMode::unstable_Immediate
++                                              : facebook::react::EventQueue::UpdateMode::Asynchronous);
+   }
+ }
+ 
+@@ -293,10 +638,11 @@ RNS_IGNORE_SUPER_CALL_END
+         // in the image attribute not being updated. We manually set frame to the size of an image
+         // in order to trigger proper reload that'd update the image attribute.
+         RCTImageSource *imageSource = [RNSScreenStackHeaderConfig imageSourceFromImageView:imageView];
+-        [imageView reactSetFrame:CGRectMake(imageView.frame.origin.x,
+-                                            imageView.frame.origin.y,
+-                                            imageSource.size.width,
+-                                            imageSource.size.height)];
++        [imageView reactSetFrame:CGRectMake(
++                                     imageView.frame.origin.x,
++                                     imageView.frame.origin.y,
++                                     imageSource.size.width,
++                                     imageSource.size.height)];
+       }
+ 
+       UIImage *image = imageView.image;
+@@ -365,6 +711,89 @@ RNS_IGNORE_SUPER_CALL_END
+   }
+ }
+ 
+++ (NSDictionary<NSAttributedStringKey, id> *)resolvedTitleTextAttributesWithFontFamily:(NSString *)fontFamily
++                                                                              fontSize:(NSNumber *)fontSize
++                                                                            fontWeight:(NSString *)fontWeight
++                                                                                 color:(UIColor *)color
++                                                                      boldFallbackFont:(UIFont *)boldFallbackFont
++{
++  NSMutableDictionary<NSAttributedStringKey, id> *attrs = [NSMutableDictionary new];
++
++  // Ignore changing header title color on visionOS
++#if !TARGET_OS_VISION
++  if (color) {
++    attrs[NSForegroundColorAttributeName] = color;
++  }
++#endif
++
++  if (fontFamily || fontWeight) {
++    attrs[NSFontAttributeName] = [RCTFont updateFont:nil
++                                          withFamily:fontFamily
++                                                size:fontSize
++                                              weight:fontWeight
++                                               style:nil
++                                             variant:nil
++                                     scaleMultiplier:1.0];
++  } else {
++    attrs[NSFontAttributeName] = boldFallbackFont;
++  }
++
++  return attrs;
++}
++
+++ (NSDictionary<NSAttributedStringKey, id> *)titleTextAttributesForConfig:(RNSScreenStackHeaderConfig *)config
++{
++  NSNumber *size = config.titleFontSize ?: [DEFAULT_TITLE_FONT_SIZE copy];
++  return [self resolvedTitleTextAttributesWithFontFamily:config.titleFontFamily
++                                                fontSize:size
++                                              fontWeight:config.titleFontWeight
++                                                   color:config.titleColor
++                                        boldFallbackFont:[UIFont boldSystemFontOfSize:[size floatValue]]];
++}
++
+++ (NSDictionary<NSAttributedStringKey, id> *)subtitleTextAttributesForConfig:(RNSScreenStackHeaderConfig *)config
++{
++  NSNumber *size = [DEFAULT_SUBTITLE_FONT_SIZE copy];
++  return [self resolvedTitleTextAttributesWithFontFamily:config.titleFontFamily
++                                                fontSize:size
++                                              fontWeight:nil
++                                                   color:config.subtitleColor ?: config.titleColor
++                                        boldFallbackFont:[UIFont systemFontOfSize:[size floatValue]]];
++}
++
+++ (NSAttributedString *)attributedStringWithLeadingGlyph:(UIImage *)glyph
++                                                    text:(NSString *)text
++                                          textAttributes:(NSDictionary<NSAttributedStringKey, id> *)textAttributes
++{
++  UIFont *font =
++      textAttributes[NSFontAttributeName] ?: [UIFont boldSystemFontOfSize:[DEFAULT_TITLE_FONT_SIZE floatValue]];
++
++  CGFloat glyphHeight = font.pointSize;
++  CGSize intrinsicSize = glyph.size;
++  CGFloat aspectRatio = intrinsicSize.height > 0 ? intrinsicSize.width / intrinsicSize.height : 1;
++
++  CGFloat glyphWidth = glyphHeight * aspectRatio;
++  CGFloat spacing = font.pointSize * RNS_TITLE_GLYPH_SPACING_EM;
++  UIGraphicsImageRendererFormat *format = [UIGraphicsImageRendererFormat preferredFormat];
++  format.opaque = NO;
++  UIImage *paddedGlyph = [[[UIGraphicsImageRenderer alloc] initWithSize:CGSizeMake(glyphWidth + spacing, glyphHeight)
++                                                                  format:format]
++      imageWithActions:^(UIGraphicsImageRendererContext *context) {
++        [glyph drawInRect:CGRectMake(0, 0, glyphWidth, glyphHeight)];
++      }];
++
++  NSTextAttachment *attachment = [NSTextAttachment new];
++  attachment.image = [paddedGlyph imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
++  attachment.bounds = CGRectMake(0, (font.capHeight - glyphHeight) / 2, glyphWidth + spacing, glyphHeight);
++
++  NSMutableAttributedString *composed = [[NSMutableAttributedString alloc]
++      initWithAttributedString:[NSAttributedString attributedStringWithAttachment:attachment]];
++  [composed appendAttributedString:[[NSAttributedString alloc] initWithString:text]];
++  [composed addAttributes:textAttributes range:NSMakeRange(0, composed.length)];
++
++  return composed;
++}
++
+ + (UINavigationBarAppearance *)buildAppearance:(UIViewController *)vc withConfig:(RNSScreenStackHeaderConfig *)config
+ {
+   UINavigationBarAppearance *appearance = [UINavigationBarAppearance new];
+@@ -380,8 +809,10 @@ RNS_IGNORE_SUPER_CALL_END
+       appearance.shadowColor = shadowColor;
+       appearance.shadowImage = shadowImage;
+     }
+-  } else {
++  } else if (config.backgroundColor) {
+     [appearance configureWithOpaqueBackground];
++  } else {
++    [appearance configureWithDefaultBackground];
+   }
+ 
+   // set background color if specified
+@@ -408,59 +839,20 @@ RNS_IGNORE_SUPER_CALL_END
+   }
+ 
+   if (config.titleFontFamily || config.titleFontSize || config.titleFontWeight || config.titleColor) {
+-    NSMutableDictionary *attrs = [NSMutableDictionary new];
+-
+-    // Ignore changing header title color on visionOS
+-#if !TARGET_OS_VISION
+-    if (config.titleColor) {
+-      attrs[NSForegroundColorAttributeName] = config.titleColor;
+-    }
+-#endif
+-
+-    NSString *family = config.titleFontFamily ?: nil;
+-    NSNumber *size = config.titleFontSize ?: [DEFAULT_TITLE_FONT_SIZE copy];
+-    NSString *weight = config.titleFontWeight ?: nil;
+-    if (family || weight) {
+-      attrs[NSFontAttributeName] = [RCTFont updateFont:nil
+-                                            withFamily:config.titleFontFamily
+-                                                  size:size
+-                                                weight:weight
+-                                                 style:nil
+-                                               variant:nil
+-                                       scaleMultiplier:1.0];
+-    } else {
+-      attrs[NSFontAttributeName] = [UIFont boldSystemFontOfSize:[size floatValue]];
+-    }
+-    appearance.titleTextAttributes = attrs;
++    appearance.titleTextAttributes = [self titleTextAttributesForConfig:config];
+   }
+ 
+   if (config.largeTitleFontFamily || config.largeTitleFontSize || config.largeTitleFontWeight ||
+       config.largeTitleColor || config.titleColor) {
+-    NSMutableDictionary *largeAttrs = [NSMutableDictionary new];
+-
+-    // Ignore changing header title color on visionOS
+-#if !TARGET_OS_VISION
+-    if (config.largeTitleColor || config.titleColor) {
+-      largeAttrs[NSForegroundColorAttributeName] = config.largeTitleColor ? config.largeTitleColor : config.titleColor;
+-    }
+-#endif
+-
+-    NSString *largeFamily = config.largeTitleFontFamily ?: nil;
+     NSNumber *largeSize = config.largeTitleFontSize ?: [DEFAULT_TITLE_LARGE_FONT_SIZE copy];
+-    NSString *largeWeight = config.largeTitleFontWeight ?: nil;
+-    if (largeFamily || largeWeight) {
+-      largeAttrs[NSFontAttributeName] = [RCTFont updateFont:nil
+-                                                 withFamily:largeFamily
+-                                                       size:largeSize
+-                                                     weight:largeWeight
+-                                                      style:nil
+-                                                    variant:nil
+-                                            scaleMultiplier:1.0];
+-    } else {
+-      largeAttrs[NSFontAttributeName] = [UIFont systemFontOfSize:[largeSize floatValue] weight:UIFontWeightBold];
+-    }
+-
+-    appearance.largeTitleTextAttributes = largeAttrs;
++    UIColor *largeColor = config.largeTitleColor ? config.largeTitleColor : config.titleColor;
++    appearance.largeTitleTextAttributes =
++        [self resolvedTitleTextAttributesWithFontFamily:config.largeTitleFontFamily
++                                               fontSize:largeSize
++                                             fontWeight:config.largeTitleFontWeight
++                                                  color:largeColor
++                                       boldFallbackFont:[UIFont systemFontOfSize:[largeSize floatValue]
++                                                                          weight:UIFontWeightBold]];
+   }
+ 
+   UIImage *backButtonImage = [config loadBackButtonImageInViewController:vc];
+@@ -507,6 +899,11 @@ RNS_IGNORE_SUPER_CALL_END
+ 
+   if (shouldHide) {
+     navitem.title = config.title;
++#if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
++    if (@available(iOS 26.0, *)) {
++      navitem.subtitle = config.subtitle;
++    }
++#endif // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+ 
+     // Setting navigation bar visibility is split to mitigate iOS 26 bug with bar button items.
+     [navctr setNavigationBarHidden:YES animated:animated];
+@@ -514,6 +911,11 @@ RNS_IGNORE_SUPER_CALL_END
+   }
+ 
+   navctr.navigationBar.overrideUserInterfaceStyle = config.userInterfaceStyle;
++#if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
++  if (@available(iOS 26.0, *)) {
++    [RNSHeaderTitlePressHandler installOnNavigationController:navctr];
++  }
++#endif // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+ 
+ #if !TARGET_OS_TV
+   [config configureBackItem:prevItem withPrevVC:prevVC];
+@@ -648,6 +1050,21 @@ RNS_IGNORE_SUPER_CALL_END
+   // This assignment should be done after `navitem.titleView = ...` assignment (iOS 16.0 bug).
+   // See: https://github.com/software-mansion/react-native-screens/issues/1570 (comments)
+   navitem.title = config.title;
++#if RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
++  if (@available(iOS 26.0, *)) {
++    navitem.subtitle = config.subtitle;
++
++    NSAttributedString *attributedTitle = [config attributedTitle];
++    if (attributedTitle != nil) {
++      navitem.attributedTitle = attributedTitle;
++    }
++
++    NSAttributedString *attributedSubtitle = [config attributedSubtitle];
++    if (attributedSubtitle != nil) {
++      navitem.attributedSubtitle = attributedSubtitle;
++    }
++  }
++#endif // RNS_IPHONE_OS_VERSION_AVAILABLE(26_0)
+   navitem.leftBarButtonItems = [config barButtonItemsFromConfigs:config.headerLeftBarButtonItems
+                                                 withCurrentItems:navitem.leftBarButtonItems];
+   navitem.rightBarButtonItems = [config barButtonItemsFromConfigs:config.headerRightBarButtonItems
+@@ -700,7 +1117,8 @@ RNS_IGNORE_SUPER_CALL_END
+   const auto *config = self;
+ 
+   const auto isBackTitleBlank = [NSString rnscreens_isBlankOrNull:config.backTitle] == YES;
+-  NSString *resolvedBackTitle = isBackTitleBlank ? prevItem.title : config.backTitle;
++  NSString *resolvedBackTitle =
++      isBackTitleBlank ? [NSString rnscreens_stringByStrippingTitleGlyph:prevItem.title] : config.backTitle;
+ 
+   // If previous screen controller was recreated (e.g. when you go back to tab with stack that has multiple screens),
+   // its navigationItem may not have any information from screen's headerConfig, including the title.
+@@ -858,12 +1276,13 @@ RNS_IGNORE_SUPER_CALL_END
+     return;
+   }
+ 
+-  RCTAssert(childComponentView.superview == nil,
+-            @"Attempt to mount already mounted component view. (parent: %@, child: %@, index: %@, existing parent: %@)",
+-            self,
+-            childComponentView,
+-            @(index),
+-            @([childComponentView.superview tag]));
++  RCTAssert(
++      childComponentView.superview == nil,
++      @"Attempt to mount already mounted component view. (parent: %@, child: %@, index: %@, existing parent: %@)",
++      self,
++      childComponentView,
++      @(index),
++      @([childComponentView.superview tag]));
+ 
+   //  [_reactSubviews insertObject:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
+   [self insertReactSubview:(RNSScreenStackHeaderSubview *)childComponentView atIndex:index];
+@@ -987,6 +1406,8 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
+ {
+   [super prepareForRecycle];
+   _initialPropsSet = NO;
++  [_titleImageSlot reset];
++  [_subtitleImageSlot reset];
+ 
+   _lastSendState = react::RNSScreenStackHeaderConfigState(react::Size{}, react::EdgeInsets{}, react::Point{});
+ }
+@@ -1003,6 +1424,14 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
+   return react::concreteComponentDescriptorProvider<react::RNSScreenStackHeaderConfigComponentDescriptor>();
+ }
+ 
++- (void)emitTitlePress
++{
++  auto eventEmitter = std::static_pointer_cast<const facebook::react::RNSScreenStackHeaderConfigEventEmitter>(_eventEmitter);
++  if (eventEmitter) {
++    eventEmitter->onTitlePress(facebook::react::RNSScreenStackHeaderConfigEventEmitter::OnTitlePress{});
++  }
++}
++
+ - (void)updateProps:(react::Props::Shared const &)props oldProps:(react::Props::Shared const &)oldProps
+ {
+   const auto &oldScreenProps = *std::static_pointer_cast<const react::RNSScreenStackHeaderConfigProps>(_props);
+@@ -1025,6 +1454,7 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
+   }
+ 
+   _title = RCTNSStringFromStringNilIfEmpty(newScreenProps.title);
++  _subtitle = RCTNSStringFromStringNilIfEmpty(newScreenProps.subtitle);
+   if (newScreenProps.titleFontFamily != oldScreenProps.titleFontFamily) {
+     _titleFontFamily = RCTNSStringFromStringNilIfEmpty(newScreenProps.titleFontFamily);
+   }
+@@ -1064,6 +1494,27 @@ static RCTResizeMode resizeModeFromCppEquiv(react::ImageResizeMode resizeMode)
+   // We cannot compare SharedColor because it is shared value.
+   // We could compare color value, but it is more performant to just assign new value
+   _titleColor = RCTUIColorFromSharedColor(newScreenProps.titleColor);
++  _subtitleColor = RCTUIColorFromSharedColor(newScreenProps.subtitleColor);
++  _titlePressEnabled = newScreenProps.titlePressEnabled;
++  _titleTestID = RCTNSStringFromStringNilIfEmpty(newScreenProps.titleTestID);
++  if (newScreenProps.titleImageSource != oldScreenProps.titleImageSource) {
++    const auto &titleImageSource = newScreenProps.titleImageSource;
++    _titleImageSource = titleImageSource.uri.empty()
++        ? nil
++        : [[RCTImageSource alloc]
++              initWithURLRequest:NSURLRequestFromImageSource(titleImageSource)
++                            size:CGSizeMake(titleImageSource.size.width, titleImageSource.size.height)
++                           scale:titleImageSource.scale];
++  }
++  if (newScreenProps.subtitleImageSource != oldScreenProps.subtitleImageSource) {
++    const auto &subtitleImageSource = newScreenProps.subtitleImageSource;
++    _subtitleImageSource = subtitleImageSource.uri.empty()
++        ? nil
++        : [[RCTImageSource alloc]
++              initWithURLRequest:NSURLRequestFromImageSource(subtitleImageSource)
++                            size:CGSizeMake(subtitleImageSource.size.width, subtitleImageSource.size.height)
++                           scale:subtitleImageSource.scale];
++  }
+   _largeTitleColor = RCTUIColorFromSharedColor(newScreenProps.largeTitleColor);
+   _color = RCTUIColorFromSharedColor(newScreenProps.color);
+   _backgroundColor = RCTUIColorFromSharedColor(newScreenProps.backgroundColor);
+diff --git a/node_modules/react-native-screens/src/fabric/ScreenStackHeaderConfigNativeComponent.ts b/node_modules/react-native-screens/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
+index da28c51..017ca65 100644
+--- a/node_modules/react-native-screens/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
++++ b/node_modules/react-native-screens/src/fabric/ScreenStackHeaderConfigNativeComponent.ts
+@@ -4,6 +4,7 @@ import { codegenNativeComponent } from 'react-native';
+ import type {
+   CodegenTypes as CT,
+   HostComponent,
++  ImageSource,
+   ViewProps,
+   ColorValue,
+ } from 'react-native';
+@@ -12,6 +13,7 @@ type DirectionType = 'rtl' | 'ltr';
+ 
+ // eslint-disable-next-line @typescript-eslint/ban-types
+ type OnAttachedEvent = Readonly<{}>;
++type OnTitlePressEvent = Readonly<{}>;
+ // eslint-disable-next-line @typescript-eslint/ban-types
+ type OnDetachedEvent = Readonly<{}>;
+ 
+@@ -66,10 +68,17 @@ export interface NativeProps extends ViewProps {
+   largeTitleColor?: ColorValue | undefined;
+   translucent?: boolean | undefined;
+   title?: string | undefined;
++  subtitle?: string | undefined;
+   titleFontFamily?: string | undefined;
+   titleFontSize?: CT.Int32 | undefined;
+   titleFontWeight?: string | undefined;
+   titleColor?: ColorValue | undefined;
++  subtitleColor?: ColorValue | undefined;
++  titleImageSource?: ImageSource | undefined;
++  subtitleImageSource?: ImageSource | undefined;
++  titlePressEnabled?: boolean | undefined;
++  titleTestID?: string | undefined;
++  onTitlePress?: CT.DirectEventHandler<OnTitlePressEvent> | undefined;
+   disableBackButtonMenu?: boolean | undefined;
+   backButtonDisplayMode?: CT.WithDefault<BackButtonDisplayMode, 'default'>;
+   hideBackButton?: boolean | undefined;
+diff --git a/node_modules/react-native-screens/src/types.tsx b/node_modules/react-native-screens/src/types.tsx
+index 8594b73..a10e423 100644
+--- a/node_modules/react-native-screens/src/types.tsx
++++ b/node_modules/react-native-screens/src/types.tsx
+@@ -827,10 +827,73 @@ export interface ScreenStackHeaderConfigProps extends ViewProps {
+    * String that can be displayed in the header as a fallback for `headerTitle`.
+    */
+   title?: string | undefined;
++  /**
++   * String to display in the header underneath the title.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  subtitle?: string | undefined;
+   /**
+    * Allows for setting text color of the title.
+    */
+   titleColor?: ColorValue | undefined;
++  /**
++   * Image rendered as a leading glyph before the title. The glyph is sized from
++   * the resolved title font and keeps its original colors.
++   * Requires iOS 26 or higher and is ignored on Android and earlier iOS versions.
++   * The glyph is hidden while the large title is expanded and appears on collapse.
++   * A custom header title view replaces the title and its glyph.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  titleImageSource?: ImageSourcePropType | undefined;
++  /**
++   * Image rendered as a leading glyph before the subtitle. The glyph is sized
++   * from the resolved subtitle font and keeps its original colors.
++   * Requires iOS 26 or higher and is ignored on Android and earlier iOS versions.
++   * A custom header title view does not replace the subtitle or its glyph.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  subtitleImageSource?: ImageSourcePropType | undefined;
++  /**
++   * Color of the subtitle text. Defaults to `titleColor`.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  subtitleColor?: ColorValue | undefined;
++  /**
++   * Whether tapping the native header title calls `onTitlePress`.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  titlePressEnabled?: boolean | undefined;
++  /**
++   * Accessibility identifier of the native header title, for e2e tests.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  titleTestID?: string | undefined;
++  /**
++   * Called when the native header title or subtitle is tapped and `titlePressEnabled` is true.
++   *
++   * @platform ios
++   *
++   * @supported iOS 26 or higher
++   */
++  onTitlePress?: (() => void) | undefined;
+   /**
+    * Customize font family to be used for the title.
+    */
+diff --git a/node_modules/react-native-screens/ios/RNSScreenStack.mm b/node_modules/react-native-screens/ios/RNSScreenStack.mm
+index c233036..5d3e28d 100644
+--- a/node_modules/react-native-screens/ios/RNSScreenStack.mm
++++ b/node_modules/react-native-screens/ios/RNSScreenStack.mm
+@@ -38,6 +38,58 @@ namespace react = facebook::react;
+ 
+ @end
+ 
++static UIView *RNSFindLargeTitleView(UIView *view)
++{
++  if ([NSStringFromClass([view class]) containsString:@"LargeTitleView"]) {
++    return view;
++  }
++  for (UIView *subview in view.subviews) {
++    UIView *found = RNSFindLargeTitleView(subview);
++    if (found != nil) {
++      return found;
++    }
++  }
++  return nil;
++}
++
++static void RNSAlignLargeTitleMargins(UINavigationController *controller)
++{
++  UIViewController *top = controller.topViewController;
++  if (top == nil || controller.navigationBar.prefersLargeTitles == NO) {
++    return;
++  }
++  UIView *titleView = RNSFindLargeTitleView(top.view);
++  if (titleView == nil) {
++    return;
++  }
++  NSDirectionalEdgeInsets margins = titleView.directionalLayoutMargins;
++  if (margins.leading >= margins.trailing) {
++    return;
++  }
++  UINavigationItem *item = top.navigationItem;
++  UINavigationItemLargeTitleDisplayMode mode = item.largeTitleDisplayMode;
++  item.largeTitleDisplayMode = UINavigationItemLargeTitleDisplayModeNever;
++  item.largeTitleDisplayMode = mode;
++  titleView.insetsLayoutMarginsFromSafeArea = !titleView.insetsLayoutMarginsFromSafeArea;
++  titleView.insetsLayoutMarginsFromSafeArea = !titleView.insetsLayoutMarginsFromSafeArea;
++  titleView.preservesSuperviewLayoutMargins = !titleView.preservesSuperviewLayoutMargins;
++  titleView.preservesSuperviewLayoutMargins = !titleView.preservesSuperviewLayoutMargins;
++  margins = titleView.directionalLayoutMargins;
++  if (margins.leading < margins.trailing) {
++    margins.leading = margins.trailing;
++    titleView.directionalLayoutMargins = margins;
++  }
++  [titleView setNeedsLayout];
++  [titleView layoutIfNeeded];
++  if ([titleView.superview isKindOfClass:[UIScrollView class]]) {
++    UIScrollView *scrollView = (UIScrollView *)titleView.superview;
++    [top setContentScrollView:nil forEdge:NSDirectionalRectEdgeTop];
++    [top setContentScrollView:scrollView forEdge:NSDirectionalRectEdgeTop];
++    [controller.navigationBar setNeedsLayout];
++    [controller.navigationBar layoutIfNeeded];
++  }
++}
++
+ @implementation RNSNavigationController
+ 
+ #if !TARGET_OS_TV
+@@ -59,6 +111,7 @@ namespace react = facebook::react;
+ - (void)viewDidLayoutSubviews
+ {
+   [super viewDidLayoutSubviews];
++  RNSAlignLargeTitleMargins(self);
+   if ([self.topViewController isKindOfClass:[RNSScreen class]]) {
+     RNSScreen *screenController = (RNSScreen *)self.topViewController;
+     BOOL isNotDismissingModal = screenController.presentedViewController == nil ||
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4e90d458124..22c0490f69f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,6 +7,8 @@ settings:
 overrides:
   ua-parser-js: 1.0.2
   jpeg-js: 0.4.4
+  typescript: 7.0.2
+  react-native-nitro-modules: ^0.37.1
 
 importers:
 
@@ -15,75 +17,81 @@ importers:
       '@bugsnag/react-native':
         specifier: 8.4.0
         version: 8.4.0
+      '@expo/ui':
+        specifier: ~57.0.19
+        version: 57.0.19(@babel/core@7.29.7)(@types/react@19.2.18)(expo@57.0.23)(react-dom@19.2.3(react@19.2.3))(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@expo/vector-icons':
         specifier: ^15.0.3
-        version: 15.0.3(expo-font@14.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 15.0.3(expo-font@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@hookform/resolvers':
         specifier: ^2.9.10
-        version: 2.9.11(react-hook-form@7.34.2(react@19.1.0))
+        version: 2.9.11(react-hook-form@7.34.2(react@19.2.3))
+      '@legendapp/list':
+        specifier: 3.4.0
+        version: 3.4.0(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@lodev09/react-native-true-sheet':
         specifier: ~3.7.0
-        version: 3.7.3(261280a80c394a7dcf8d9609d62c37ca)
+        version: 3.7.3(4eac27da23d45fdf91d899c57069aba2)
       '@magrinj/expo-quick-look':
         specifier: 0.4.0
-        version: 0.4.0(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 0.4.0(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@nozbe/watermelondb':
         specifier: ^0.28.1-0
         version: 0.28.1-0
       '@react-native-async-storage/async-storage':
         specifier: 2.2.0
-        version: 2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       '@react-native-camera-roll/camera-roll':
         specifier: ^7.10.0
-        version: 7.10.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 7.10.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       '@react-native-clipboard/clipboard':
         specifier: ^1.13.2
-        version: 1.16.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 1.16.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-native-community/datetimepicker':
-        specifier: 8.4.4
-        version: 8.4.4(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: 9.1.0
+        version: 9.1.0(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-native-community/hooks':
         specifier: ^100.1.0
-        version: 100.1.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 100.1.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-native-community/netinfo':
-        specifier: ^11.3.1
-        version: 11.4.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        specifier: ^12.0.1
+        version: 12.0.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-native-community/slider':
-        specifier: 5.0.1
-        version: 5.0.1
+        specifier: 5.2.0
+        version: 5.2.0
       '@react-native-cookies/cookies':
         specifier: 6.2.1
-        version: 6.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 6.2.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       '@react-native-firebase/analytics':
         specifier: ^21.12.2
-        version: 21.14.0(@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
+        version: 21.14.0(@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))
       '@react-native-firebase/app':
         specifier: ^21.12.2
-        version: 21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-native-firebase/crashlytics':
         specifier: ^21.12.2
-        version: 21.14.0(7f31d425d6e3bb1976dd842bb1e41e49)
+        version: 21.14.0(@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(expo@57.0.23)
       '@react-native-masked-view/masked-view':
         specifier: ^0.3.1
-        version: 0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 0.3.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-native-picker/picker':
         specifier: 2.11.4
-        version: 2.11.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 2.11.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-native/codegen':
-        specifier: ^0.80.0
-        version: 0.80.2(@babel/core@7.25.9)
+        specifier: 0.86.3
+        version: 0.86.3(@babel/core@7.29.7)
       '@react-navigation/drawer':
-        specifier: ^7.12.2
-        version: 7.12.2(1791ab06baac4955f4dd8054e3baaac6)
+        specifier: ^7.14.1
+        version: 7.14.2(2bc054b45d80945c6bf73a8ade7ad73e)
       '@react-navigation/elements':
-        specifier: ^2.9.25
-        version: 2.9.25(@react-native-masked-view/masked-view@0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(@react-navigation/native@7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ^2.9.42
+        version: 2.9.43(322efc84ae2b5bd2002572a8329e2a5c)
       '@react-navigation/native':
-        specifier: ^7.3.3
-        version: 7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ^7.4.1
+        version: 7.4.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@react-navigation/native-stack':
-        specifier: ^7.17.5
-        version: 7.17.5(5d5d774b9c7e992721e68b3dbd486565)
+        specifier: ^7.19.1
+        version: 7.19.2(9f93b74e18ae1df429c2a9dc7118e4c2)
       '@rocket.chat/media-signaling':
         specifier: 1.0.0-rc.1
         version: 1.0.0-rc.1
@@ -92,16 +100,19 @@ importers:
         version: 0.31.36
       '@rocket.chat/mobile-crypto':
         specifier: RocketChat/rocket.chat-mobile-crypto#main
-        version: https://codeload.github.com/RocketChat/rocket.chat-mobile-crypto/tar.gz/69a0a250dd7c6ff0808eb659d7202be1cae7fa1c(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: https://codeload.github.com/RocketChat/rocket.chat-mobile-crypto/tar.gz/69a0a250dd7c6ff0808eb659d7202be1cae7fa1c(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@rocket.chat/sdk':
         specifier: RocketChat/Rocket.Chat.js.SDK#ecf4fedcf8ab6121e62a6b95bb48823afd805afd
         version: https://codeload.github.com/RocketChat/Rocket.Chat.js.SDK/tar.gz/ecf4fedcf8ab6121e62a6b95bb48823afd805afd
       '@rocket.chat/ui-kit':
         specifier: ^0.39.0
         version: 0.39.0(@rocket.chat/icons@0.47.0)(@types/node@25.0.3)(typescript@7.0.2)
+      '@shopify/flash-list':
+        specifier: 2.3.2
+        version: 2.3.2(@babel/runtime@7.25.9)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       '@zoontek/react-native-navigation-bar':
         specifier: ^1.1.1
-        version: 1.1.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 1.1.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       axios:
         specifier: 0.30.3
         version: 0.30.3
@@ -124,56 +135,56 @@ importers:
         specifier: ^4.4.4
         version: 4.4.4(eslint-plugin-import@2.32.0)(eslint@8.57.1)
       expo:
-        specifier: ^54.0.0
-        version: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ^57.0.0
+        version: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
       expo-apple-authentication:
-        specifier: ~8.0.8
-        version: 8.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        specifier: ~57.0.2
+        version: 57.0.2(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       expo-audio:
-        specifier: ~0.4.9
-        version: 0.4.9(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.5
+        version: 57.0.5(expo-asset@57.0.17(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       expo-camera:
-        specifier: ~17.0.10
-        version: 17.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.5
+        version: 57.0.5(@types/emscripten@1.41.6)(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       expo-device:
-        specifier: ^8.0.10
-        version: 8.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
+        specifier: ^57.0.2
+        version: 57.0.2(expo@57.0.23)
       expo-document-picker:
-        specifier: ~14.0.8
-        version: 14.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
+        specifier: ~57.0.2
+        version: 57.0.2(expo@57.0.23)
       expo-file-system:
-        specifier: ~19.0.21
-        version: 19.0.21(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        specifier: ~57.0.7
+        version: 57.0.7(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       expo-haptics:
-        specifier: ~15.0.8
-        version: 15.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
+        specifier: ~57.0.3
+        version: 57.0.3(expo@57.0.23)
       expo-image:
-        specifier: ~3.0.11
-        version: 3.0.11(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.5
+        version: 57.0.5(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       expo-keep-awake:
-        specifier: ~15.0.8
-        version: 15.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.2
+        version: 57.0.2(expo@57.0.23)(react@19.2.3)
       expo-local-authentication:
-        specifier: ~17.0.8
-        version: 17.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
+        specifier: ~57.0.3
+        version: 57.0.3(expo@57.0.23)
       expo-notifications:
-        specifier: ~0.32.15
-        version: 0.32.15(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.19
+        version: 57.0.19(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2)
       expo-status-bar:
-        specifier: ~3.0.9
-        version: 3.0.9(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.1
+        version: 57.0.1(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       expo-system-ui:
-        specifier: ~6.0.9
-        version: 6.0.9(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        specifier: ~57.0.4
+        version: 57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       expo-video:
-        specifier: ~3.0.16
-        version: 3.0.16(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.4
+        version: 57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       expo-video-thumbnails:
-        specifier: ~10.0.8
-        version: 10.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
+        specifier: ~57.0.2
+        version: 57.0.2(expo@57.0.23)
       expo-web-browser:
-        specifier: ~15.0.10
-        version: 15.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        specifier: ~57.0.3
+        version: 57.0.3(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       hoist-non-react-statics:
         specifier: 3.3.2
         version: 3.3.2
@@ -199,122 +210,122 @@ importers:
         specifier: 5.6.0
         version: 5.6.0
       react:
-        specifier: 19.1.0
-        version: 19.1.0
+        specifier: 19.2.3
+        version: 19.2.3
       react-hook-form:
         specifier: 7.34.2
-        version: 7.34.2(react@19.1.0)
+        version: 7.34.2(react@19.2.3)
       react-native:
-        specifier: 0.81.5
-        version: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+        specifier: 0.86.3
+        version: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       react-native-a11y-order:
         specifier: ^0.4.0
-        version: 0.4.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 0.4.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-animatable:
         specifier: 1.3.3
         version: 1.3.3
       react-native-bootsplash:
         specifier: ^6.3.8
-        version: 6.3.11(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 6.3.11(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-callkeep:
         specifier: 4.3.16
-        version: 4.3.16(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 4.3.16(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       react-native-console-time-polyfill:
         specifier: 1.2.3
-        version: 1.2.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 1.2.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-device-info:
         specifier: 11.1.0
-        version: 11.1.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 11.1.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       react-native-easy-grid:
         specifier: 0.2.2
         version: 0.2.2
       react-native-easy-toast:
         specifier: 2.3.0
-        version: 2.3.0(prop-types@15.8.1)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 2.3.0(prop-types@15.8.1)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
+      react-native-enriched-markdown:
+        specifier: 1.0.2
+        version: 1.0.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-external-keyboard:
         specifier: ^0.9.0
-        version: 0.9.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 0.9.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-gesture-handler:
-        specifier: ~2.28.0
-        version: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~3.3.0
+        version: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-image-crop-picker:
         specifier: RocketChat/react-native-image-crop-picker#47092e8c90550a54d45fe307f7cb2a24c9535ed5
-        version: https://codeload.github.com/RocketChat/react-native-image-crop-picker/tar.gz/47092e8c90550a54d45fe307f7cb2a24c9535ed5(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: https://codeload.github.com/RocketChat/react-native-image-crop-picker/tar.gz/47092e8c90550a54d45fe307f7cb2a24c9535ed5(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-incall-manager:
         specifier: ^4.2.1
-        version: 4.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
-      react-native-katex:
-        specifier: git+https://github.com/RocketChat/react-native-katex.git
-        version: https://codeload.github.com/RocketChat/react-native-katex/tar.gz/37e579804fe238732d8a4b06dec073610ab062b1(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 4.2.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       react-native-keyboard-controller:
         specifier: 1.18.5
-        version: 1.18.5(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 1.18.5(react-native-reanimated@4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-keychain:
         specifier: 10.0.0
         version: 10.0.0
       react-native-linear-gradient:
-        specifier: 2.6.2
-        version: 2.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: 2.8.3
+        version: 2.8.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-localize:
         specifier: 3.7.0
-        version: 3.7.0(@expo/config-plugins@54.0.4)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-math-view:
-        specifier: 3.9.5
-        version: 3.9.5(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 3.7.0(@expo/config-plugins@57.0.9(typescript@7.0.2))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-mime-types:
         specifier: 2.3.0
         version: 2.3.0
       react-native-mmkv:
-        specifier: ^4.1.2
-        version: 4.1.2(react-native-nitro-modules@0.33.9(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ^4.3.2
+        version: 4.3.2(react-native-nitro-modules@0.37.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-modal:
         specifier: 13.0.1
-        version: 13.0.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 13.0.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-nitro-modules:
-        specifier: ^0.33.9
-        version: 0.33.9(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ^0.37.1
+        version: 0.37.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-notifier:
         specifier: 1.6.1
-        version: 1.6.1(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 1.6.1(react-native-gesture-handler@3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-picker-select:
         specifier: 9.0.1
-        version: 9.0.1(@react-native-picker/picker@2.11.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
+        version: 9.0.1(@react-native-picker/picker@2.11.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))
+      react-native-plain-text:
+        specifier: 0.8.2
+        version: 0.8.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-popover-view:
         specifier: 5.1.7
         version: 5.1.7
       react-native-reanimated:
-        specifier: 4.1.3
-        version: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: 4.6.0
+        version: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-safe-area-context:
-        specifier: ^5.5.2
-        version: 5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ^5.10.0
+        version: 5.10.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-screens:
-        specifier: ~4.17.1
-        version: 4.17.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~4.28.0
+        version: 4.28.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-skeleton-placeholder:
         specifier: 5.2.4
-        version: 5.2.4(@react-native-masked-view/masked-view@0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-linear-gradient@2.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 5.2.4(@react-native-masked-view/masked-view@0.3.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native-linear-gradient@2.8.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-svg:
         specifier: ^15.12.1
-        version: 15.12.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 15.15.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-url-polyfill:
         specifier: 2.0.0
-        version: 2.0.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 2.0.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       react-native-webrtc:
         specifier: 124.0.7
-        version: 124.0.7(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+        version: 124.0.7(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       react-native-webview:
         specifier: 13.16.1
-        version: 13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 13.16.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-native-worklets:
-        specifier: ^0.6.1
-        version: 0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: 0.12.2
+        version: 0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       react-redux:
         specifier: 8.0.5
-        version: 8.0.5(@types/react@19.1.17)(react-dom@19.1.0(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)(redux@4.2.0)
+        version: 8.0.5(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(redux@4.2.0)
       reanimated-tab-view:
         specifier: ^0.3.0
-        version: 0.3.0(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 0.3.0(106987a3d5ae1ef5de78591772a14578)
       redux:
         specifier: 4.2.0
         version: 4.2.0
@@ -350,10 +361,10 @@ importers:
         version: 1.5.10
       use-debounce:
         specifier: 9.0.4
-        version: 9.0.4(react@19.1.0)
+        version: 9.0.4(react@19.2.3)
       use-deep-compare-effect:
         specifier: 1.6.1
-        version: 1.6.1(react@19.1.0)
+        version: 1.6.1(react@19.2.3)
       xregexp:
         specifier: 5.0.2
         version: 5.0.2
@@ -362,32 +373,32 @@ importers:
         version: 0.32.11
       zustand:
         specifier: ^5.0.10
-        version: 5.0.12(@types/react@19.1.17)(react@19.1.0)(use-sync-external-store@1.6.0(react@19.1.0))
+        version: 5.0.12(@types/react@19.2.18)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3))
     devDependencies:
       '@babel/core':
-        specifier: ~7.25.9
-        version: 7.25.9
+        specifier: ~7.29.7
+        version: 7.29.7
       '@babel/plugin-proposal-decorators':
         specifier: ~7.25.9
-        version: 7.25.9(@babel/core@7.25.9)
+        version: 7.25.9(@babel/core@7.29.7)
       '@babel/plugin-transform-named-capturing-groups-regex':
         specifier: ~7.25.9
-        version: 7.25.9(@babel/core@7.25.9)
+        version: 7.25.9(@babel/core@7.29.7)
       '@babel/preset-env':
         specifier: ~7.25.9
-        version: 7.25.9(@babel/core@7.25.9)
+        version: 7.25.9(@babel/core@7.29.7)
       '@babel/runtime':
         specifier: ~7.25.9
         version: 7.25.9
       '@bugsnag/cli':
-        specifier: ^3.2.1
-        version: 3.5.1
+        specifier: ^3.10.6
+        version: 3.10.6
       '@bugsnag/source-maps':
         specifier: ^2.3.3
         version: 2.3.3
       '@gorhom/bottom-sheet':
         specifier: ^5
-        version: 5.2.8(@types/react@19.1.17)(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        version: 5.2.8(6a38a83ca283ae4d61e53fcd24ae5b68)
       '@react-native-community/cli':
         specifier: 20.0.0
         version: 20.0.0(typescript@7.0.2)
@@ -398,23 +409,23 @@ importers:
         specifier: 20.0.0
         version: 20.0.0
       '@react-native/babel-preset':
-        specifier: 0.81.5
-        version: 0.81.5(@babel/core@7.25.9)
+        specifier: 0.86.3
+        version: 0.86.3(@babel/core@7.29.7)
       '@react-native/metro-config':
-        specifier: 0.81.5
-        version: 0.81.5(@babel/core@7.25.9)
+        specifier: 0.86.3
+        version: 0.86.3(@babel/core@7.29.7)
       '@react-native/typescript-config':
-        specifier: 0.81.5
-        version: 0.81.5
+        specifier: 0.86.3
+        version: 0.86.3
       '@storybook/react':
         specifier: ~9.0.9
-        version: 9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
+        version: 9.0.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
       '@storybook/react-native':
         specifier: ~9.0.9
-        version: 9.0.18(b3c380f041753120db9b4b839e8df819)
+        version: 9.0.18(3981ca50ab547f261d3351bbe700d2a7)
       '@testing-library/react-native':
         specifier: ^13.2.0
-        version: 13.3.3(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 13.3.3(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)
       '@types/bytebuffer':
         specifier: ~5.0.49
         version: 5.0.49
@@ -440,8 +451,8 @@ importers:
         specifier: 25.0.3
         version: 25.0.3
       '@types/react':
-        specifier: ~19.1.0
-        version: 19.1.17
+        specifier: ~19.2.18
+        version: 19.2.18
       '@types/semver':
         specifier: 7.3.13
         version: 7.3.13
@@ -453,10 +464,10 @@ importers:
         version: 1.4.11
       babel-jest:
         specifier: ~29.7.0
-        version: 29.7.0(@babel/core@7.25.9)
+        version: 29.7.0(@babel/core@7.29.7)
       babel-loader:
         specifier: ~9.1.3
-        version: 9.1.3(@babel/core@7.25.9)(webpack@5.106.2(esbuild@0.25.12))
+        version: 9.1.3(@babel/core@7.29.7)(webpack@5.106.2(esbuild@0.25.12))
       babel-plugin-module-resolver:
         specifier: ^5.0.3
         version: 5.0.3
@@ -470,8 +481,8 @@ importers:
         specifier: ^6.9.4
         version: 6.9.4
       babel-preset-expo:
-        specifier: ~54.0.9
-        version: 54.0.9(@babel/core@7.25.9)(@babel/runtime@7.25.9)(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-refresh@0.14.2)
+        specifier: ~57.0.12
+        version: 57.0.12(@babel/core@7.29.7)(@babel/runtime@7.25.9)(expo@57.0.23)(react-refresh@0.14.2)
       emojibase-data:
         specifier: 17.0.0
         version: 17.0.0(emojibase@17.0.0)
@@ -491,8 +502,8 @@ importers:
         specifier: ^29.7.0
         version: 29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0)
       jest-expo:
-        specifier: ~54.0.16
-        version: 54.0.16(@babel/core@7.25.9)(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+        specifier: ~57.0.5
+        version: 57.0.5(@babel/core@7.29.7)(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(expo@57.0.23)(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       oxfmt:
         specifier: ^0.60.0
         version: 0.60.0
@@ -506,8 +517,8 @@ importers:
         specifier: ~8.0.1
         version: 8.0.1
       react-dom:
-        specifier: 19.1.0
-        version: 19.1.0(react@19.1.0)
+        specifier: 19.2.3
+        version: 19.2.3(react@19.2.3)
       sniffler:
         specifier: 0.4.0
         version: 0.4.0
@@ -520,14 +531,6 @@ importers:
 
 packages:
 
-  '@0no-co/graphql.web@1.2.0':
-    resolution: {integrity: sha512-/1iHy9TTr63gE1YcR5idjx8UREz1s0kFhydf3bBLCXyqjhkIc6igAzTOx3zPifCwFR87tsh/4Pa9cNts6d2otw==}
-    peerDependencies:
-      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
-    peerDependenciesMeta:
-      graphql:
-        optional: true
-
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
@@ -542,26 +545,50 @@ packages:
     resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/code-frame@7.29.7':
+    resolution: {integrity: sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/compat-data@7.29.0':
     resolution: {integrity: sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/compat-data@7.29.7':
+    resolution: {integrity: sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/core@7.25.9':
     resolution: {integrity: sha512-WYvQviPw+Qyib0v92AwNIrdLISTp7RfDkM7bPqBvpbnhY4wq8HvHBZREVdYDXk98C8BkOIVnHAY3yvj7AVISxQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/core@7.29.7':
+    resolution: {integrity: sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/generator@7.29.1':
     resolution: {integrity: sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/generator@7.29.8':
+    resolution: {integrity: sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-annotate-as-pure@7.27.3':
     resolution: {integrity: sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-annotate-as-pure@7.29.7':
+    resolution: {integrity: sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-compilation-targets@7.28.6':
     resolution: {integrity: sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-compilation-targets@7.29.7':
+    resolution: {integrity: sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-create-class-features-plugin@7.28.6':
     resolution: {integrity: sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow==}
     engines: {node: '>=6.9.0'}
@@ -583,6 +610,10 @@ packages:
     resolution: {integrity: sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-globals@7.29.7':
+    resolution: {integrity: sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-member-expression-to-functions@7.28.5':
     resolution: {integrity: sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg==}
     engines: {node: '>=6.9.0'}
@@ -591,12 +622,22 @@ packages:
     resolution: {integrity: sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-module-imports@7.29.7':
+    resolution: {integrity: sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-module-transforms@7.28.6':
     resolution: {integrity: sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0
 
+  '@babel/helper-module-transforms@7.29.7':
+    resolution: {integrity: sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+
   '@babel/helper-optimise-call-expression@7.27.1':
     resolution: {integrity: sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw==}
     engines: {node: '>=6.9.0'}
@@ -605,6 +646,10 @@ packages:
     resolution: {integrity: sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-plugin-utils@7.29.7':
+    resolution: {integrity: sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-remap-async-to-generator@7.27.1':
     resolution: {integrity: sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA==}
     engines: {node: '>=6.9.0'}
@@ -625,14 +670,26 @@ packages:
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.29.7':
+    resolution: {integrity: sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.28.5':
     resolution: {integrity: sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.29.7':
+    resolution: {integrity: sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.27.1':
     resolution: {integrity: sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-option@7.29.7':
+    resolution: {integrity: sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-wrap-function@7.28.6':
     resolution: {integrity: sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ==}
     engines: {node: '>=6.9.0'}
@@ -641,6 +698,10 @@ packages:
     resolution: {integrity: sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helpers@7.29.7':
+    resolution: {integrity: sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/highlight@7.25.9':
     resolution: {integrity: sha512-llL88JShoCsth8fF8R4SJnIn+WLvR6ccFxu1H3FlMhDontdcmZWf2HgIZ7AIqV3Xcck1idlohrN4EUBQz6klbw==}
     engines: {node: '>=6.9.0'}
@@ -650,6 +711,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.29.8':
+    resolution: {integrity: sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9':
     resolution: {integrity: sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==}
     engines: {node: '>=6.9.0'}
@@ -770,6 +836,12 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-syntax-jsx@7.29.7':
+    resolution: {integrity: sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4':
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
     peerDependencies:
@@ -1082,8 +1154,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/plugin-transform-react-jsx@7.27.1':
-    resolution: {integrity: sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==}
+  '@babel/plugin-transform-react-jsx@7.29.7':
+    resolution: {integrity: sha512-WsZulLVBUHXVj2cUcPVx6UE21TpalB6bHbSFErKT0Ib++ax24jjXe73FqlWvdylFOjiuPHYi6VCcgRad1ItN+A==}
     engines: {node: '>=6.9.0'}
     peerDependencies:
       '@babel/core': ^7.0.0-0
@@ -1183,12 +1255,6 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0
 
-  '@babel/preset-react@7.28.5':
-    resolution: {integrity: sha512-Z3J8vhRq7CeLjdC58jLv4lnZ5RKFUJWqH5emvxmv9Hv3BD1T9R/Im713R4MTKwvFaV74ejZ3sM01LyEKk4ugNQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-
   '@babel/preset-typescript@7.28.5':
     resolution: {integrity: sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==}
     engines: {node: '>=6.9.0'}
@@ -1215,19 +1281,31 @@ packages:
     resolution: {integrity: sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.29.7':
+    resolution: {integrity: sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/traverse@7.29.0':
     resolution: {integrity: sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/traverse@7.29.8':
+    resolution: {integrity: sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/types@7.29.0':
     resolution: {integrity: sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.29.8':
+    resolution: {integrity: sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==}
+    engines: {node: '>=6.9.0'}
+
   '@bcoe/v8-coverage@0.2.3':
     resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
 
-  '@bugsnag/cli@3.5.1':
-    resolution: {integrity: sha512-Xt3LnFWTRBn+tXX28lNQl3SftKPYhmdqT5/w2AzQlji/zjL4sTC82U9IKpWbFtMyfjndYnNQ6HTkP06yc/VQ9g==}
+  '@bugsnag/cli@3.10.6':
+    resolution: {integrity: sha512-mB+8jSd0gk9AZ5qE+pu3qh/5bKRIEgNNEmuQl9mbCWoe3WhQvNdMQpOUr4Su2EdGYdUNcbQ8hBG6h5yHn3xpmg==}
     engines: {node: '>=18.0.0'}
     hasBin: true
 
@@ -1300,10 +1378,6 @@ packages:
     resolution: {integrity: sha512-DCCXhiY1CdCy3Eo6SS/qHnBuyrXY0jyefsJBpXemwI5eXEAR0KrhnhxbGU7Ga/8ysssD1A22J5488BYH1t4pgQ==}
     hasBin: true
 
-  '@egjs/hammerjs@2.0.17':
-    resolution: {integrity: sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==}
-    engines: {node: '>=0.8.0'}
-
   '@emnapi/core@1.8.0':
     resolution: {integrity: sha512-ryJnSmj4UhrGLZZPJ6PKVb4wNPAIkW6iyLy+0TRwazd3L1u0wzMe8RfqevAh2HbcSkoeLiSYnOVDOys4JSGYyg==}
 
@@ -1487,8 +1561,8 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
-  '@expo/cli@54.0.20':
-    resolution: {integrity: sha512-cwsXmhftvS0p9NNYOhXGnicBAZl9puWwRt19Qq5eQ6njLnaj8WvcR+kDZyADtgZxBsZiyVlrKXvnjt43HXywQA==}
+  '@expo/cli@57.0.25':
+    resolution: {integrity: sha512-G2FJfwClIPNPhH2sJlIFAkhQLYaKNGzSarIQUl6sVA8oGdrmBnhRvbtTzxDzjS6WzO2aDX8DY7y1aNbCFILodg==}
     hasBin: true
     peerDependencies:
       expo: '*'
@@ -1500,29 +1574,29 @@ packages:
       react-native:
         optional: true
 
-  '@expo/code-signing-certificates@0.0.5':
-    resolution: {integrity: sha512-BNhXkY1bblxKZpltzAx98G2Egj9g1Q+JRcvR7E99DOj862FTCX+ZPsAUtPTr7aHxwtrL7+fL3r0JSmM9kBm+Bw==}
+  '@expo/code-signing-certificates@0.0.6':
+    resolution: {integrity: sha512-iNe0puxwBNEcuua9gmTGzq+SuMDa0iATai1FlFTMHJ/vUmKvN/V//drXoLJkVb5i5H3iE/n/qIJxyoBnXouD0w==}
 
   '@expo/config-plugins@10.1.2':
     resolution: {integrity: sha512-IMYCxBOcnuFStuK0Ay+FzEIBKrwW8OVUMc65+v0+i7YFIIe8aL342l7T4F8lR4oCfhXn7d6M5QPgXvjtc/gAcw==}
 
-  '@expo/config-plugins@54.0.4':
-    resolution: {integrity: sha512-g2yXGICdoOw5i3LkQSDxl2Q5AlQCrG7oniu0pCPPO+UxGb7He4AFqSvPSy8HpRUj55io17hT62FTjYRD+d6j3Q==}
+  '@expo/config-plugins@57.0.9':
+    resolution: {integrity: sha512-hHgfL1avkCdEvDSw7IwlKwRYYNgcxzbNNMIk6W6lTkJpY0MajinAfeJUS0J+wPCsjUfGbVqOJM+XhPaO5ulUxg==}
 
   '@expo/config-types@53.0.5':
     resolution: {integrity: sha512-kqZ0w44E+HEGBjy+Lpyn0BVL5UANg/tmNixxaRMLS6nf37YsDrLk2VMAmeKMMk5CKG0NmOdVv3ngeUjRQMsy9g==}
 
-  '@expo/config-types@54.0.10':
-    resolution: {integrity: sha512-/J16SC2an1LdtCZ67xhSkGXpALYUVUNyZws7v+PVsFZxClYehDSoKLqyRaGkpHlYrCc08bS0RF5E0JV6g50psA==}
+  '@expo/config-types@57.0.2':
+    resolution: {integrity: sha512-ewW08OonrcRIsRKIlFvvcmmafE5zemb1ocu3HkNwtVPyRtj2w42pZCAkMIROYpcVBaPnc3mDT9UZDzwXWC3i6g==}
 
-  '@expo/config@12.0.13':
-    resolution: {integrity: sha512-Cu52arBa4vSaupIWsF0h7F/Cg//N374nYb7HAxV0I4KceKA7x2UXpYaHOL7EEYYvp7tZdThBjvGpVmr8ScIvaQ==}
+  '@expo/config@57.0.9':
+    resolution: {integrity: sha512-dmzlKraIFxa7wLwV6K7WzI8jp6QZpW6Mc5mGjLimJUFjzh4uQdYaT3m3plEutM5yxBoBEwqzks7l+I/ljCbxAQ==}
 
   '@expo/devcert@1.2.1':
     resolution: {integrity: sha512-qC4eaxmKMTmJC2ahwyui6ud8f3W60Ss7pMkpBq40Hu3zyiAaugPXnZ24145U7K36qO9UHdZUVxsCvIpz2RYYCA==}
 
-  '@expo/devtools@0.1.8':
-    resolution: {integrity: sha512-SVLxbuanDjJPgc0sy3EfXUMLb/tXzp6XIHkhtPVmTWJAp+FOr6+5SeiCfJrCzZFet0Ifyke2vX3sFcKwEvCXwQ==}
+  '@expo/devtools@57.0.1':
+    resolution: {integrity: sha512-GyUf+wFNkbttaX0jR7MZa9bm77U0IrLg6d2AjpxdyoXw/w4abHoXG0oFufwLMgP9zLTd5+Ct4X/ffNUTnlzZgg==}
     peerDependencies:
       react: '*'
       react-native: '*'
@@ -1532,64 +1606,137 @@ packages:
       react-native:
         optional: true
 
-  '@expo/env@2.0.8':
-    resolution: {integrity: sha512-5VQD6GT8HIMRaSaB5JFtOXuvfDVU80YtZIuUT/GDhUF782usIXY13Tn3IdDz1Tm/lqA9qnRZQ1BF4t7LlvdJPA==}
+  '@expo/dom-webview@57.0.1':
+    resolution: {integrity: sha512-lAKsME4SAq+8sf56oN0DX5TBYyruupoRxbWbD2xf9RnKY8y6x8eb9LCE5pxSN0qyWdqnp+0wmyWzDkKboThKAw==}
+    peerDependencies:
+      expo: '*'
+      react: '*'
+      react-native: '*'
+
+  '@expo/env@2.4.3':
+    resolution: {integrity: sha512-M1NXeZCA1mkMkYOyIe7PlyRX0/jqFtMoJgyblnlq/vpCRfmueFT7RnGSQG8uEFDF5WHOFGijAQ3fogPh3/n5Ng==}
+    engines: {node: '>=20.12.0'}
 
-  '@expo/fingerprint@0.15.4':
-    resolution: {integrity: sha512-eYlxcrGdR2/j2M6pEDXo9zU9KXXF1vhP+V+Tl+lyY+bU8lnzrN6c637mz6Ye3em2ANy8hhUR03Raf8VsT9Ogng==}
+  '@expo/expo-modules-macros-plugin@0.6.1':
+    resolution: {integrity: sha512-cpsLZE4rqkc1Y3eZTkxB98jrqY1YXgetmtxFt8q89jBRmk3quRuk1BZo+VcnCSObZardjg99r1k5xijEMONFGA==}
+
+  '@expo/fingerprint@0.20.13':
+    resolution: {integrity: sha512-h1x+w+JpNRu88a/5SMZRzJs9YDGR/f7R8ApCr7OdenhqmJ00hFxQMzvxajDLL+1P2Y2g/ND0xksusqvBqWSW5Q==}
     hasBin: true
 
-  '@expo/image-utils@0.8.8':
-    resolution: {integrity: sha512-HHHaG4J4nKjTtVa1GG9PCh763xlETScfEyNxxOvfTRr8IKPJckjTyqSLEtdJoFNJ1vqiABEjW7tqGhqGibZLeA==}
+  '@expo/image-utils@0.11.5':
+    resolution: {integrity: sha512-KPQBTpmpAfy/Vu9y4wPW808/qtZxjYmyJg8cm2QCPAupp+qEWA3b5zmk0ulOwQ9OgeHxuCPgUqWgkwHFo7UsrQ==}
+
+  '@expo/inline-modules@0.1.7':
+    resolution: {integrity: sha512-Bz/khd1gIJqDkje7t5ejD5e9jFbm4xEJzWSwRKadRo6gruepbw1xJ3Eb+e58OS8fY1ZNQYjzZbspnuph67sN0g==}
 
-  '@expo/json-file@10.0.8':
-    resolution: {integrity: sha512-9LOTh1PgKizD1VXfGQ88LtDH0lRwq9lsTb4aichWTWSWqy3Ugfkhfm3BhzBIkJJfQQ5iJu3m/BoRlEIjoCGcnQ==}
+  '@expo/json-file@11.0.1':
+    resolution: {integrity: sha512-zxHWj4MKKMAL29ZQSY/Fssx4Thluk40JmuGNaeS078wy/NhlFhnVi+rHHunulE3xJAJ0CM73m8VK2+GkF9eRwQ==}
 
   '@expo/json-file@9.1.5':
     resolution: {integrity: sha512-prWBhLUlmcQtvN6Y7BpW2k9zXGd3ySa3R6rAguMJkp1z22nunLN64KYTUWfijFlprFoxm9r2VNnGkcbndAlgKA==}
 
-  '@expo/metro-config@54.0.12':
-    resolution: {integrity: sha512-Xhv1z/ak/cuJWeLxlnWr2u22q2AM/klASbjpP5eE34y91lGWa2NUwrFWoS830MhJ6kuAqtGdoQhwyPa3TES7sA==}
+  '@expo/local-build-cache-provider@57.0.8':
+    resolution: {integrity: sha512-SEdE0pAQrr90bRh3MNR0ZuwoIBw390cYdFgbn7Vk0Mtm9EHaBfP7kYj+2hXnXZJgOEm3/JMtfoD3rV7rWA9FGg==}
+
+  '@expo/log-box@57.0.4':
+    resolution: {integrity: sha512-IxwS9s1L2muj8mj8AQSuiy7u8OFJdc02NRFo2me/Tj6DiaeG5SREqmpBE4rQpR2cadqSg5jl8Qab8Cjie616dg==}
+    peerDependencies:
+      '@expo/dom-webview': ^57.0.1
+      expo: '*'
+      react: '*'
+      react-native: '*'
+
+  '@expo/metro-config@57.0.12':
+    resolution: {integrity: sha512-S62Lrq35HZqBFD55423pmWb8PjaiR/W02zQC1uECBmw1vTN8WZaFz4TJ0i21EeJzwfebMb9MLxL8JZ102Z6VbA==}
     peerDependencies:
       expo: '*'
     peerDependenciesMeta:
       expo:
         optional: true
 
-  '@expo/metro@54.2.0':
-    resolution: {integrity: sha512-h68TNZPGsk6swMmLm9nRSnE2UXm48rWwgcbtAHVMikXvbxdS41NDHHeqg1rcQ9AbznDRp6SQVC2MVpDnsRKU1w==}
+  '@expo/metro-file-map@57.0.3':
+    resolution: {integrity: sha512-1OXy+uPYY5uc7Tm4VBsd2NRn+3wHhqeqNuEO/Xo4kmYgv8FjYgUAc+bUXON9FpC2ikcLn4EVlGM9ce2exx9Mlg==}
 
-  '@expo/osascript@2.3.8':
-    resolution: {integrity: sha512-/TuOZvSG7Nn0I8c+FcEaoHeBO07yu6vwDgk7rZVvAXoeAK5rkA09jRyjYsZo+0tMEFaToBeywA6pj50Mb3ny9w==}
+  '@expo/metro@56.0.2':
+    resolution: {integrity: sha512-Ld5AeYMCCDa8bLeWhfuLbZFFjlV3f6ORqyPz2glGh6RltIngMuLf9BTC2yvHFjkKuGxL5SynijmA8xmNNWn5iA==}
+
+  '@expo/osascript@2.7.1':
+    resolution: {integrity: sha512-Zn03EX6In7ts2lPUW2ESUSkEhEWQN1qqsiXjadtZMJOuZRkMiAg1ZQHuvz9DjByDWNJ2pBwAGyrts9lj9k389g==}
     engines: {node: '>=12'}
 
-  '@expo/package-manager@1.9.9':
-    resolution: {integrity: sha512-Nv5THOwXzPprMJwbnXU01iXSrCp3vJqly9M4EJ2GkKko9Ifer2ucpg7x6OUsE09/lw+npaoUnHMXwkw7gcKxlg==}
+  '@expo/package-manager@1.13.1':
+    resolution: {integrity: sha512-y/K+CaYYpZpNGZhSX4HyLT/vyIunFjNfyoxNysPBCefeLKI/VCx6f9LNPzrxayr3rCYO5bl9O8H+HRQK265Nkg==}
 
   '@expo/plist@0.3.5':
     resolution: {integrity: sha512-9RYVU1iGyCJ7vWfg3e7c/NVyMFs8wbl+dMWZphtFtsqyN9zppGREU3ctlD3i8KUE0sCUTVnLjCWr+VeUIDep2g==}
 
-  '@expo/plist@0.4.8':
-    resolution: {integrity: sha512-pfNtErGGzzRwHP+5+RqswzPDKkZrx+Cli0mzjQaus1ZWFsog5ibL+nVT3NcporW51o8ggnt7x813vtRbPiyOrQ==}
+  '@expo/plist@0.8.1':
+    resolution: {integrity: sha512-3gTReGIUm0oRaMClsAJYxBnVPCl6fVpsl8HS+DTVxDhW4GyVyxg9E/Znm3BvcHtUJ51RJJI14pC1wvrNilCRHw==}
+
+  '@expo/prebuild-config@57.0.16':
+    resolution: {integrity: sha512-QA8oMZ7y70kjOzw+abhRl9uYC8Nu/abeUTHr0YVxb3pgIC14gc7w543bYtI+5gEDI3q55jKUViIauC76QvZN1w==}
 
-  '@expo/prebuild-config@54.0.8':
-    resolution: {integrity: sha512-EA7N4dloty2t5Rde+HP0IEE+nkAQiu4A/+QGZGT9mFnZ5KKjPPkqSyYcRvP5bhQE10D+tvz6X0ngZpulbMdbsg==}
+  '@expo/require-utils@57.0.5':
+    resolution: {integrity: sha512-kTAXj9lDFEIPMsbAOGCGbjBbMF0oi7CqkYM79KOX0DDD9wSwXmlKL1z2h8OwsrBf7mbOo2DjlRvZu4BEjrIxGw==}
     peerDependencies:
+      typescript: 7.0.2
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
+  '@expo/router-server@57.0.10':
+    resolution: {integrity: sha512-8rGh6N5di7jzu7UC1SuIA1TWmVd+vBwOHwC7/1ww+FA6CcxcWyQlcPl39h2+Jpnul78CVzWpIjOcdKsZsp2zXw==}
+    peerDependencies:
+      '@expo/metro-runtime': ^57.0.15
       expo: '*'
+      expo-constants: ^57.0.18
+      expo-font: ^57.0.4
+      expo-router: '*'
+      expo-server: ^57.0.3
+      react: '*'
+      react-dom: '*'
+      react-server-dom-webpack: ~19.0.1 || ~19.1.2 || ~19.2.1
+    peerDependenciesMeta:
+      '@expo/metro-runtime':
+        optional: true
+      expo-router:
+        optional: true
+      react-dom:
+        optional: true
+      react-server-dom-webpack:
+        optional: true
 
-  '@expo/schema-utils@0.1.8':
-    resolution: {integrity: sha512-9I6ZqvnAvKKDiO+ZF8BpQQFYWXOJvTAL5L/227RUbWG1OVZDInFifzCBiqAZ3b67NRfeAgpgvbA7rejsqhY62A==}
+  '@expo/schema-utils@57.0.2':
+    resolution: {integrity: sha512-fMu/jyN0l1Wzv7XkeWR4IYCx1M8ryui3FdBNGrWwbRgJ7EhxXxK8E2jxP2W3pbgUwUY0V3hG8+GyfCZwny+Lxw==}
 
   '@expo/sdk-runtime-versions@1.0.0':
     resolution: {integrity: sha512-Doz2bfiPndXYFPMRwPyGa1k5QaKDVpY806UJj570epIiMzWaYyCtobasyfC++qfIXVb5Ocy7r3tP9d62hAQ7IQ==}
 
-  '@expo/spawn-async@1.7.2':
-    resolution: {integrity: sha512-QdWi16+CHB9JYP7gma19OVVg0BFkvU8zNj9GjWorYI8Iv8FUxjOCcYRuAmX4s/h91e4e7BPsskc8cSrZYho9Ew==}
+  '@expo/spawn-async@1.8.0':
+    resolution: {integrity: sha512-eb9xxd/LbuEGSdua4NumCu/McVB9EM+F/JxB9pWgnERw4HQ9XyTNH1KapG6oqLWR8TuRK2LQfzJlmNi94CVobw==}
     engines: {node: '>=12'}
 
   '@expo/sudo-prompt@9.3.2':
     resolution: {integrity: sha512-HHQigo3rQWKMDzYDLkubN5WQOYXJJE2eNqIQC2axC2iO3mHdwnIR7FgZVvHWtBwAdzBgAP0ECp8KqS8TiMKvgw==}
 
+  '@expo/ui@57.0.19':
+    resolution: {integrity: sha512-WB95zQPge5nb04zgY3O2NmMtxg6G+qFH3yOAHcBkTUrJXoBReQoyY3cfp/8N5Q/azcfHJcBE3Jy0Rwq9OoRrfA==}
+    peerDependencies:
+      '@babel/core': '*'
+      expo: '*'
+      react: '*'
+      react-dom: '*'
+      react-native: '*'
+      react-native-worklets: '*'
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      react-dom:
+        optional: true
+      react-native-worklets:
+        optional: true
+
   '@expo/vector-icons@15.0.3':
     resolution: {integrity: sha512-SBUyYKphmlfUBqxSfDdJ3jAdEVSALS2VUPOUyqn48oZmb2TL/O7t7/PQm5v4NQujYEPLPMTLn9KVw6H7twwbTA==}
     peerDependencies:
@@ -1597,11 +1744,13 @@ packages:
       react: '*'
       react-native: '*'
 
-  '@expo/ws-tunnel@1.0.6':
-    resolution: {integrity: sha512-nDRbLmSrJar7abvUjp3smDwH8HcbZcoOEa5jVPUv9/9CajgmWw20JNRwTuBRzWIWIkEJDkz20GoNA+tSwUqk0Q==}
+  '@expo/ws-tunnel@2.0.0':
+    resolution: {integrity: sha512-j+JfTRdCk820J9dU0sA2SqshQIKFOMo7ED84w9MJFcebfbNQgsLztEY/SABDkGnjatrW4xGqnUhVRxSBVyCkXw==}
+    peerDependencies:
+      ws: ^8.0.0
 
-  '@expo/xcpretty@4.3.2':
-    resolution: {integrity: sha512-ReZxZ8pdnoI3tP/dNnJdnmAk7uLT4FjsKDGW7YeDdvdOMz2XCQSmSCM9IWlrXuWtMF9zeSB6WJtEhCQ41gQOfw==}
+  '@expo/xcpretty@4.4.5':
+    resolution: {integrity: sha512-J3eL4n4h5QTwfD0SIz8OIk6/+sOL/hFZAMacgCM07UNlxBQfJipEpIC2AQxvGkbYeStByJ0TVhQAJo+DeNgaSQ==}
     hasBin: true
 
   '@firebase/analytics-compat@0.2.17':
@@ -1868,9 +2017,6 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
-  '@ide/backoff@1.0.0':
-    resolution: {integrity: sha512-F0YfUDjvT+Mtt/R4xdl2X0EYCHMMiJqNLdxHD++jDT5ydEFIyqbCHh51Qx2E211dgZprPKhV7sHmnXKpLuvc5g==}
-
   '@inquirer/external-editor@1.0.3':
     resolution: {integrity: sha512-RWbSrDiYmO4LbejWY7ttpxczuwQyZLBUyygsA9Nsv95hpzUWwnNTVQmAq3xuh7vNwCp07UTmE5i11XAEExx4RA==}
     engines: {node: '>=18'}
@@ -1892,10 +2038,6 @@ packages:
     resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
     engines: {node: '>=12'}
 
-  '@isaacs/fs-minipass@4.0.1':
-    resolution: {integrity: sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==}
-    engines: {node: '>=18.0.0'}
-
   '@isaacs/ttlcache@1.4.1':
     resolution: {integrity: sha512-RQgQ4uQ+pLbqXfOmieB91ejmLwvSgv9nLx6sT6sD83s7umBypgg+OIBOBbEUiJXrfpnp9j0mRhYYdzp9uqq3lA==}
     engines: {node: '>=12'}
@@ -1993,6 +2135,9 @@ packages:
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
+  '@jridgewell/remapping@2.3.5':
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+
   '@jridgewell/resolve-uri@3.1.2':
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
@@ -2006,6 +2151,18 @@ packages:
   '@jridgewell/trace-mapping@0.3.31':
     resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
 
+  '@legendapp/list@3.4.0':
+    resolution: {integrity: sha512-Tlx7Uf9pRP/JbrekuWdKf1+42C9MTfl1wGkP8Lvmg2E2T9rCWQphYOs8aOkcvgbAkJ2S+WR+RTXHS2+6U+nROw==}
+    peerDependencies:
+      react: '*'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+
   '@lodev09/react-native-true-sheet@3.7.3':
     resolution: {integrity: sha512-vX/3F6lD3qH0GZfSVXL+JD/bjFPZtJa35Vyr9KCv94szOHXsjoEyCyi/52r5jw6jmq/KRALCqwidt9A15qq9gw==}
     peerDependencies:
@@ -2342,6 +2499,168 @@ packages:
   '@protobufjs/utf8@1.1.0':
     resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
 
+  '@radix-ui/primitive@1.1.7':
+    resolution: {integrity: sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q==}
+
+  '@radix-ui/react-compose-refs@1.1.5':
+    resolution: {integrity: sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-context@1.2.2':
+    resolution: {integrity: sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-dialog@1.1.23':
+    resolution: {integrity: sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-dismissable-layer@1.1.19':
+    resolution: {integrity: sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-focus-guards@1.1.6':
+    resolution: {integrity: sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-focus-scope@1.1.16':
+    resolution: {integrity: sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-id@1.1.4':
+    resolution: {integrity: sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-portal@1.1.17':
+    resolution: {integrity: sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-presence@1.1.10':
+    resolution: {integrity: sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-primitive@2.1.10':
+    resolution: {integrity: sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-slot@1.3.3':
+    resolution: {integrity: sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-callback-ref@1.1.4':
+    resolution: {integrity: sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-controllable-state@1.2.6':
+    resolution: {integrity: sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-effect-event@0.0.5':
+    resolution: {integrity: sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/react-use-layout-effect@1.1.4':
+    resolution: {integrity: sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@react-native-async-storage/async-storage@2.2.0':
     resolution: {integrity: sha512-gvRvjR5JAaUZF8tv2Kcq/Gbt3JHwbKFYfmb445rhOj6NUMx3qPLixmDx5pZAyb9at1bYvJ4/eTUipU5aki45xw==}
     peerDependencies:
@@ -2413,8 +2732,8 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@react-native-community/datetimepicker@8.4.4':
-    resolution: {integrity: sha512-bc4ZixEHxZC9/qf5gbdYvIJiLZ5CLmEsC3j+Yhe1D1KC/3QhaIfGDVdUcid0PdlSoGOSEq4VlB93AWyetEyBSQ==}
+  '@react-native-community/datetimepicker@9.1.0':
+    resolution: {integrity: sha512-eadbnk+I2vxvW30iTAsm/qlCnMMAadkifIMYNEB2lzhxN/SvlKc7S2V4k5DyrwjdCbqdcMk3t9K6fnUMcAV34w==}
     peerDependencies:
       expo: '>=52.0.0'
       react: '*'
@@ -2432,13 +2751,14 @@ packages:
       react: '>=18.0.0'
       react-native: '>=0.70'
 
-  '@react-native-community/netinfo@11.4.1':
-    resolution: {integrity: sha512-B0BYAkghz3Q2V09BF88RA601XursIEA111tnc2JOaN7axJWmNefmfjZqw/KdSxKZp7CZUuPpjBmz/WCR9uaHYg==}
+  '@react-native-community/netinfo@12.0.1':
+    resolution: {integrity: sha512-P/3caXIvfYSJG8AWJVefukg+ZGRPs+M4Lp3pNJtgcTYoJxCjWrKQGNnCkj/Cz//zWa/avGed0i/wzm0T8vV2IQ==}
     peerDependencies:
+      react: '*'
       react-native: '>=0.59'
 
-  '@react-native-community/slider@5.0.1':
-    resolution: {integrity: sha512-K3JRWkIW4wQ79YJ6+BPZzp1SamoikxfPRw7Yw4B4PElEQmqZFrmH9M5LxvIo460/3QSrZF/wCgi3qizJt7g/iw==}
+  '@react-native-community/slider@5.2.0':
+    resolution: {integrity: sha512-484sH8aWEaSjxaZ7HT3YZ8CKDcNes2synko1vdEz5DFEdvKAduxKJTj22L/qBMD7rtIkfbX69DMzWDAGbOAV6w==}
 
   '@react-native-cookies/cookies@6.2.1':
     resolution: {integrity: sha512-D17wCA0DXJkGJIxkL74Qs9sZ3sA+c+kCoGmXVknW7bVw/W+Vv1m/7mWTNi9DLBZSRddhzYw8SU0aJapIaM/g5w==}
@@ -2482,99 +2802,103 @@ packages:
       react: '*'
       react-native: '*'
 
-  '@react-native/assets-registry@0.81.5':
-    resolution: {integrity: sha512-705B6x/5Kxm1RKRvSv0ADYWm5JOnoiQ1ufW7h8uu2E6G9Of/eE6hP/Ivw3U5jI16ERqZxiKQwk34VJbB0niX9w==}
-    engines: {node: '>= 20.19.4'}
-
-  '@react-native/babel-plugin-codegen@0.81.5':
-    resolution: {integrity: sha512-oF71cIH6je3fSLi6VPjjC3Sgyyn57JLHXs+mHWc9MoCiJJcM4nqsS5J38zv1XQ8d3zOW2JtHro+LF0tagj2bfQ==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/assets-registry@0.86.3':
+    resolution: {integrity: sha512-TDhgCZA4wjJg84d5A9swiOQYPIWSKEEVdg9IwMFZDupQzW/F3QoLUrfAJOcalgqTDA9/buTB8awhE3Whwg6u9Q==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  '@react-native/babel-preset@0.81.5':
-    resolution: {integrity: sha512-UoI/x/5tCmi+pZ3c1+Ypr1DaRMDLI3y+Q70pVLLVgrnC3DHsHRIbHcCHIeG/IJvoeFqFM2sTdhSOLJrf8lOPrA==}
-    engines: {node: '>= 20.19.4'}
-    peerDependencies:
-      '@babel/core': '*'
+  '@react-native/babel-plugin-codegen@0.86.3':
+    resolution: {integrity: sha512-O6Xza4JBGPIU8J7YbKTyBoYL4thpy8jMW/oaLDWdAyOwYHKIjK47pAL5HUEbOe2bWz2PEKjbYRF2ApkJv1ottQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  '@react-native/codegen@0.80.2':
-    resolution: {integrity: sha512-eYad9ex9/RS6oFbbpu6LxsczktbhfJbJlTvtRlcWLJjJbFTeNr5Q7CgBT2/m5VtpxnJ/0YdmZ9vdazsJ2yp9kw==}
-    engines: {node: '>=18'}
+  '@react-native/babel-preset@0.86.3':
+    resolution: {integrity: sha512-/eqs/Hy9RZRcjdcs4wj3Cqmxvtb3NM5g+Uuh1RIvsjynMO8PRsrVWWLWgBcZL/jYUo+ogXd2NFB0W8L5Bg89xw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     peerDependencies:
       '@babel/core': '*'
 
-  '@react-native/codegen@0.81.5':
-    resolution: {integrity: sha512-a2TDA03Up8lpSa9sh5VRGCQDXgCTOyDOFH+aqyinxp1HChG8uk89/G+nkJ9FPd0rqgi25eCTR16TWdS3b+fA6g==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/codegen@0.86.3':
+    resolution: {integrity: sha512-Ux4jHi0fh+bdtVEcL0gaPLbY56V+SvFUDl/8sRAE1jdb4k+o7fT/4Nc29yz4X+qfjstkSqObQTMBGhdzxH9JvA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     peerDependencies:
       '@babel/core': '*'
 
-  '@react-native/community-cli-plugin@0.81.5':
-    resolution: {integrity: sha512-yWRlmEOtcyvSZ4+OvqPabt+NS36vg0K/WADTQLhrYrm9qdZSuXmq8PmdJWz/68wAqKQ+4KTILiq2kjRQwnyhQw==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/community-cli-plugin@0.86.3':
+    resolution: {integrity: sha512-qSDL9LQc5mZSZPNczT95WU9YQuPzxBklgON9vLhhqfI0yWIwKInqFx88dQ/uiEXBtf0yossthaQIqA4Ml6bF6g==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     peerDependencies:
       '@react-native-community/cli': '*'
-      '@react-native/metro-config': '*'
+      '@react-native/metro-config': 0.86.3
     peerDependenciesMeta:
       '@react-native-community/cli':
         optional: true
       '@react-native/metro-config':
         optional: true
 
-  '@react-native/debugger-frontend@0.81.5':
-    resolution: {integrity: sha512-bnd9FSdWKx2ncklOetCgrlwqSGhMHP2zOxObJbOWXoj7GHEmih4MKarBo5/a8gX8EfA1EwRATdfNBQ81DY+h+w==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/debugger-frontend@0.86.3':
+    resolution: {integrity: sha512-TQmeofQ0PcuylhhlleOeuzHYZfbrgm3gayXzowqUEzgRisTm1D40/J3ggqs7XkQi5HP5ZA3n8dHmKL9vIzPcsw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  '@react-native/dev-middleware@0.81.5':
-    resolution: {integrity: sha512-WfPfZzboYgo/TUtysuD5xyANzzfka8Ebni6RIb2wDxhb56ERi7qDrE4xGhtPsjCL4pQBXSVxyIlCy0d8I6EgGA==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/debugger-shell@0.86.3':
+    resolution: {integrity: sha512-O4ds+J7xZfxkbih9T+cAGegBdvKSPKYJm/lDgC9CpEjFMkmzWTpVLU3Qsv9sqZuo58z+sGhIcJfPsCFFWHpqbQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  '@react-native/gradle-plugin@0.81.5':
-    resolution: {integrity: sha512-hORRlNBj+ReNMLo9jme3yQ6JQf4GZpVEBLxmTXGGlIL78MAezDZr5/uq9dwElSbcGmLEgeiax6e174Fie6qPLg==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/dev-middleware@0.86.3':
+    resolution: {integrity: sha512-LiEPTqTg/63bYUnrPyHLfjTDCNhA/+CUqI1+DsA9tYyewtSbULd5awsva6SgE10I+2iMhgKXS3ymkhU/kSCrGA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  '@react-native/js-polyfills@0.81.5':
-    resolution: {integrity: sha512-fB7M1CMOCIUudTRuj7kzxIBTVw2KXnsgbQ6+4cbqSxo8NmRRhA0Ul4ZUzZj3rFd3VznTL4Brmocv1oiN0bWZ8w==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/gradle-plugin@0.86.3':
+    resolution: {integrity: sha512-lxmx0GqLEWRIpZfpYFXlYVIs3ENQwaW6Vmp6oi29l2GoQJ1wZfFZRdMimDWlGEk8LKfHar3QH3iaPMkTcK9lEQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  '@react-native/metro-babel-transformer@0.81.5':
-    resolution: {integrity: sha512-Vwm6gJ3VlP+QKAEU98v1dwZKqbUcIYP47K614SktA9dYDOtw+rEBjyzvNf69S4YG5JRvDmzw36E9zxtcg6ABOw==}
+  '@react-native/jest-preset@0.86.3':
+    resolution: {integrity: sha512-oMmBwXUpTgJvGlcXQQPuiQLykoM8jsWYp6RwdJ2NWyIWzJcGp1rmSr3XV7istoIcUt0wdOVLtQs0A0nDm9ND+A==}
     engines: {node: '>= 20.19.4'}
+    peerDependencies:
+      react: ^19.2.3
+
+  '@react-native/js-polyfills@0.86.3':
+    resolution: {integrity: sha512-eYIJ0es967+tePBFQDnl/gidVFxLns3fnbiK6rxscQrGodvuUO6hwxpQnfNynJ8MjbbndImXihXjcnJdc7SzJg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  '@react-native/metro-babel-transformer@0.86.3':
+    resolution: {integrity: sha512-0nlwVkG0uT9o72nrGTKUz/IqDnCkM4zE0ihe4r+OJcxH93yBdDm58AXJ3EXZeSjv3osHEFXU7ceajdZiS34mTw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     peerDependencies:
       '@babel/core': '*'
 
-  '@react-native/metro-config@0.81.5':
-    resolution: {integrity: sha512-3Q0jQt5Zcen4+udkE0XQIS8VmI+vx3sWl5R2o36vHkg8eXpiQjvz/jY0sZmC8ahailiEWEscFklQzhTmizhdPQ==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/metro-config@0.86.3':
+    resolution: {integrity: sha512-qdzDMepV2xdUhsO4XC7idnnbt8K6+Hd59AjeK9y4KS86fxSQq5oL0TAbqUuajDGR7beNQoYTuS6AowN/zP0oaQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
   '@react-native/normalize-color@2.1.0':
     resolution: {integrity: sha512-Z1jQI2NpdFJCVgpY+8Dq/Bt3d+YUi1928Q+/CZm/oh66fzM0RUl54vvuXlPJKybH4pdCZey1eDTPaLHkMPNgWA==}
 
-  '@react-native/normalize-colors@0.81.5':
-    resolution: {integrity: sha512-0HuJ8YtqlTVRXGZuGeBejLE04wSQsibpTI+RGOyVqxZvgtlLLC/Ssw0UmbHhT4lYMp2fhdtvKZSs5emWB1zR/g==}
+  '@react-native/normalize-colors@0.86.3':
+    resolution: {integrity: sha512-Cv3CDkprb67GrzuaS9BGbBJC/6G4lIw3nyKOHRKTqTTum4bn37y5+R0Z04L8mcbQN85eEohNrRwb7IOM4j6uvg==}
 
-  '@react-native/typescript-config@0.81.5':
-    resolution: {integrity: sha512-NeCecPmlW+fcwFKzDzT1GcEQmJSE6tLz9Fg6wGjKL1l7pqUzpQIQg1iF3OovHOlyfPiB98+XRHnIBvlTSJ5R0w==}
+  '@react-native/typescript-config@0.86.3':
+    resolution: {integrity: sha512-HjYnjYUVP88Z/0YPGQ4ErRsEirCzccNYGuoldv6uhiK93aVnIdv7+8sbROmqcJv6BI6R+Kf0iBlN3gSG9Au+jg==}
 
-  '@react-native/virtualized-lists@0.81.5':
-    resolution: {integrity: sha512-UVXgV/db25OPIvwZySeToXD/9sKKhOdkcWmmf4Jh8iBZuyfML+/5CasaZ1E7Lqg6g3uqVQq75NqIwkYmORJMPw==}
-    engines: {node: '>= 20.19.4'}
+  '@react-native/virtualized-lists@0.86.3':
+    resolution: {integrity: sha512-1j44NEyNn05Ut40vHAmoSWbsIcybFkMAOBTwQt1PrESyfSS+qBoyU1LGIogNva0VIa0rQyEC5PzbA7R4/7Nhyw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     peerDependencies:
-      '@types/react': ^19.1.0
+      '@types/react': ^19.2.0
       react: '*'
-      react-native: '*'
+      react-native: 0.86.3
     peerDependenciesMeta:
       '@types/react':
         optional: true
 
-  '@react-navigation/core@7.21.1':
-    resolution: {integrity: sha512-9eOK71VFEyJjm1bP8o4Gf7YYppWPZ+RdNIjTc+WbSM7AFEH0XXEIHkkhpIBuB416sDlRZ1CRxHk2frh1HPBZqw==}
+  '@react-navigation/core@7.22.1':
+    resolution: {integrity: sha512-6JAaYM4u6RPtVMUjN5ovX5DNBdBZtDqebk7kEwlncUP6fP4P94+qEYv1bRmtxSFs7UxiZwQQs+jzTsBaW2WeyA==}
     peerDependencies:
       react: '>= 18.2.0'
 
-  '@react-navigation/drawer@7.12.2':
-    resolution: {integrity: sha512-LEwER8YRq6Kjxjw9vECOVgWUAiP8l2jso3XntfAvthZqYWtVD4Ms1HdAUAf4Emwp78W15PEj7m0PV2StmglkLw==}
+  '@react-navigation/drawer@7.14.2':
+    resolution: {integrity: sha512-vHDJ5TlKZ2RWW1z+Zy7k4mwuo3kLXfhO2+EpDWBTPcaeb8b/3upouKDALQviWCQ1KqyUAme+DbE8cIoGcuSQvg==}
     peerDependencies:
-      '@react-navigation/native': ^7.3.3
+      '@react-navigation/native': ^7.4.1
       react: '>= 18.2.0'
       react-native: '*'
       react-native-gesture-handler: '>= 2.0.0'
@@ -2582,11 +2906,11 @@ packages:
       react-native-safe-area-context: '>= 4.0.0'
       react-native-screens: '>= 4.0.0'
 
-  '@react-navigation/elements@2.9.25':
-    resolution: {integrity: sha512-cV7Hny55aE/uge6f4UB0pbGQbFl3XjXLMW+lTBNuJs8P7a9tuf7dkkPHxxgnLIvxE+KJVI2K8CGabfDk4Ht0Sg==}
+  '@react-navigation/elements@2.9.43':
+    resolution: {integrity: sha512-XOYpRfgT9RPV2VIoXeEfTVdmXwEPpHwkezDkZVsVNEN6rTWDo07BPyLmWsvXooczyMf3jHe9AB2p/U9lJArtiQ==}
     peerDependencies:
       '@react-native-masked-view/masked-view': '>= 0.2.0'
-      '@react-navigation/native': ^7.3.3
+      '@react-navigation/native': ^7.4.1
       react: '>= 18.2.0'
       react-native: '*'
       react-native-safe-area-context: '>= 4.0.0'
@@ -2594,23 +2918,23 @@ packages:
       '@react-native-masked-view/masked-view':
         optional: true
 
-  '@react-navigation/native-stack@7.17.5':
-    resolution: {integrity: sha512-jS67nzFlpuzNSDzAsL09hk59sNrp6zxViqKW+RzC5ia26VMxZBw2QFLBZN6rOnO3nOcpAKDpS8/Mx6vicurDfw==}
+  '@react-navigation/native-stack@7.19.2':
+    resolution: {integrity: sha512-D6hmtgpMZz1x8R0PLbfqqKh5ajEkb13DguE7X/MNNKYL4riY4zD3TrjbcesUC2EZklpQ/EoJ6h6HAhMNfCCsoQ==}
     peerDependencies:
-      '@react-navigation/native': ^7.3.3
+      '@react-navigation/native': ^7.4.1
       react: '>= 18.2.0'
       react-native: '*'
       react-native-safe-area-context: '>= 4.0.0'
       react-native-screens: '>= 4.0.0'
 
-  '@react-navigation/native@7.3.3':
-    resolution: {integrity: sha512-VjZngfeiyJestZPT99CKHRi3qOR6XwnEEPWb6uHF/L7fBI6RBVP842iJf61MUHRTzsWPUT+epJqdf1wm8N5YkQ==}
+  '@react-navigation/native@7.4.1':
+    resolution: {integrity: sha512-pEnu5XzAXV6RWr6A6pmZ7qLB+O6TJWMhBO25AjckMdr596UWulMPHQCtBcnOUfg6K+2h9ZUctHF2E5Xu4vcOrQ==}
     peerDependencies:
       react: '>= 18.2.0'
       react-native: '*'
 
-  '@react-navigation/routers@7.6.0':
-    resolution: {integrity: sha512-lblhDXfS75jLc7G2K7BZGM+7cjqQXk13X/MA4fq/12r62zM+fBhhreLzYflSitrDDXFRJpSvJXy0ziiGU04Xow==}
+  '@react-navigation/routers@7.6.4':
+    resolution: {integrity: sha512-GI7eJm8/KsZUQaYcXvEExikKurRZRgEsSzyZ7faENfi65yqJBCXjDMwyN1pF6pNW1MoLH1ErDwDivFxY6BzD3w==}
 
   '@redux-saga/core@1.4.2':
     resolution: {integrity: sha512-nIMLGKo6jV6Wc1sqtVQs1iqbB3Kq20udB/u9XEaZQisT6YZ0NRB8+4L6WqD/E+YziYutd27NJbG8EWUPkb7c6Q==}
@@ -2665,6 +2989,13 @@ packages:
   '@samchon/openapi@4.7.2':
     resolution: {integrity: sha512-yj6kGWHtKK85wfJXrSmWqLWjfCd98SAvCTsVDlej2s7OfXXHqA4hmgPRNrAPIQRVi00xn26qL1PChjq1MhzlRQ==}
 
+  '@shopify/flash-list@2.3.2':
+    resolution: {integrity: sha512-vQnd0y0Ag11yzS30llaeCrtIU3xYTMe7KEOP3dveLImnVjQEUw6BEg1+Ztja6aODlVNz1BpvxtlQ5eZGxiLwKw==}
+    peerDependencies:
+      '@babel/runtime': '*'
+      react: '*'
+      react-native: '*'
+
   '@sideway/address@4.1.5':
     resolution: {integrity: sha512-IqO/DUQHUkPeixNQ8n0JA6102hT9CmaljNTPmQ1u8MEhBo/R4Q8eKLN/vGZxuebwOroDB4cbpjheD4+/sKFK4Q==}
 
@@ -2762,7 +3093,7 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       storybook: ^9.0.18
-      typescript: '>= 4.9.x'
+      typescript: 7.0.2
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -2774,7 +3105,7 @@ packages:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
       storybook: ^9.1.17
-      typescript: '>= 4.9.x'
+      typescript: 7.0.2
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -2839,6 +3170,9 @@ packages:
   '@types/ejson@2.2.2':
     resolution: {integrity: sha512-4DEXy6yKJVr1DQx4xy+y7NV9mK6p1vgikvtbOITWgp2Prs6yhffqZ8XOjEtojX2pzC7B1KF9kcQe9Bv52E9K2A==}
 
+  '@types/emscripten@1.41.6':
+    resolution: {integrity: sha512-uN+9i8bFT5CUcZfyIEYDrSueACEyKGbUs5kC/72DGlZZoinh84sJfVV0i8UOJD1asdzkvLPBRrKs41kZ8MdEXg==}
+
   '@types/eslint-scope@3.7.7':
     resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==}
 
@@ -2851,12 +3185,6 @@ packages:
   '@types/graceful-fs@4.1.9':
     resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==}
 
-  '@types/hammerjs@2.0.46':
-    resolution: {integrity: sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==}
-
-  '@types/hast@2.3.10':
-    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
-
   '@types/hoist-non-react-statics@3.3.7':
     resolution: {integrity: sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==}
     peerDependencies:
@@ -2910,11 +3238,14 @@ packages:
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
+  '@types/react-test-renderer@19.3.0':
+    resolution: {integrity: sha512-TX4p2D4Z2oigM3SXU7+QyLSUnSR0vR1S1Pfxm/qFL9nHQ3jclgi6ioGoWQmlIr1DeKRVmPJrmNlhgM0JlWlLUg==}
+
   '@types/react@17.0.90':
     resolution: {integrity: sha512-P9beVR/x06U9rCJzSxtENnOr4BrbJ6VrsrDTc+73TtHv9XHhryXKbjGRB+6oooB2r0G/pQkD/S4dHo/7jUfwFw==}
 
-  '@types/react@19.1.17':
-    resolution: {integrity: sha512-Qec1E3mhALmaspIrhWt9jkQMNdw6bReVu64mjvhbhq2NFPftLPVr+l1SZgmw/66WwBNpDh7ao5AT6gF5v41PFA==}
+  '@types/react@19.2.18':
+    resolution: {integrity: sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==}
 
   '@types/scheduler@0.16.8':
     resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==}
@@ -2931,9 +3262,6 @@ packages:
   '@types/ua-parser-js@0.7.39':
     resolution: {integrity: sha512-P/oDfpofrdtF5xw433SPALpdSchtJmY7nsJItf8h3KXqOslkbySh8zq4dSWXH2oTjRvJ5PczVEoCZPow6GicLg==}
 
-  '@types/unist@2.0.11':
-    resolution: {integrity: sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==}
-
   '@types/url-parse@1.4.11':
     resolution: {integrity: sha512-FKvKIqRaykZtd4n47LbK/W/5fhQQ1X7cxxzG9A48h0BGN+S04NH7ervcCjM8tyR0lyGru83FAHSmw2ObgKoESg==}
 
@@ -3173,14 +3501,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@urql/core@5.2.0':
-    resolution: {integrity: sha512-/n0ieD0mvvDnVAXEQgX/7qJiVcvYvNkOHeBvkwtylfjydar123caCXcl58PXFY11oU1oquJocVXHxLAbtv4x1A==}
-
-  '@urql/exchange-retry@1.3.2':
-    resolution: {integrity: sha512-TQMCz2pFJMfpNxmSfX1VSfTjwUIFx/mL+p1bnfM1xjjdla7Z+KnGMW/EhFbpckp3LyWAH4PgOsMwOMnIN+MBFg==}
-    peerDependencies:
-      '@urql/core': ^5.0.0
-
   '@vitest/expect@3.2.4':
     resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==}
 
@@ -3246,11 +3566,6 @@ packages:
     engines: {node: '>=10.0.0'}
     deprecated: this version has critical issues, please update to the latest version
 
-  '@xmldom/xmldom@0.9.8':
-    resolution: {integrity: sha512-p96FSY54r+WJ50FIOsCOjyj/wavs8921hG5+kVMmZgKcvIKxMXHTrjNJvRgWa/zuX3B6t2lijLNFaOyuxUH+2A==}
-    engines: {node: '>=14.6'}
-    deprecated: this version has critical issues, please update to the latest version
-
   '@xtuc/ieee754@1.2.0':
     resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==}
 
@@ -3278,6 +3593,10 @@ packages:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
 
+  accepts@2.0.0:
+    resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==}
+    engines: {node: '>= 0.6'}
+
   acorn-globals@7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
 
@@ -3309,6 +3628,11 @@ packages:
     resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==}
     engines: {node: '>= 14'}
 
+  agent-cli-detector@0.1.7:
+    resolution: {integrity: sha512-d8OWDVdZMgjhLUT9ZPgSv/BdFFF9pVuscC0JdUSz3bjwE15gcp6u/o0/JooM2yyAWC49KThFhXlgTXRa9B7yng==}
+    engines: {node: '>=18.18'}
+    hasBin: true
+
   ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
     peerDependencies:
@@ -3370,9 +3694,6 @@ packages:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -3389,6 +3710,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.6:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
@@ -3434,9 +3759,6 @@ packages:
   asap@2.0.6:
     resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==}
 
-  assert@2.1.0:
-    resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==}
-
   assertion-error@2.0.1:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
@@ -3528,8 +3850,11 @@ packages:
   babel-plugin-react-native-web@0.21.2:
     resolution: {integrity: sha512-SPD0J6qjJn8231i0HZhlAGH6NORe+QvRSQM2mwQEzJ2Fb3E4ruWTiiicPlHjmeWShDXLcvoorOCXjeR7k/lyWA==}
 
-  babel-plugin-syntax-hermes-parser@0.29.1:
-    resolution: {integrity: sha512-2WFYnoWGdmih1I1J5eIqxATOeycOqRwYxAQBu3cUu/rhwInwHUg7k60AFNbuGjSDL8tje5GDrAnxzRLcu2pYcA==}
+  babel-plugin-syntax-hermes-parser@0.36.0:
+    resolution: {integrity: sha512-LhD0xdoedDw7ansQgXbB2DADLZIK/LRXuWNBPuVzMc5S2WK5GyT89tCM+cQzxFGO0mGyLK6D5TrVOJJzAoDy8Q==}
+
+  babel-plugin-syntax-hermes-parser@0.36.1:
+    resolution: {integrity: sha512-ycduwJbvdvIMmVvlAZqGggS+pm5Eu4Bk9pcV9Sm2Z4PJNRVsKkv0g7vHj+LeuC1gHTeF67sJXFOq61IlqCa2hA==}
 
   babel-plugin-transform-flow-enums@0.0.2:
     resolution: {integrity: sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ==}
@@ -3545,17 +3870,20 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0 || ^8.0.0-0
 
-  babel-preset-expo@54.0.9:
-    resolution: {integrity: sha512-8J6hRdgEC2eJobjoft6mKJ294cLxmi3khCUy2JJQp4htOYYkllSLUq6vudWJkTJiIuGdVR4bR6xuz2EvJLWHNg==}
+  babel-preset-expo@57.0.12:
+    resolution: {integrity: sha512-rrZqJPYbVevy7rqibJZQFd3AsleGslJ63vmB3Qs8b5poOO5AHaehUGbZHjb0HoOZO59d86BEifYbq0/ncoM2UQ==}
     peerDependencies:
       '@babel/runtime': ^7.20.0
       expo: '*'
+      expo-widgets: ^57.0.19
       react-refresh: '>=0.14.0 <1.0.0'
     peerDependenciesMeta:
       '@babel/runtime':
         optional: true
       expo:
         optional: true
+      expo-widgets:
+        optional: true
 
   babel-preset-jest@29.6.3:
     resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==}
@@ -3569,6 +3897,13 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  balanced-match@4.0.4:
+    resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
+    engines: {node: 18 || 20 || >=22}
+
+  barcode-detector@3.2.2:
+    resolution: {integrity: sha512-/4QOrrNrCRmDSBWiiP4aC72dnkuXUEdcFRidHgbPRXUpy82XcCMvJssI6fEs6JT42LS7DvBVZO70qasJbYKyrA==}
+
   bare-events@2.8.2:
     resolution: {integrity: sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==}
     peerDependencies:
@@ -3649,6 +3984,10 @@ packages:
   brace-expansion@2.0.2:
     resolution: {integrity: sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==}
 
+  brace-expansion@5.0.12:
+    resolution: {integrity: sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==}
+    engines: {node: 20 || >=22}
+
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -3740,10 +4079,6 @@ packages:
   chownr@1.1.4:
     resolution: {integrity: sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==}
 
-  chownr@3.0.0:
-    resolution: {integrity: sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==}
-    engines: {node: '>=18'}
-
   chrome-launcher@0.15.2:
     resolution: {integrity: sha512-zdLEwNo3aUVzIhKhTtXfxhdvZhUghrnmkvcAq2NoDd+LeOHKf03H5jwZ8T/STsAlzyALkBVK552iaG1fGf1xVQ==}
     engines: {node: '>=12.13.0'}
@@ -3753,8 +4088,8 @@ packages:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
-  chromium-edge-launcher@0.2.0:
-    resolution: {integrity: sha512-JfJjUnq25y9yg4FABRRVPmBGWPZZi+AQXT4mxupb67766/0UlhG8PAZCz6xzEMXTbW3CsSoE8PcCWA49n35mKg==}
+  chromium-edge-launcher@0.3.0:
+    resolution: {integrity: sha512-p03azHlGjtyRvFEee3cyvtsRYdniSkwjkzmM/KmVnqT5d7QkkwpJBhis/zCLMYdQMVJ5tt140TBNqqrZPaWeFA==}
 
   ci-info@2.0.0:
     resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
@@ -3830,9 +4165,6 @@ packages:
     resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==}
     engines: {node: '>= 0.8'}
 
-  comma-separated-tokens@2.0.3:
-    resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
-
   command-exists@1.2.9:
     resolution: {integrity: sha512-LTQ/SGc+s0Xc0Fu5WaKnR0YiygZkm9eKFvyS+fRsU7/ZWFF8ykFM6Pc9aCVf1+xasOOZpO3BAVgVrKvsqKHV7w==}
 
@@ -3859,10 +4191,6 @@ packages:
   commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -3908,6 +4236,10 @@ packages:
     resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==}
     engines: {node: '>= 0.6'}
 
+  content-type@2.1.0:
+    resolution: {integrity: sha512-mj7UPXE0jaqaOsukNZRUEfEi2AcL7C/vwmwcHV0O97eO1E1pxBZuyjlZrx5seTaNBg1U6+o35wpa35Qfcc+7ag==}
+    engines: {node: '>=18'}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -3925,7 +4257,7 @@ packages:
     resolution: {integrity: sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==}
     engines: {node: '>=14'}
     peerDependencies:
-      typescript: '>=4.9.5'
+      typescript: 7.0.2
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -3939,16 +4271,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
-  crypto-random-string@2.0.0:
-    resolution: {integrity: sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==}
-    engines: {node: '>=8'}
-
   css-select@5.2.2:
     resolution: {integrity: sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==}
 
-  css-selector-parser@1.4.1:
-    resolution: {integrity: sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==}
-
   css-tree@1.1.3:
     resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
     engines: {node: '>=8.0.0'}
@@ -4033,10 +4358,6 @@ packages:
   decimal.js@10.6.0:
     resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==}
 
-  decode-uri-component@0.2.2:
-    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
-    engines: {node: '>=0.10'}
-
   decompress-response@6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
     engines: {node: '>=10'}
@@ -4110,10 +4431,16 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  detect-node-es@1.1.0:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  dnssd-advertise@1.1.6:
+    resolution: {integrity: sha512-Ndrrf6BMPalkQPd/zubL+4YghH2J9NspapQ09uDXwYbvOPkP0oaqf5CkcwJ0b50kS2O3ul6yVu+jz+RY62Cejg==}
+
   doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -4146,18 +4473,6 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
-  dotenv-expand@11.0.7:
-    resolution: {integrity: sha512-zIHwmZPRshsCdpMDyVsqGmgyP0yT8GAgXUnkdAoJisxvf33k7yO6OuoKmcTGuXPWSsm8Oh88nZicRLA9Y0rUeA==}
-    engines: {node: '>=12'}
-
-  dotenv@16.4.7:
-    resolution: {integrity: sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==}
-    engines: {node: '>=12'}
-
-  dotenv@16.6.1:
-    resolution: {integrity: sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==}
-    engines: {node: '>=12'}
-
   drange@1.1.1:
     resolution: {integrity: sha512-pYxfDYpued//QpnLIm4Avk7rsNtAtQkUES2cwAYSvD/wd2pKD71gN2Ebj3e7klzXwjocvE8c5vx/1fxwpqmSxA==}
     engines: {node: '>=4'}
@@ -4220,10 +4535,6 @@ packages:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
 
-  env-editor@0.4.2:
-    resolution: {integrity: sha512-ObFo8v4rQJAE59M69QzwloxPZtd33TpYEIjtKD1rrFDcM1Gd7IkDxEBU+HriziN6HSHQnBJi8Dmy+JWkav5HKA==}
-    engines: {node: '>=8'}
-
   env-paths@2.2.1:
     resolution: {integrity: sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==}
     engines: {node: '>=6'}
@@ -4393,10 +4704,6 @@ packages:
     deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
-  esm@3.2.25:
-    resolution: {integrity: sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==}
-    engines: {node: '>=6'}
-
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -4445,9 +4752,6 @@ packages:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
     engines: {node: '>=0.8.x'}
 
-  exec-async@2.2.0:
-    resolution: {integrity: sha512-87OpwcEiMia/DeiKFzaQNBNFeN3XkkpYIh9FyOqq5mS2oKv3CBE67PXoEKcr6nodWdXNogTiQ0jE2NGuoffXPw==}
-
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -4464,33 +4768,35 @@ packages:
     resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  expo-apple-authentication@8.0.8:
-    resolution: {integrity: sha512-TwCHWXYR1kS0zaeV7QZKLWYluxsvqL31LFJubzK30njZqeWoWO89HZ8nZVaeXbFV1LrArKsze4BmMb+94wS0AQ==}
+  expo-apple-authentication@57.0.2:
+    resolution: {integrity: sha512-00KnlyRceRKski+ljZz8q8JhJZ4D3ZScU+Y0RqS6ElJ8GaCWfd7Qh5tMr47yIU/dKDrOnkzkFUM+6vyHS5HI7Q==}
     peerDependencies:
       expo: '*'
+      react: '*'
       react-native: '*'
 
-  expo-application@7.0.8:
-    resolution: {integrity: sha512-qFGyxk7VJbrNOQWBbE09XUuGuvkOgFS9QfToaK2FdagM2aQ+x3CvGV2DuVgl/l4ZxPgIf3b/MNh9xHpwSwn74Q==}
+  expo-application@57.0.3:
+    resolution: {integrity: sha512-t/CxeLio0NjY9/cOak1tQp62/hAUjzJxmhR4rVUR7K5bb9YoEtfl1ZekTn+Iuh+dYOMYzF0l72ODMSmY3CR1NA==}
     peerDependencies:
       expo: '*'
 
-  expo-asset@12.0.12:
-    resolution: {integrity: sha512-CsXFCQbx2fElSMn0lyTdRIyKlSXOal6ilLJd+yeZ6xaC7I9AICQgscY5nj0QcwgA+KYYCCEQEBndMsmj7drOWQ==}
+  expo-asset@57.0.17:
+    resolution: {integrity: sha512-qSdWZBSfEg06o3GJMwcj36tw0vXkB6eYjqkQistWmyJkHxhUOKnsKJnev6OraXxLdoI+KOd1+qgp/ENx8gcqYA==}
     peerDependencies:
       expo: '*'
       react: '*'
       react-native: '*'
 
-  expo-audio@0.4.9:
-    resolution: {integrity: sha512-J4mMYEt2mqRqqwmSsXFylMGlrNWa+MbCzGl1IZBs+smvPAMJ3Ni8fNplzCQ0I9RnRzygKhRwJNpnAVL+n4MuyA==}
+  expo-audio@57.0.5:
+    resolution: {integrity: sha512-39fX5JC5zDvELB4/eDJPj2XAYRN0W9+K2DfDWm5N3aC5WZ7HRrhupWtT6hbH09NlfYpsRSqYOwEZnocFM42ynQ==}
     peerDependencies:
       expo: '*'
+      expo-asset: '*'
       react: '*'
       react-native: '*'
 
-  expo-camera@17.0.10:
-    resolution: {integrity: sha512-w1RBw83mAGVk4BPPwNrCZyFop0VLiVSRE3c2V9onWbdFwonpRhzmB4drygG8YOUTl1H3wQvALJHyMPTbgsK1Jg==}
+  expo-camera@57.0.5:
+    resolution: {integrity: sha512-0JaUXfDWMytmqm4pVKesZfLTSjAumfS2UGhnc1M4tqJ0qATCS0jxc7KjaoyKEzWJY+FEc8GlPCAGprS/7tNWZQ==}
     peerDependencies:
       expo: '*'
       react: '*'
@@ -4500,42 +4806,42 @@ packages:
       react-native-web:
         optional: true
 
-  expo-constants@18.0.12:
-    resolution: {integrity: sha512-WzcKYMVNRRu4NcSzfIVRD5aUQFnSpTZgXFrlWmm19xJoDa4S3/PQNi6PNTBRc49xz9h8FT7HMxRKaC8lr0gflA==}
+  expo-constants@57.0.18:
+    resolution: {integrity: sha512-cLDwDOniPfuCZPHNY++cAY2ZkK97u5aobbBvilPK2LLmaWxR4ZpD31LWUIzUDLrwMPxLjmh1uURnbeYEf0Mivw==}
     peerDependencies:
       expo: '*'
       react-native: '*'
 
-  expo-device@8.0.10:
-    resolution: {integrity: sha512-jd5BxjaF7382JkDMaC+P04aXXknB2UhWaVx5WiQKA05ugm/8GH5uaz9P9ckWdMKZGQVVEOC8MHaUADoT26KmFA==}
+  expo-device@57.0.2:
+    resolution: {integrity: sha512-1A0/FICR3CgrH43FeiDQP3l5eHDmiMoh4EjXfhfoHHkMgdBQdyD0kwDWskiGZlQ3E0Nd0LHkCFH6vJ1ofm/jow==}
     peerDependencies:
       expo: '*'
 
-  expo-document-picker@14.0.8:
-    resolution: {integrity: sha512-3tyQKpPqWWFlI8p9RiMX1+T1Zge5mEKeBuXWp1h8PEItFMUDSiOJbQ112sfdC6Hxt8wSxreV9bCRl/NgBdt+fA==}
+  expo-document-picker@57.0.2:
+    resolution: {integrity: sha512-vVBbBNg0piMJUIxjB+DR6JaZZpcSl90ZUoywLA/EgNHTfRkZW+9axP97UxM2a0Zm0W6WfH3cLzzGAEfP9OKGwg==}
     peerDependencies:
       expo: '*'
 
-  expo-file-system@19.0.21:
-    resolution: {integrity: sha512-s3DlrDdiscBHtab/6W1osrjGL+C2bvoInPJD7sOwmxfJ5Woynv2oc+Fz1/xVXaE/V7HE/+xrHC/H45tu6lZzzg==}
+  expo-file-system@57.0.7:
+    resolution: {integrity: sha512-1vkZRadOsIputFDBcclqBa1pO3iXOO6iIsdqJipQWw4V5TSnWgmRTuOF7ro8IzrVue+PHbum++KCG3Tawem4cg==}
     peerDependencies:
       expo: '*'
       react-native: '*'
 
-  expo-font@14.0.10:
-    resolution: {integrity: sha512-UqyNaaLKRpj4pKAP4HZSLnuDQqueaO5tB1c/NWu5vh1/LF9ulItyyg2kF/IpeOp0DeOLk0GY0HrIXaKUMrwB+Q==}
+  expo-font@57.0.4:
+    resolution: {integrity: sha512-7WOMC2oA6xCfOm8bbofqWn2bIqyWFm7YLEnpc/gA1MJH0Ll0TfT/3+CqRkoW2eNRWMS8sxrz5WukUmSvmNquHA==}
     peerDependencies:
       expo: '*'
       react: '*'
       react-native: '*'
 
-  expo-haptics@15.0.8:
-    resolution: {integrity: sha512-lftutojy8Qs8zaDzzjwM3gKHFZ8bOOEZDCkmh2Ddpe95Ra6kt2izeOfOfKuP/QEh0MZ1j9TfqippyHdRd1ZM9g==}
+  expo-haptics@57.0.3:
+    resolution: {integrity: sha512-qucUXtwtJdtECKSQK5D6TQBc/0SxKj7s5wQ4mrfSxhZsHrS9a4rcxINl/gbruMaY9spTXStco32ST4pV0vXmxw==}
     peerDependencies:
       expo: '*'
 
-  expo-image@3.0.11:
-    resolution: {integrity: sha512-4TudfUCLgYgENv+f48omnU8tjS2S0Pd9EaON5/s1ZUBRwZ7K8acEr4NfvLPSaeXvxW24iLAiyQ7sV7BXQH3RoA==}
+  expo-image@57.0.5:
+    resolution: {integrity: sha512-jOm5lofaIKXhQ7i0Hz3I5JuNULw/aghmpIPZXddwQcEtw8+wUhlozq3M7LbsOrcsBEapcG4jFs85DsfuFoz1tQ==}
     peerDependencies:
       expo: '*'
       react: '*'
@@ -4545,46 +4851,56 @@ packages:
       react-native-web:
         optional: true
 
-  expo-keep-awake@15.0.8:
-    resolution: {integrity: sha512-YK9M1VrnoH1vLJiQzChZgzDvVimVoriibiDIFLbQMpjYBnvyfUeHJcin/Gx1a+XgupNXy92EQJLgI/9ZuXajYQ==}
+  expo-keep-awake@57.0.2:
+    resolution: {integrity: sha512-GqgH746wtJImmsbyHmCQoi7cOslKuWQBbJHXr53S35Bpf5UvxCAztvnitUEd7D0QvFN2rvkOhylbZpgZZfBLlQ==}
     peerDependencies:
       expo: '*'
       react: '*'
 
-  expo-local-authentication@17.0.8:
-    resolution: {integrity: sha512-Q5fXHhu6w3pVPlFCibU72SYIAN+9wX7QpFn9h49IUqs0Equ44QgswtGrxeh7fdnDqJrrYGPet5iBzjnE70uolA==}
+  expo-local-authentication@57.0.3:
+    resolution: {integrity: sha512-1oQCBKz8JOpai+Zp+Z2RkBFIi2CHHWLSJk/pjvT9VEyf8nPFslo4kt1ZlQvtJ4rupbKNCmxqKfYr8Mlo8nJEug==}
     peerDependencies:
       expo: '*'
 
-  expo-modules-autolinking@3.0.23:
-    resolution: {integrity: sha512-YZnaE0G+52xftjH5nsIRaWsoVBY38SQCECclpdgLisdbRY/6Mzo7ndokjauOv3mpFmzMZACHyJNu1YSAffQwTg==}
+  expo-modules-autolinking@57.0.13:
+    resolution: {integrity: sha512-Hj5NjZRlfccazhKab+wK19leRVUr1Y/PUERaRvegIbUSkq4GVxKq6lU9QHlKQyC16MdD/VS4iwsiLivB4o7lvQ==}
     hasBin: true
 
-  expo-modules-core@3.0.29:
-    resolution: {integrity: sha512-LzipcjGqk8gvkrOUf7O2mejNWugPkf3lmd9GkqL9WuNyeN2fRwU0Dn77e3ZUKI3k6sI+DNwjkq4Nu9fNN9WS7Q==}
+  expo-modules-core@57.0.18:
+    resolution: {integrity: sha512-ovB7C+GVQTlKAOIsOIHJVVXN9Mn0ljf2SYBS+afrRaGqq+HZEn1D3o+HReIVeH1NjCn/xDBb7I4HjldHs6luZA==}
     peerDependencies:
       react: '*'
       react-native: '*'
+      react-native-worklets: ^0.7.4 || ^0.8.0 || ^0.9.0 || ^0.10.0
+    peerDependenciesMeta:
+      react-native-worklets:
+        optional: true
+
+  expo-modules-jsi@57.1.0:
+    resolution: {integrity: sha512-a5ckeHfnbYfonhcHGkM0EU/a0Keh+/OufXy/HyFS+spr5Ib0N4Oh1ZsSYFQhp5xdOUFkVofKRhfH+VmcccIIpA==}
+    peerDependencies:
+      react-native: '*'
 
-  expo-notifications@0.32.15:
-    resolution: {integrity: sha512-gnJcauheC2S0Wl0RuJaFkaBRVzCG011j5hlG0TEbsuOCPBuB/F30YEk8yurK8Psv+zHkVfeiJ5AC+nL0LWk0WA==}
+  expo-notifications@57.0.19:
+    resolution: {integrity: sha512-JW/usGEwOxWzN8s0L7+j3FAoB39GtaZtpUGye2lPvcqYSkvewpZYkrC16P1JaCP09YRx0Q+qXPx5NUoUU8NsBA==}
     peerDependencies:
       expo: '*'
       react: '*'
       react-native: '*'
 
-  expo-server@1.0.5:
-    resolution: {integrity: sha512-IGR++flYH70rhLyeXF0Phle56/k4cee87WeQ4mamS+MkVAVP+dDlOHf2nN06Z9Y2KhU0Gp1k+y61KkghF7HdhA==}
+  expo-server@57.0.3:
+    resolution: {integrity: sha512-aK+LdKzauHSGmsOStZtyxdzv0zWssCkxTw3m4QuOhfDSJsZaMRTd9O41d8ixU/QfELTbaJ0oRNcF7JFV/7O9YQ==}
     engines: {node: '>=20.16.0'}
 
-  expo-status-bar@3.0.9:
-    resolution: {integrity: sha512-xyYyVg6V1/SSOZWh4Ni3U129XHCnFHBTcUo0dhWtFDrZbNp/duw5AGsQfb2sVeU0gxWHXSY1+5F0jnKYC7WuOw==}
+  expo-status-bar@57.0.1:
+    resolution: {integrity: sha512-Xwaq1gAoVRWx5dPG5VhT5RSbnI9OilhZnO5qoPBnUaBAa5VzRzfdS8q0/bsPt0jR2DKLtGuP0bQ6efMJ4RIMDg==}
     peerDependencies:
+      expo: '*'
       react: '*'
       react-native: '*'
 
-  expo-system-ui@6.0.9:
-    resolution: {integrity: sha512-eQTYGzw1V4RYiYHL9xDLYID3Wsec2aZS+ypEssmF64D38aDrqbDgz1a2MSlHLQp2jHXSs3FvojhZ9FVela1Zcg==}
+  expo-system-ui@57.0.4:
+    resolution: {integrity: sha512-z//rxQJzhTNA1PcKrUtWmrd21jAS3nEDu1b0n8B/7LTTR933OcsZYP1HnbaZifuo2ZH/h7nce2Ow61WZ1Ig2bg==}
     peerDependencies:
       expo: '*'
       react-native: '*'
@@ -4593,38 +4909,44 @@ packages:
       react-native-web:
         optional: true
 
-  expo-video-thumbnails@10.0.8:
-    resolution: {integrity: sha512-nPUtP7ERLf5DY5V2A6gquRP5rP3Uvq6+FVkDwG9R3KKhFeTYkWZ5Ce1iQ7Yt5qDNQqcUcgEqmRpGCbJmn9ckKA==}
+  expo-video-thumbnails@57.0.2:
+    resolution: {integrity: sha512-9nqx9nzjdFuSweJL/WsCaDoZOpd3lzOswudvoBsHUZvx0xfHJ+iGo3fND2u58P1CBT7qVjEiVm0wMBZKB6Z14g==}
     peerDependencies:
       expo: '*'
 
-  expo-video@3.0.16:
-    resolution: {integrity: sha512-H1HlxcHGomZItqisGfW3YL/G9BHtNBfVSimDJcLuyxyU87wFnV8loO9tCjuhufkfh/aTa2sW5BYAjLjg9DvnBQ==}
+  expo-video@57.0.4:
+    resolution: {integrity: sha512-4YCWG1IJzUNpLX0xoussK0VOG524qgUiMbwJzrgpDuPUzOgR3ZqXSZxKsy3HlYLiuWdzIQzwfpbtSNim9F9D3Q==}
     peerDependencies:
       expo: '*'
       react: '*'
       react-native: '*'
 
-  expo-web-browser@15.0.10:
-    resolution: {integrity: sha512-fvDhW4bhmXAeWFNFiInmsGCK83PAqAcQaFyp/3pE/jbdKmFKoRCWr46uZGIfN4msLK/OODhaQ/+US7GSJNDHJg==}
+  expo-web-browser@57.0.3:
+    resolution: {integrity: sha512-+ecvhyS/PdWkpv4ai6FF1Trd6Y/4kn/eQ3O86mie2ecU3w+I8bKZh13kppY/jw1uSL7yikt03L5W/iiHojrFwQ==}
     peerDependencies:
       expo: '*'
       react-native: '*'
 
-  expo@54.0.30:
-    resolution: {integrity: sha512-6q+aFfKL0SpT8prfdpR3V8HcN51ov0mCGuwQTzyuk6eeO9rg7a7LWbgPv9rEVXGZEuyULstL8LGNwHqusand7Q==}
+  expo@57.0.23:
+    resolution: {integrity: sha512-/aBLZFTD7+BNHWV/q5XbNRFqMhW/CrHsYeq8CcS/iGz6lJHYwEMm4XFcdoaeliuMdo6ZjNrsTHkBIdGB8VMHTg==}
     hasBin: true
     peerDependencies:
       '@expo/dom-webview': '*'
       '@expo/metro-runtime': '*'
       react: '*'
+      react-dom: '*'
       react-native: '*'
+      react-native-web: '*'
       react-native-webview: '*'
     peerDependenciesMeta:
       '@expo/dom-webview':
         optional: true
       '@expo/metro-runtime':
         optional: true
+      react-dom:
+        optional: true
+      react-native-web:
+        optional: true
       react-native-webview:
         optional: true
 
@@ -4661,6 +4983,11 @@ packages:
     resolution: {integrity: sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==}
     engines: {node: '>=0.8.0'}
 
+  fb-dotslash@0.5.8:
+    resolution: {integrity: sha512-XHYLKk9J4BupDxi9bSEhkfss0m+Vr9ChTrjhf9l2iw3jB5C7BnY4GVPoMcqbrTutsKJso6yj2nAB6BI/F2oZaA==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
@@ -4673,6 +5000,9 @@ packages:
       picomatch:
         optional: true
 
+  fetch-nodeshim@0.4.10:
+    resolution: {integrity: sha512-m6I8ALe4L4XpdETy7MJZWs6L1IVMbjs99bwbpIKphxX+0CTns4IKDWJY0LWfr4YsFjfg+z1TjzTMU8lKl8rG0w==}
+
   figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -4685,10 +5015,6 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
-  filter-obj@1.1.0:
-    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
-    engines: {node: '>=0.10.0'}
-
   finalhandler@1.1.2:
     resolution: {integrity: sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==}
     engines: {node: '>= 0.8'}
@@ -4764,10 +5090,6 @@ packages:
     resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
     engines: {node: '>= 6'}
 
-  freeport-async@2.0.0:
-    resolution: {integrity: sha512-K7od3Uw45AJg00XUmy15+Hae2hOcgKcmN3/EF6Y7i01O0gaqiRx8sUSpsb9+BRNL8RPBrhzPsVfy8q9ADlJuWQ==}
-    engines: {node: '>=8'}
-
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -4825,6 +5147,10 @@ packages:
     resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
     engines: {node: '>= 0.4'}
 
+  get-nonce@1.0.1:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   get-package-type@0.1.0:
     resolution: {integrity: sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==}
     engines: {node: '>=8.0.0'}
@@ -4880,10 +5206,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
-  global-dirs@0.1.1:
-    resolution: {integrity: sha512-NknMLn7F2J7aflwFOlGdNIuCDpN3VGoSoB+aap3KABFWbHVn1TCgFC+np23J8W2BiZbjfEw3BFBycSMv1AFblg==}
-    engines: {node: '>=4'}
-
   globals@13.24.0:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
@@ -4936,36 +5258,30 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
-  hast-util-from-selector@2.0.1:
-    resolution: {integrity: sha512-oKhgO8/r9HMeNXJspY3gFD6VqCWNN9jpIHPkcPl/qQpelbigKB+5jC9k36M+w1kmEPvd386+PU5LEsxJzCRZMw==}
-
-  hast-util-parse-selector@3.1.1:
-    resolution: {integrity: sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==}
-
-  hastscript@7.2.0:
-    resolution: {integrity: sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==}
-
   he@1.2.0:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
-  hermes-estree@0.28.1:
-    resolution: {integrity: sha512-w3nxl/RGM7LBae0v8LH2o36+8VqwOZGv9rX1wyoWT6YaKZLqpJZ0YQ5P0LVr3tuRpf7vCx0iIG4i/VmBJejxTQ==}
+  hermes-compiler@250829098.0.17:
+    resolution: {integrity: sha512-qG1PXzTEtriF6oQLZF3vyHhSMxOdW5h2TqqLri0rdpstPustd2fSvRZQMVAPdlhgFwBfYnj3OUZtiO6LjYsEFw==}
 
-  hermes-estree@0.29.1:
-    resolution: {integrity: sha512-jl+x31n4/w+wEqm0I2r4CMimukLbLQEYpisys5oCre611CI5fc9TxhqkBBCJ1edDG4Kza0f7CgNz8xVMLZQOmQ==}
+  hermes-estree@0.35.0:
+    resolution: {integrity: sha512-xVx5Opwy8Oo1I5yGpVRhCvWL/iV3M+ylksSKVNlxxD90cpDpR/AR1jLYqK8HWihm065a6UI3HeyAmYzwS8NOOg==}
 
-  hermes-estree@0.32.0:
-    resolution: {integrity: sha512-KWn3BqnlDOl97Xe1Yviur6NbgIZ+IP+UVSpshlZWkq+EtoHg6/cwiDj/osP9PCEgFE15KBm1O55JRwbMEm5ejQ==}
+  hermes-estree@0.36.0:
+    resolution: {integrity: sha512-A1+8zn5oss2CFP7pKsOaxorQG6FNIz1WU1VDqruLPPZl3LVgeE2C5xfFg8Ow6/Ow4mSslLLtYP1J3n38eKyW9w==}
 
-  hermes-parser@0.28.1:
-    resolution: {integrity: sha512-nf8o+hE8g7UJWParnccljHumE9Vlq8F7MqIdeahl+4x0tvCUJYRrT0L7h0MMg/X9YJmkNwsfbaNNrzPtFXOscg==}
+  hermes-estree@0.36.1:
+    resolution: {integrity: sha512-guv1nQ6IJ7S83NRFPWc3SA7IBZrdNC9kapwOq6uXvF4wP+sDCgjzQbKPCoyYmoyZRzztF/n/c36l/rccCZSiCw==}
 
-  hermes-parser@0.29.1:
-    resolution: {integrity: sha512-xBHWmUtRC5e/UL0tI7Ivt2riA/YBq9+SiYFU7C1oBa/j2jYGlIF9043oak1F47ihuDIxQ5nbsKueYJDRY02UgA==}
+  hermes-parser@0.35.0:
+    resolution: {integrity: sha512-9JLjeHxBx8T4CAsydZR49PNZUaix+WpQJwu9p2010lu+7Kwl6D/7wYFFJxoz+aXkaaClp9Zfg6W6/zVlSJORaA==}
 
-  hermes-parser@0.32.0:
-    resolution: {integrity: sha512-g4nBOWFpuiTqjR3LZdRxKUkij9iyveWeuks7INEsMX741f3r9xxrOe8TeQfUxtda0eXmiIFiMQzoeSQEno33Hw==}
+  hermes-parser@0.36.0:
+    resolution: {integrity: sha512-GdpwMmH5x6IpC1cijvcvYnlPB60Mh6kTSF/NFdYV/j56gYdi+0RIakYs+eqOV+bbO0SW7mgVVGSsTJxyPQfo3w==}
+
+  hermes-parser@0.36.1:
+    resolution: {integrity: sha512-GApNk4zLHi2UWoWZZkx7LNCOSzLSc5lB55pZ/PhK7ycFeg7u5LcF88p/WbpIi1XUDtE0MpHE3uRR3u3KB7TjSQ==}
 
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
@@ -5036,11 +5352,6 @@ packages:
     resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
     engines: {node: '>= 4'}
 
-  image-size@1.2.1:
-    resolution: {integrity: sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw==}
-    engines: {node: '>=16.x'}
-    hasBin: true
-
   import-fresh@3.3.1:
     resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
     engines: {node: '>=6'}
@@ -5165,10 +5476,6 @@ packages:
     resolution: {integrity: sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==}
     engines: {node: '>= 0.4'}
 
-  is-nan@1.3.2:
-    resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==}
-    engines: {node: '>= 0.4'}
-
   is-negative-zero@2.0.3:
     resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==}
     engines: {node: '>= 0.4'}
@@ -5339,14 +5646,17 @@ packages:
     resolution: {integrity: sha512-DOSwCRqXirTOyheM+4d5YZOrWcdu0LNZ87ewUoywbcb2XR4wKgqiG8vNeYwhjFMbEkfju7wx2GYH0P2gevGvFw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
-  jest-expo@54.0.16:
-    resolution: {integrity: sha512-wPV5dddlNMORNSA7ZjEjePA+ztks3G5iKCOHLIauURnKQPTscnaat5juXPboK1Bv2I+c/RDfkt4uZtAmXdlu/g==}
+  jest-expo@57.0.5:
+    resolution: {integrity: sha512-U08fwjaDBwnnbKnZcOA0WQbHfKqOWTCGku+IdCaekrLZmfbbZr3P1WqEsXHo6ntidQ3DmW+TT6G1aOp+ChYfKA==}
     hasBin: true
     peerDependencies:
+      '@react-native/jest-preset': ^0.86.3
       expo: '*'
       react-native: '*'
-      react-server-dom-webpack: ~19.0.3 || ~19.1.4 || ~19.2.3
+      react-server-dom-webpack: ~19.0.4 || ~19.1.5 || ~19.2.4
     peerDependenciesMeta:
+      expo:
+        optional: true
       react-server-dom-webpack:
         optional: true
 
@@ -5543,8 +5853,8 @@ packages:
     resolution: {integrity: sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==}
     engines: {node: '>=6'}
 
-  lan-network@0.1.7:
-    resolution: {integrity: sha512-mnIlAEMu4OyEvUNdzco9xpuB9YVcPkQec+QsgycBCtPZvEqWPCDPfbAE4OJMdBBWpZWtpCn1xw9jJYlwjWI5zQ==}
+  lan-network@0.2.1:
+    resolution: {integrity: sha512-ONPnazC96VKDntab9j9JKwIWhZ4ZUceB4A9Epu4Ssg0hYFmtHZSeQ+n15nIwTFmcBUKtExOer8WTJ4GF9MO64A==}
     hasBin: true
 
   launch-editor@2.12.0:
@@ -5741,10 +6051,6 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
-  mathjax-full@3.2.2:
-    resolution: {integrity: sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==}
-    deprecated: Version 4 replaces this package with the scoped package @mathjax/src
-
   mdn-data@2.0.14:
     resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
 
@@ -5769,66 +6075,121 @@ packages:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
 
-  metro-babel-transformer@0.83.3:
-    resolution: {integrity: sha512-1vxlvj2yY24ES1O5RsSIvg4a4WeL7PFXgKOHvXTXiW0deLvQr28ExXj6LjwCCDZ4YZLhq6HddLpZnX4dEdSq5g==}
-    engines: {node: '>=20.19.4'}
+  metro-babel-transformer@0.84.5:
+    resolution: {integrity: sha512-2WbHILKMiJUzfdjmGOQOqU1bWi9//gqiclc/tkk/AIsrrVw3efhZ1uhkOwMTxUEPOzqoo091H0olLmVZH5FHGQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-babel-transformer@0.84.6:
+    resolution: {integrity: sha512-B1ozl6KxFHbQjXZ2U8WiTPWXylqiD3V4EXyV5r0fqETOrqIrJlBvbVTD82UxIN+B3Vpe4l8G1tb15ocd2RyOQA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-cache-key@0.84.5:
+    resolution: {integrity: sha512-3dPB2TnvGjjf0/9O7AXVQURKXuQNauTZE7WpTGTlR017Gh/B5y0m/2wcqxfveUguHSpu89KhVxCAlr2k/H7uhQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-cache-key@0.84.6:
+    resolution: {integrity: sha512-6tyXt1BZ/3U183XV48oif7Nm65TE+pTo0Vs31u4FxMgqiYQR/SiSr3RoXn3pmy4pd280ZmLmct0x3jZpu0pV4A==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-cache@0.84.5:
+    resolution: {integrity: sha512-WHS0n2OxQqtwEjSeQFPePNrMvEFhmQcUQM9cRJMHByWoi/GMWFBEWOf7hVkAM/0KRutAXNbDlSu/cZB6CyxgQQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-cache-key@0.83.3:
-    resolution: {integrity: sha512-59ZO049jKzSmvBmG/B5bZ6/dztP0ilp0o988nc6dpaDsU05Cl1c/lRf+yx8m9WW/JVgbmfO5MziBU559XjI5Zw==}
-    engines: {node: '>=20.19.4'}
+  metro-cache@0.84.6:
+    resolution: {integrity: sha512-KBJVpb02oKNO+jlWQ1Aax7cd11YP0MClDaMgx6C4MhyZ9g95J/dC1Bo6sCzXaU9L9h/w5cQfT5zDkGW5sOj99A==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-cache@0.83.3:
-    resolution: {integrity: sha512-3jo65X515mQJvKqK3vWRblxDEcgY55Sk3w4xa6LlfEXgQ9g1WgMh9m4qVZVwgcHoLy0a2HENTPCCX4Pk6s8c8Q==}
-    engines: {node: '>=20.19.4'}
+  metro-config@0.84.5:
+    resolution: {integrity: sha512-zie+uN6oohscowi2S7ByU+wUw6CrT4ZxW9uAbONOObSxx86RGmnIAmjXHLkfmcdYoY7jzOPEbqcI6oeVmqyBQA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-config@0.83.3:
-    resolution: {integrity: sha512-mTel7ipT0yNjKILIan04bkJkuCzUUkm2SeEaTads8VfEecCh+ltXchdq6DovXJqzQAXuR2P9cxZB47Lg4klriA==}
-    engines: {node: '>=20.19.4'}
+  metro-config@0.84.6:
+    resolution: {integrity: sha512-cD2mLEofcuV26kxSV4hfV1Pbuh6igdUhYQriO8ZVeJ7HyZfq4/wqHV0gSR7fEO8NUp9odr60/Kzm5YakmghWwQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-core@0.83.3:
-    resolution: {integrity: sha512-M+X59lm7oBmJZamc96usuF1kusd5YimqG/q97g4Ac7slnJ3YiGglW5CsOlicTR5EWf8MQFxxjDoB6ytTqRe8Hw==}
-    engines: {node: '>=20.19.4'}
+  metro-core@0.84.5:
+    resolution: {integrity: sha512-xwm605hCi5Y6eJTTb8ZWo6pkUcoBEIyiQOfkZh5GwtDwUrP9SNhTQZhzJHrBCwwxlf3Ptl/pxWJgQ1rsNYMnrA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-file-map@0.83.3:
-    resolution: {integrity: sha512-jg5AcyE0Q9Xbbu/4NAwwZkmQn7doJCKGW0SLeSJmzNB9Z24jBe0AL2PHNMy4eu0JiKtNWHz9IiONGZWq7hjVTA==}
-    engines: {node: '>=20.19.4'}
+  metro-core@0.84.6:
+    resolution: {integrity: sha512-ZqYskM8+f3PFMosBDJd8DLqRvT1ltRGhWL/ZfTpBvf4SoadO30VVrdhAoHFVGz3G1CJpWa3fgZH7nnnX/ybllA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-minify-terser@0.83.3:
-    resolution: {integrity: sha512-O2BmfWj6FSfzBLrNCXt/rr2VYZdX5i6444QJU0fFoc7Ljg+Q+iqebwE3K0eTvkI6TRjELsXk1cjU+fXwAR4OjQ==}
-    engines: {node: '>=20.19.4'}
+  metro-file-map@0.84.5:
+    resolution: {integrity: sha512-mlm/JL8toSbSc2akpKIGmzvrVRSCgZ5vkbycI34oMLoOnLGuLyC8WTyVJ6P0hZG/usDaGwZSl/s9BCRriqjGJA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-resolver@0.83.3:
-    resolution: {integrity: sha512-0js+zwI5flFxb1ktmR///bxHYg7OLpRpWZlBBruYG8OKYxeMP7SV0xQ/o/hUelrEMdK4LJzqVtHAhBm25LVfAQ==}
-    engines: {node: '>=20.19.4'}
+  metro-file-map@0.84.6:
+    resolution: {integrity: sha512-ov9VywWBsHPt54Zc7/DxWvqjTwxuZvhfeyHg8ZAMGKtf2PcH1wS3EnoBH7In53Rspk/eXVWAO5+avxunPn081w==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-runtime@0.83.3:
-    resolution: {integrity: sha512-JHCJb9ebr9rfJ+LcssFYA2x1qPYuSD/bbePupIGhpMrsla7RCwC/VL3yJ9cSU+nUhU4c9Ixxy8tBta+JbDeZWw==}
-    engines: {node: '>=20.19.4'}
+  metro-minify-terser@0.84.5:
+    resolution: {integrity: sha512-BJoFwCEDsYnagPqarayInv2+diCDNDdLlaof/p6s9w4gh+gc9HXYM+pDvsKGKKUumpZswNF3Z/ftTMqKl/5IBg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-source-map@0.83.3:
-    resolution: {integrity: sha512-xkC3qwUBh2psVZgVavo8+r2C9Igkk3DibiOXSAht1aYRRcztEZNFtAMtfSB7sdO2iFMx2Mlyu++cBxz/fhdzQg==}
-    engines: {node: '>=20.19.4'}
+  metro-minify-terser@0.84.6:
+    resolution: {integrity: sha512-SqhB/Kxrw0XfyW0k8mEscqX/CQopm6Fp3EpdSIPzvKfGgQp9bTMahg9PAdVsXUmIWwErbmFw1VqB+VFBOKksUw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-symbolicate@0.83.3:
-    resolution: {integrity: sha512-F/YChgKd6KbFK3eUR5HdUsfBqVsanf5lNTwFd4Ca7uuxnHgBC3kR/Hba/RGkenR3pZaGNp5Bu9ZqqP52Wyhomw==}
-    engines: {node: '>=20.19.4'}
+  metro-resolver@0.84.5:
+    resolution: {integrity: sha512-VSSnepg1k6LyCwtb6eirWdAWlpKwBG8Rdtsr1mU38rMelFyWgh3/QuMSiZIZAIjwg/fsa8GhW5/FO54CAUPCEA==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-resolver@0.84.6:
+    resolution: {integrity: sha512-PplpGc/OCLxgKeLNsLQO/VHsYDIvkcGGr3zNT7UanHCGRqhxKv245o+naV8cRI4/pcLqyc+9j+J0AJbT3Kp5Sg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-runtime@0.84.5:
+    resolution: {integrity: sha512-U1m2+d1Pr+JO2/iVXBB2OfXXityz7tqwIorxfrT15IEgaHvpJBq/OHiqnOWPKJbUl3JcxjcdviZZOKk85oK4Qg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-runtime@0.84.6:
+    resolution: {integrity: sha512-47EYO/DOai0PA3GoAyDpyXOgHNMwbl/Z9dQlQineDLHkpD42xOwMrIx1crT0+n6F+aGoEyxZmeFwfMzaIqVqKQ==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-source-map@0.84.5:
+    resolution: {integrity: sha512-2BtV5L9uPc49F13Gn5wiP6bX/EncqzqTIk2VL/0F/96Vo0YEOjluT/qktQjFODfqGFsucwnh5mPEAl/2jVEfeg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-source-map@0.84.6:
+    resolution: {integrity: sha512-4p/EplRbgNxhdqA6kAj1AmIq9qqYXYSAjgxuZ73rYA+p037xDDrxK8CyDKNfbn1k6aMuVt8LV0fpt7NHUTKiZw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-symbolicate@0.84.5:
+    resolution: {integrity: sha512-rQ40zYDAkaWBN9yvjUuAD0ZpzBMZSoKyGYXnb5JrfbKjun7fTvfoLHL3KXFYenBTYZkQtlp4cKSCv/1utxFyOw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+    hasBin: true
+
+  metro-symbolicate@0.84.6:
+    resolution: {integrity: sha512-wJFyyF5ysbVyoYVWGL6GwVMiNnGllwDU2gF096376fl0fc8IFUlADSyNlswj31K9og2sOilXe/FdyWFPczPUYg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     hasBin: true
 
-  metro-transform-plugins@0.83.3:
-    resolution: {integrity: sha512-eRGoKJU6jmqOakBMH5kUB7VitEWiNrDzBHpYbkBXW7C5fUGeOd2CyqrosEzbMK5VMiZYyOcNFEphvxk3OXey2A==}
-    engines: {node: '>=20.19.4'}
+  metro-transform-plugins@0.84.5:
+    resolution: {integrity: sha512-+InaSVGaOyt0DyRo4Y/zIdPI6CZwnbNho5LAL23tgmuGwv7fyfkF7kKfPjZcfxXBcoYdTLLFnCfCH/dHSiCqNg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro-transform-worker@0.83.3:
-    resolution: {integrity: sha512-Ztekew9t/gOIMZX1tvJOgX7KlSLL5kWykl0Iwu2cL2vKMKVALRl1hysyhUw0vjpAvLFx+Kfq9VLjnHIkW32fPA==}
-    engines: {node: '>=20.19.4'}
+  metro-transform-plugins@0.84.6:
+    resolution: {integrity: sha512-pROPMFaj25Y9+3LlLqpBRz/7B/2YPnfEQz/z3juYxkh3FGQ+3c/Qh4E+khPSTdwTw0M6LitLYHMqaHMbQmuBJw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
-  metro@0.83.3:
-    resolution: {integrity: sha512-+rP+/GieOzkt97hSJ0MrPOuAH/jpaS21ZDvL9DJ35QYRDlQcwzcvUlGUf79AnQxq/2NPiS/AULhhM4TKutIt8Q==}
-    engines: {node: '>=20.19.4'}
+  metro-transform-worker@0.84.5:
+    resolution: {integrity: sha512-ui1Z8x4s5RL36gMmKLaMMO7O9NNDHNdthEZSCDQHAau3JcAsTaFOK6I+2q4I/kW5u8hSEjJk9L45TXSVJw6g1A==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro-transform-worker@0.84.6:
+    resolution: {integrity: sha512-xLTVrOENaHR9DiuhnHS+zcle0rKsCy2CpXSIx7xD+zhJs+qVRNUyV7Z1zIt/0P/d0cSGVx846R+dIjHEudhcww==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  metro@0.84.5:
+    resolution: {integrity: sha512-r1liLkyFZMVSEMNjU1CJU5pRzs3NdkxHqXS60O25c0rCIqAR+cGk7rPydw/g0WAIKVXojIBIF45yYBPagJGcgw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     hasBin: true
 
-  mhchemparser@4.2.1:
-    resolution: {integrity: sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ==}
+  metro@0.84.6:
+    resolution: {integrity: sha512-ty/tx/imE5Ph2gvPU788Ckim6RAC2tyZxLz2hWRgC9U7/fGKV7qY/slADy0qHPEw9cpUgc4BfmV3oUsYwm7oeg==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+    hasBin: true
 
   micromatch@4.0.8:
     resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==}
@@ -5850,6 +6211,10 @@ packages:
     resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
     engines: {node: '>= 0.6'}
 
+  mime-types@3.0.2:
+    resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==}
+    engines: {node: '>=18'}
+
   mime@1.6.0:
     resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
     engines: {node: '>=4'}
@@ -5880,6 +6245,10 @@ packages:
     resolution: {integrity: sha512-enIvLvRAFZYXJzkCYG5RKmPfrFArdLv+R+lbQ53BmIMLIry74bjKzX6iHAm8WYamJkhSSEabrWN5D97XnKObjQ==}
     engines: {node: 20 || >=22}
 
+  minimatch@10.2.6:
+    resolution: {integrity: sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==}
+    engines: {node: 18 || 20 || >=22}
+
   minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
 
@@ -5902,16 +6271,9 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
-  minizlib@3.1.0:
-    resolution: {integrity: sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw==}
-    engines: {node: '>= 18'}
-
   mitt@3.0.1:
     resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
 
-  mj-context-menu@0.6.1:
-    resolution: {integrity: sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==}
-
   mkdirp-classic@0.5.3:
     resolution: {integrity: sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==}
 
@@ -5929,12 +6291,12 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  multitars@1.0.2:
+    resolution: {integrity: sha512-6GwVw5eLi9sThdtlS4PKwC7yRLaf45pYhIEzKBHdKxi+YOXGKFX8acIniH+Uh/+k9mS2lQOupTccjoe5r0/1IQ==}
+
   mute-stream@0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoclone@0.2.1:
     resolution: {integrity: sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==}
 
@@ -5943,6 +6305,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@3.3.19:
+    resolution: {integrity: sha512-Y2tUNy4ouw6tq5oDSKeQYGOyhkUBhNOcGV/02KC+6kd9eDGqdZd++mjMiIDilrBYvjEnCYvVtsuHCuP+okSfug==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   napi-build-utils@2.0.0:
     resolution: {integrity: sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==}
 
@@ -5962,12 +6329,13 @@ packages:
     resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
     engines: {node: '>= 0.6'}
 
+  negotiator@1.1.0:
+    resolution: {integrity: sha512-NMPBRMJgiQHjbd8phG3Vebdx4kZ1H121rbl5IkMqeOsahptB9BKo/d7oJ3zTXqTgagn2bWlNSXkh0QUGM31RYg==}
+    engines: {node: '>=18'}
+
   neo-async@2.6.2:
     resolution: {integrity: sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==}
 
-  nested-error-stacks@2.0.1:
-    resolution: {integrity: sha512-SrQrok4CATudVzBS7coSz26QRSmlK9TzzoFbeKfcPBUFPjcQM9Rqvr/DlJkOrwI/0KcgvMub1n1g5Jt9EgRn4A==}
-
   nocache@3.0.4:
     resolution: {integrity: sha512-WDD0bdg9mbq6F4mRxEYcPWwfA1vxd0mrvKOyxI7Xj/atfRHVeutzuWByG//jfm4uPzp0y4Kj051EORCBSQMycw==}
     engines: {node: '>=12.0.0'}
@@ -6020,9 +6388,13 @@ packages:
   nwsapi@2.2.23:
     resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==}
 
-  ob1@0.83.3:
-    resolution: {integrity: sha512-egUxXCDwoWG06NGCS5s5AdcpnumHKJlfd3HH06P3m9TEMwwScfcY35wpQxbm9oHof+dM/lVH9Rfyu1elTVelSA==}
-    engines: {node: '>=20.19.4'}
+  ob1@0.84.5:
+    resolution: {integrity: sha512-aH9RkoZc7w/90HBamFxTw8ZLFr05wXS+iOnvmrgo53Ep8Pyrm5FieQSaPIVROkfFVQISeD/zo92fes26TOwe+A==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
+
+  ob1@0.84.6:
+    resolution: {integrity: sha512-+s+6zjd0X68hfAcn92NsEPXnSYOF3O7exw/Fj4UfRTB+UL+Tdjdkzu5/4WquXlzqgvNm8FWuuW6/0Yd8S2rYxw==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
 
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
@@ -6032,10 +6404,6 @@ packages:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
 
-  object-is@1.1.6:
-    resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==}
-    engines: {node: '>= 0.4'}
-
   object-keys@1.1.1:
     resolution: {integrity: sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==}
     engines: {node: '>= 0.4'}
@@ -6256,10 +6624,6 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
-  picomatch@3.0.1:
-    resolution: {integrity: sha512-I3EurrIQMlRc9IaAZnqRR044Phh2DXY+55o7uJ0V+hYZAcQYSuFWsc9q5PvyDHUSCe1Qxn/iBz+78s86zWnGag==}
-    engines: {node: '>=10'}
-
   picomatch@4.0.3:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
@@ -6300,8 +6664,8 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
-  postcss@8.4.49:
-    resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==}
+  postcss@8.5.28:
+    resolution: {integrity: sha512-RRuzqDtt5Y9h3quz5hWhK+TPnsmVs6WwSU6LkJMeY4HstUEDuYTG8UJSdawMRzmzAtV+KEoG8N3Qg2qLy5vM/A==}
     engines: {node: ^10 || ^12 || >=14}
 
   prebuild-install@7.1.3:
@@ -6356,9 +6720,6 @@ packages:
   property-expr@2.0.6:
     resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
 
-  property-information@6.5.0:
-    resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
-
   protobufjs@7.5.4:
     resolution: {integrity: sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==}
     engines: {node: '>=12.0.0'}
@@ -6379,10 +6740,6 @@ packages:
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
-  qrcode-terminal@0.11.0:
-    resolution: {integrity: sha512-Uu7ii+FQy4Qf82G4xu7ShHhjhGahEpCWc3x8UavY3CTcWV+ufmmCtwkr7ZKsX42jdL0kr1B5FKUeqJvAn51jzQ==}
-    hasBin: true
-
   qs@6.14.1:
     resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
     engines: {node: '>=0.6'}
@@ -6390,19 +6747,12 @@ packages:
   quansync@0.2.11:
     resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
 
-  query-string@7.1.3:
-    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
-    engines: {node: '>=6'}
-
   querystringify@2.2.0:
     resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
 
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
-  queue@6.0.2:
-    resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
-
   randexp@0.5.3:
     resolution: {integrity: sha512-U+5l2KrcMNOUPYvazA3h5ekF80FHTUG+87SEAmHZmolh1M+i/WyTCxVzmi+tidIa1tM4BSe8g2Y/D3loWDjj+w==}
     engines: {node: '>=4'}
@@ -6422,10 +6772,10 @@ packages:
   react-devtools-core@6.1.5:
     resolution: {integrity: sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA==}
 
-  react-dom@19.1.0:
-    resolution: {integrity: sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==}
+  react-dom@19.2.3:
+    resolution: {integrity: sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==}
     peerDependencies:
-      react: ^19.1.0
+      react: ^19.2.3
 
   react-freeze@1.0.4:
     resolution: {integrity: sha512-r4F0Sec0BLxWicc7HEyo2x3/2icUTrRmDjaaRyzzn+7aDyFZliszMDOgLVwSnQnYENOlL1o569Ze2HZefk8clA==}
@@ -6448,8 +6798,8 @@ packages:
   react-is@18.3.1:
     resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
 
-  react-is@19.1.0:
-    resolution: {integrity: sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==}
+  react-is@19.3.0:
+    resolution: {integrity: sha512-UpMYezM4v5/18F28aC66AEsjXIgE02kyEMH6yLdgLXu/UTfa1Ntwck/nNLrbqJsEXW7gPb0coNO9FQse9WTovA==}
 
   react-native-a11y-order@0.4.0:
     resolution: {integrity: sha512-qtx+cvHWcCKu2UukjuKLGAwMqTFWQG3LxblR7E2QBOjLlt204kk33vZHotGW+U7jvE+aikL7t/DcNNCwj05Kiw==}
@@ -6484,8 +6834,8 @@ packages:
     peerDependencies:
       react-native: '*'
 
-  react-native-drawer-layout@4.2.5:
-    resolution: {integrity: sha512-Yl82uLkXjXuq7222hWGIDsq5A6R/bsCeCEgdIxQUxAEHf00oRdDnRByLx3Fsij3qwtmYNPGrHV1NH8G8hbCbLQ==}
+  react-native-drawer-layout@4.2.10:
+    resolution: {integrity: sha512-O6TQdZ5LSm3dqnuR4rX9KPtE+9dVg7jsezEYz1l01rkQTe4fQvYZIoPu2sZFl5X2N70uhRdjnPULySVR3sBUwA==}
     peerDependencies:
       react: '>= 18.2.0'
       react-native: '*'
@@ -6501,14 +6851,24 @@ packages:
       prop-types: ^15.5.7
       react-native: '>=0.20.0'
 
+  react-native-enriched-markdown@1.0.2:
+    resolution: {integrity: sha512-zvVM4W1VMV/cYAKUTYoVheadOGHLbny2kALFn0vi5av/WFa0JSYboeeq/vPRqS5dc8qvUTjXwVlrkhrcuinNQA==}
+    peerDependencies:
+      katex: '>=0.16.0'
+      react: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      katex:
+        optional: true
+
   react-native-external-keyboard@0.9.0:
     resolution: {integrity: sha512-W7h37y5R1k7dqNJLszmrwmk3yJmy/26L9AeL8cDhzu1OwvrWE6+XvogcxbaNl2FHIu2ADuTHHvNqSlEki8Ga6A==}
     peerDependencies:
       react: '*'
       react-native: '*'
 
-  react-native-gesture-handler@2.28.0:
-    resolution: {integrity: sha512-0msfJ1vRxXKVgTgvL+1ZOoYw3/0z1R+Ked0+udoJhyplC2jbVKIJ8Z1bzWdpQRCV3QcQ87Op0zJVE5DhKK2A0A==}
+  react-native-gesture-handler@3.3.0:
+    resolution: {integrity: sha512-ZCTlJ09nE3GPbm7J74lvwpxmx1TQ/7MDlHZNLARVYTN82k21mJUJ7BmI9eWjEi8eevHiAudI5O1Cpnt0rJfoJA==}
     peerDependencies:
       react: '*'
       react-native: '*'
@@ -6531,13 +6891,11 @@ packages:
       react: '*'
       react-native: '*'
 
-  react-native-katex@https://codeload.github.com/RocketChat/react-native-katex/tar.gz/37e579804fe238732d8a4b06dec073610ab062b1:
-    resolution: {gitHosted: true, tarball: https://codeload.github.com/RocketChat/react-native-katex/tar.gz/37e579804fe238732d8a4b06dec073610ab062b1}
-    version: 1.3.0
+  react-native-is-edge-to-edge@1.3.1:
+    resolution: {integrity: sha512-NIXU/iT5+ORyCc7p0z2nnlkouYKX425vuU1OEm6bMMtWWR9yvb+Xg5AZmImTKoF9abxCPqrKC3rOZsKzUYgYZA==}
     peerDependencies:
-      react: '>=16'
+      react: '*'
       react-native: '*'
-      react-native-webview: '>=13'
 
   react-native-keyboard-controller@1.18.5:
     resolution: {integrity: sha512-wbYN6Tcu3G5a05dhRYBgjgd74KqoYWuUmroLpigRg9cXy5uYo7prTMIvMgvLtARQtUF7BOtFggUnzgoBOgk0TQ==}
@@ -6550,8 +6908,8 @@ packages:
     resolution: {integrity: sha512-YzPKSAnSzGEJ12IK6CctNLU79T1W15WDrElRQ+1/FsOazGX9ucFPTQwgYe8Dy8jiSEDJKM4wkVa3g4lD2Z+Pnw==}
     engines: {node: '>=16'}
 
-  react-native-linear-gradient@2.6.2:
-    resolution: {integrity: sha512-Z8Xxvupsex+9BBFoSYS87bilNPWcRfRsGC0cpJk72Nxb5p2nEkGSBv73xZbEHnW2mUFvP+huYxrVvjZkr/gRjQ==}
+  react-native-linear-gradient@2.8.3:
+    resolution: {integrity: sha512-KflAXZcEg54PXkLyflaSZQ3PJp4uC4whM7nT/Uot9m0e/qxFV3p6uor1983D1YOBJbJN7rrWdqIjq0T42jOJyA==}
     peerDependencies:
       react: '*'
       react-native: '*'
@@ -6569,22 +6927,16 @@ packages:
       react-native-macos:
         optional: true
 
-  react-native-math-view@3.9.5:
-    resolution: {integrity: sha512-UJxrisNafszfqIW+utoSDylb72SkZ92cKz1IfE5Dm0s+uIaHxOxepF2DdRbktAV8c0FEFllnXfErcGdh8sfIBw==}
-    peerDependencies:
-      react-native: '*'
-      react-native-svg: '*'
-
   react-native-mime-types@2.3.0:
     resolution: {integrity: sha512-9l/kkT1QM0i0xAKkOADkP6jIMhqiS+R/eSKBS/lsUmuMYMqboClyrwTFFZwUcaVIN0SpeH4wOKhYTqCnFgRsEw==}
     engines: {node: '>= 0.6'}
 
-  react-native-mmkv@4.1.2:
-    resolution: {integrity: sha512-6LHb2DQBXuo96Aues13EugmlWw/HAYuh3KoJoQNrC4JsBwn3J3KiRYAg2mCm5Je0VYq2YsmbgZG7XJwX/WFYZA==}
+  react-native-mmkv@4.3.2:
+    resolution: {integrity: sha512-49OAyfkg0/TMWiWELZN6VuVQPZPhizwL4DTmp8b7B1md3dB/s3LH3mGfC3T+lp9W0y/rqxZMEnotLFTIbOAenQ==}
     peerDependencies:
       react: '*'
       react-native: '*'
-      react-native-nitro-modules: '*'
+      react-native-nitro-modules: ^0.37.1
 
   react-native-modal@13.0.1:
     resolution: {integrity: sha512-UB+mjmUtf+miaG/sDhOikRfBOv0gJdBU2ZE1HtFWp6UixW9jCk/bhGdHUgmZljbPpp0RaO/6YiMmQSSK3kkMaw==}
@@ -6592,8 +6944,8 @@ packages:
       react: '*'
       react-native: '>=0.65.0'
 
-  react-native-nitro-modules@0.33.9:
-    resolution: {integrity: sha512-BM9C5mCGYYjrc8CDWZZ0anLWU/knH2xaEuFzvzogKTOW6fzgS6mmsCdM3ty+AhImJNSYwK19DLrHaqwnrrwEzw==}
+  react-native-nitro-modules@0.37.1:
+    resolution: {integrity: sha512-KpW6EQVQ/bfegpCGxN9Be+ndvsfj56t4IESEvCASu9gWpJa/NDfHpIeIwCOvZQ3eXmLEj6YD4wCLqcC1FJPr2w==}
     peerDependencies:
       react: '*'
       react-native: '*'
@@ -6610,25 +6962,30 @@ packages:
     peerDependencies:
       '@react-native-picker/picker': ^2.4.0
 
+  react-native-plain-text@0.8.2:
+    resolution: {integrity: sha512-EpMcQ0+BKfAq/WDL1cgv6YptP6fsvDoLQaQ/UZait1mn9Hp90GzlH6gkYd4stpc4UBhuhyjYki2EU23DBwZ/4A==}
+    peerDependencies:
+      react: '*'
+      react-native: '*'
+
   react-native-popover-view@5.1.7:
     resolution: {integrity: sha512-Xa+zKYp9x62UNezT8o9SnqQaBQEHdGwGHZnFnA2bsXLneVRvvlBopNwMNj+p7N65qnPf3mmzWj+57ThtM1qFuw==}
 
-  react-native-reanimated@4.1.3:
-    resolution: {integrity: sha512-GP8wsi1u3nqvC1fMab/m8gfFwFyldawElCcUSBJQgfrXeLmsPPUOpDw44lbLeCpcwUuLa05WTVePdTEwCLTUZg==}
+  react-native-reanimated@4.6.0:
+    resolution: {integrity: sha512-9vbQmok5BPX2J3RLPFt2UnwmK2QQoMDPDi0VB4a9JWIiEc55pdzvwEsdH91V/JXKNErqM6a9fElTBMc/1cbtBA==}
     peerDependencies:
-      '@babel/core': ^7.0.0-0
       react: '*'
-      react-native: '*'
-      react-native-worklets: '>=0.5.0'
+      react-native: 0.83 - 0.87
+      react-native-worklets: 0.12.x
 
-  react-native-safe-area-context@5.6.2:
-    resolution: {integrity: sha512-4XGqMNj5qjUTYywJqpdWZ9IG8jgkS3h06sfVjfw5yZQZfWnRFXczi0GnYyFyCc2EBps/qFmoCH8fez//WumdVg==}
+  react-native-safe-area-context@5.10.0:
+    resolution: {integrity: sha512-U655+G0KItefqpTKZenr0aBNulY/49TUKSZkWGVtESlFK5qmML7BejQjPDCRU+GzC24g2KeWFJguWP5LR52dqA==}
     peerDependencies:
       react: '*'
       react-native: '*'
 
-  react-native-screens@4.17.1:
-    resolution: {integrity: sha512-hGArs1kzsokvwxq98vluGlprUw3Q95zEjvZ3U2q28FmvLy25e6jxMclEkgxNtJ0GVJ2gWcFRTXON0EIVvUEd+A==}
+  react-native-screens@4.28.0:
+    resolution: {integrity: sha512-0/79Z8RCibuaAHti+DJ2Dq0m6UFWh4+p1bH58K3cjiQ7IDWs5kU9tCAj4lXcJMHHonbF2mIE2BeaPSEvOpIiFg==}
     peerDependencies:
       react: '*'
       react-native: '*'
@@ -6641,8 +6998,8 @@ packages:
       react-native: '>=0.50.1'
       react-native-linear-gradient: ^2.5.6
 
-  react-native-svg@15.12.1:
-    resolution: {integrity: sha512-vCuZJDf8a5aNC2dlMovEv4Z0jjEUET53lm/iILFnFewa15b4atjVxU6Wirm6O9y6dEsdjDZVD7Q3QM4T1wlI8g==}
+  react-native-svg@15.15.4:
+    resolution: {integrity: sha512-boT/vIRgj6zZKBpfTPJJiYWMbZE9duBMOwPK6kCSTgxsS947IFMOq9OgIFkpWZTB7t229H24pDRkh3W9ZK/J1A==}
     peerDependencies:
       react: '*'
       react-native: '*'
@@ -6663,21 +7020,25 @@ packages:
       react: '*'
       react-native: '*'
 
-  react-native-worklets@0.6.1:
-    resolution: {integrity: sha512-URca8l7c7Uog7gv4mcg9KILdJlnbvwdS5yfXQYf5TDkD2W1VY1sduEKrD+sA3lUPXH/TG1vmXAvNxCNwPMYgGg==}
+  react-native-worklets@0.12.2:
+    resolution: {integrity: sha512-TB6Aze0WJg/U0XOu4Zfx/yV8i5i7C/lbMymUXPbq1izDy2nuzZ9ujQAMwAHM2Ygyhzi8sdRk/7FukuTTfuil9A==}
     peerDependencies:
-      '@babel/core': ^7.0.0-0
+      '@babel/core': '*'
+      '@react-native/metro-config': '*'
       react: '*'
-      react-native: '*'
+      react-native: 0.83 - 0.87
 
-  react-native@0.81.5:
-    resolution: {integrity: sha512-1w+/oSjEXZjMqsIvmkCRsOc8UBYv163bTWKTI8+1mxztvQPhCRYGTvZ/PL1w16xXHneIj/SLGfxWg2GWN2uexw==}
-    engines: {node: '>= 20.19.4'}
+  react-native@0.86.3:
+    resolution: {integrity: sha512-JR5s3bM9ezud+Mw24GlNXNfthqPIKwrQgPPJcam+L97t2sKjjEavhCzBn+fyqZZRcM5+XlhYxpTxVkK7e1n38Q==}
+    engines: {node: ^20.19.4 || ^22.13.0 || ^24.3.0 || >= 25.0.0}
     hasBin: true
     peerDependencies:
-      '@types/react': ^19.1.0
-      react: ^19.1.0
+      '@react-native/jest-preset': 0.86.3
+      '@types/react': ^19.1.1
+      react: ^19.2.3
     peerDependenciesMeta:
+      '@react-native/jest-preset':
+        optional: true
       '@types/react':
         optional: true
 
@@ -6706,13 +7067,43 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
-  react-test-renderer@19.1.0:
-    resolution: {integrity: sha512-jXkSl3CpvPYEF+p/eGDLB4sPoDX8pKkYvRl9+rR8HxLY0X04vW7hCm1/0zHoUSjPZ3bDa+wXWNTDVIw/R8aDVw==}
+  react-remove-scroll-bar@2.3.8:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-remove-scroll@2.7.2:
+    resolution: {integrity: sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-style-singleton@2.2.3:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  react-test-renderer@19.2.3:
+    resolution: {integrity: sha512-TMR1LnSFiWZMJkCgNf5ATSvAheTT2NvKIwiVwdBPHxjBI7n/JbWd4gaZ16DVd9foAXdvDz+sB5yxZTwMjPRxpw==}
     peerDependencies:
-      react: ^19.1.0
+      react: ^19.2.3
 
-  react@19.1.0:
-    resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
+  react@19.2.3:
+    resolution: {integrity: sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==}
     engines: {node: '>=0.10.0'}
 
   read-pkg-up@7.0.1:
@@ -6803,10 +7194,6 @@ packages:
   require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
 
-  requireg@0.2.2:
-    resolution: {integrity: sha512-nYzyjnFcPNGR3lx9lwPPPnuQxv6JWEZd2Ci0u9opN7N5zUEPIhY/GbL3vMGOr2UXwEg9WwSyV9X9Y/kLFgPsOg==}
-    engines: {node: '>= 4.0.0'}
-
   requires-port@1.0.0:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
 
@@ -6828,10 +7215,6 @@ packages:
     resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
     engines: {node: '>=8'}
 
-  resolve-global@1.0.0:
-    resolution: {integrity: sha512-zFa12V4OLtT5XUX/Q4VLvTfBf+Ok0SPc1FNGM/z9ctUdiU618qwKpWnd0CHs3+RqROfyEg/DhuHbMWYqcgljEw==}
-    engines: {node: '>=8'}
-
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
@@ -6847,9 +7230,6 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
-  resolve@1.7.1:
-    resolution: {integrity: sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==}
-
   restore-cursor@2.0.0:
     resolution: {integrity: sha512-6IzJLuGi4+R14vwagDHX+JrXmPVtPpn4mffDJ1UdR7/Edm87fl6yi8mMBIVvFtJaNTUvjughmW4hwLhRG7gC1Q==}
     engines: {node: '>=4'}
@@ -6899,6 +7279,11 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sandbox-cli-detector@0.2.0:
+    resolution: {integrity: sha512-4lyHX0ZU0AZKwjgZ1InxZAa3PNpyEb8rOQ+Zss1ReYmhNzW0Q+h1zE5nvniXN0HaAWZaZE1zgVNEirb0R7LmNg==}
+    engines: {node: '>=18.18'}
+    hasBin: true
+
   sax@1.4.3:
     resolution: {integrity: sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==}
 
@@ -6906,8 +7291,8 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.26.0:
-    resolution: {integrity: sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==}
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
   schema-utils@4.3.3:
     resolution: {integrity: sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==}
@@ -6926,11 +7311,6 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.7.2:
-    resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==}
-    engines: {node: '>=10'}
-    hasBin: true
-
   semver@7.7.4:
     resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==}
     engines: {node: '>=10'}
@@ -7076,9 +7456,6 @@ packages:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
 
-  space-separated-tokens@2.0.2:
-    resolution: {integrity: sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==}
-
   spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
 
@@ -7091,14 +7468,6 @@ packages:
   spdx-license-ids@3.0.22:
     resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
 
-  speech-rule-engine@4.1.2:
-    resolution: {integrity: sha512-S6ji+flMEga+1QU79NDbwZ8Ivf0S/MpupQQiIC0rTpU/ZTKgcajijJJb1OcByBQDjrXCN1/DJtGz4ZJeBMPGJw==}
-    hasBin: true
-
-  split-on-first@1.1.0:
-    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
-    engines: {node: '>=6'}
-
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
@@ -7129,8 +7498,10 @@ packages:
     resolution: {integrity: sha512-WjlahMgHmCJpqzU8bIBy4qtsZdU9lRlcZE3Lvyej6t4tuOuv1vk57OW3MBrj6hXBFx/nNoC9MPMTcr5YA7NQbg==}
     engines: {node: '>=6'}
 
-  standard-navigation@0.0.7:
-    resolution: {integrity: sha512-NCGLCNyuXrFOkGHxdNZFnpsehGtiq1oXbPhKl7ZuxFO5J//H2evqqOchmD4YwEUJnkjO4kH9Xp4hQX6hdAYCKQ==}
+  standard-navigation@0.0.8:
+    resolution: {integrity: sha512-TyVbo7INUDWtsUWDFn8RR7kwR87U0S4xHfLfbbnyeC581TmmyqQ+eM+nPw8rQTSD8QitRVcYfPaSHr/QJiUy1g==}
+    peerDependencies:
+      react: '*'
 
   statuses@1.5.0:
     resolution: {integrity: sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==}
@@ -7163,10 +7534,6 @@ packages:
   streamx@2.23.0:
     resolution: {integrity: sha512-kn+e44esVfn2Fa/O0CPFcex27fjIL6MkVae0Mm6q+E6f0hWv578YCERbv+4m02cjxvDsPKLnmxral/rR6lBMAg==}
 
-  strict-uri-encode@2.0.0:
-    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
-    engines: {node: '>=4'}
-
   string-length@4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
     engines: {node: '>=10'}
@@ -7240,11 +7607,6 @@ packages:
   structured-headers@0.4.1:
     resolution: {integrity: sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg==}
 
-  sucrase@3.35.1:
-    resolution: {integrity: sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   superstruct@2.0.2:
     resolution: {integrity: sha512-uV+TFRZdXsqXTL2pRvujROjdZQ4RAlBUS5BTh9IGm+jTqQntYThciG/qu57Gs69yjnVUSqdxF9YLmSnpupBW9A==}
     engines: {node: '>=14.0.0'}
@@ -7276,6 +7638,10 @@ packages:
     resolution: {integrity: sha512-qd/R7n5rQTRFi+Zf2sk5XVVd9UQl6ZkduPFC3S7WEGJAmetDTjY3qPN50eSKzwuzEyQKy5TN2TiZdkIjos2L6A==}
     engines: {node: '>=8.0.0'}
 
+  tagged-tag@1.0.0:
+    resolution: {integrity: sha512-yEFYrVhod+hdNyx7g5Bnkkb0G6si8HJurOoOEgC8B/O0uXLHlaey/65KRv6cuWBNhBgHKAROVpc7QyYqE5gFng==}
+    engines: {node: '>=20'}
+
   tapable@2.3.3:
     resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
     engines: {node: '>=6'}
@@ -7293,15 +7659,6 @@ packages:
   tar-stream@3.1.7:
     resolution: {integrity: sha512-qJj60CXt7IU1Ffyc3NJMjh6EkuCFej46zUqJ4J7pqYlThyd9bO0XBTmcOIhSzZJVWfsLks0+nle/j538YAW9RQ==}
 
-  tar@7.5.2:
-    resolution: {integrity: sha512-7NyxrTE4Anh8km8iEy7o0QYPs+0JKBTj5ZaqHg6B39erLg0qYXN3BijtShwbsNSvQ+LN75+KV+C4QR/f6Gwnpg==}
-    engines: {node: '>=18'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
-
-  temp-dir@2.0.0:
-    resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
-    engines: {node: '>=8'}
-
   terminal-link@2.1.1:
     resolution: {integrity: sha512-un0FmiRUQNr5PJqy9kP7c40F5BOfpGlYTrxonDChEZB7pzZxRNp/bt+ymiy9/npwXya9KH99nJ/GXFIiUkYGFQ==}
     engines: {node: '>=8'}
@@ -7337,13 +7694,6 @@ packages:
   text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   throat@5.0.0:
     resolution: {integrity: sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==}
 
@@ -7397,6 +7747,9 @@ packages:
   toposort@2.0.2:
     resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
 
+  toqr@0.1.1:
+    resolution: {integrity: sha512-FWAPzCIHZHnrE/5/w9MPk0kK25hSQSH2IKhYh9PyjS3SG/+IEMvlwIHbhz+oF7xl54I+ueZlVnMjyzdSwLmAwA==}
+
   tough-cookie@4.1.4:
     resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
     engines: {node: '>=6'}
@@ -7405,9 +7758,6 @@ packages:
     resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
     engines: {node: '>=12'}
 
-  transformation-matrix@2.16.1:
-    resolution: {integrity: sha512-tdtC3wxVEuzU7X/ydL131Q3JU5cPMEn37oqVLITjRDSDsnSHVFzW2JiCLfZLIQEgWzZHdSy3J6bZzvKEN24jGA==}
-
   transliteration@2.3.5:
     resolution: {integrity: sha512-HAGI4Lq4Q9dZ3Utu2phaWgtm3vB6PkLUFqWAScg/UW+1eZ/Tg6Exo4oC0/3VUol/w4BlefLhUUSVBr/9/ZGQOw==}
     engines: {node: '>=6.0.0'}
@@ -7417,9 +7767,6 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
 
@@ -7461,6 +7808,10 @@ packages:
     resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==}
     engines: {node: '>=12.20'}
 
+  type-fest@5.9.0:
+    resolution: {integrity: sha512-yANm3Jr3GiJ1qgJlxGAVxTOIcEOk1rhQHamlXtnrCK7EHP4HeM9OGxtMg/W7HFdrVzw/ZWJKGVIJusVH85sLtw==}
+    engines: {node: '>=20'}
+
   type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -7508,7 +7859,7 @@ packages:
     resolution: {integrity: sha512-eLIKd0KHZtSvbsA+FYwX+Y0ZBt0BwVGz3GgODQX+6GfGL4DOzKW02LEx62oUZg6vCQX1BL5xyiPXAIdW+Hc51g==}
     hasBin: true
     peerDependencies:
-      typescript: '>=4.8.0 <5.10.0'
+      typescript: 7.0.2
 
   typical@4.0.0:
     resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
@@ -7529,8 +7880,8 @@ packages:
   undici-types@7.16.0:
     resolution: {integrity: sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==}
 
-  undici@6.22.0:
-    resolution: {integrity: sha512-hU/10obOIu62MGYjdskASR3CUAiYaFTtC9Pa6vHyf//mAipSvSQg6od2CnJswq7fvzNS3zJhxoRkgNVaHurWKw==}
+  undici@6.29.0:
+    resolution: {integrity: sha512-R+RODBqp6i2pPflGdq+xIOUkl+RNfGgHwoinecKu/JCuf2uO06cOKoDbI2P7Dn6KcswdKwrczbU6IYJ6K8X+wg==}
     engines: {node: '>=18.17'}
 
   unicode-canonical-property-names-ecmascript@2.0.1:
@@ -7549,10 +7900,6 @@ packages:
     resolution: {integrity: sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==}
     engines: {node: '>=4'}
 
-  unique-string@2.0.0:
-    resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
-    engines: {node: '>=8'}
-
   universal-websocket-client@1.0.3:
     resolution: {integrity: sha512-ZQF2hSasp4IM7Y3E+IAkA40c6kclsfhpligALvnuecEnU1dTJQZ5XlgXWLt3C8+uizDw5x48kCMBDPnLg/EVzA==}
 
@@ -7587,6 +7934,16 @@ packages:
   url-parse@1.5.10:
     resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
 
+  use-callback-ref@1.3.3:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-debounce@9.0.4:
     resolution: {integrity: sha512-6X8H/mikbrt0XE8e+JXRtZ8yYVvKkdYRfmIhWZYsP8rcNs9hk3APV8Ua2mFkKRLcJKVdnX2/Vwrmg2GWKUQEaQ==}
     engines: {node: '>= 10.0.0'}
@@ -7604,6 +7961,16 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
+  use-sidecar@1.1.3:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   use-sync-external-store@1.6.0:
     resolution: {integrity: sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==}
     peerDependencies:
@@ -7639,6 +8006,12 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
+  vaul@1.1.2:
+    resolution: {integrity: sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc
+
   vlq@1.0.1:
     resolution: {integrity: sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==}
 
@@ -7704,6 +8077,9 @@ packages:
     resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
     engines: {node: '>=12'}
 
+  whatwg-url-minimum@0.1.2:
+    resolution: {integrity: sha512-XPEm0XFQWNVG292lII1PrRRJl3sItrs7CettZ4ncYxuDVpLyy+NwlGyut2hXI0JswcJUxeCH+CyOJK0ZzAXD6A==}
+
   whatwg-url-without-unicode@8.0.0-3:
     resolution: {integrity: sha512-HoKuzZrUlgpz35YO27XgD28uh/WJH4B0+3ttFqRo//lmq+9T/mIOJ6kqmINI9HpUpz1imRC/nR/lxKpJiv0uig==}
     engines: {node: '>=10'}
@@ -7736,12 +8112,6 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
-  wicked-good-xpath@1.3.0:
-    resolution: {integrity: sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw==}
-
-  wonka@6.3.5:
-    resolution: {integrity: sha512-SSil+ecw6B4/Dm7Pf2sAshKQ5hWFvfyGlfPbEd6A14dOH6VDjrmbY86u6nZvy9omGwwIPFR8V41+of1EezgoUw==}
-
   word-wrap@1.2.5:
     resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
     engines: {node: '>=0.10.0'}
@@ -7851,10 +8221,6 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
-  yallist@5.0.0:
-    resolution: {integrity: sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==}
-    engines: {node: '>=18'}
-
   yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
@@ -7892,6 +8258,9 @@ packages:
     resolution: {integrity: sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==}
     engines: {node: '>=10'}
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
   zustand@5.0.12:
     resolution: {integrity: sha512-i77ae3aZq4dhMlRhJVCYgMLKuSiZAaUPAct2AksxQ+gOtimhGMdXljRT21P5BNpeT4kXlLIckvkPM029OljD7g==}
     engines: {node: '>=12.20.0'}
@@ -7910,9 +8279,12 @@ packages:
       use-sync-external-store:
         optional: true
 
-snapshots:
+  zxing-wasm@3.1.3:
+    resolution: {integrity: sha512-3lC9BJk4fR5ZJxcGjb0hVnDFOW7KpLXHIebiBmVd4FDRQZVeObztoTKxRUPxlWwSgxrMRONK0u50hBD1aTYEKg==}
+    peerDependencies:
+      '@types/emscripten': '>=1.39.6'
 
-  '@0no-co/graphql.web@1.2.0': {}
+snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
@@ -7931,8 +8303,16 @@ snapshots:
       js-tokens: 4.0.0
       picocolors: 1.1.1
 
+  '@babel/code-frame@7.29.7':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.29.7
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
   '@babel/compat-data@7.29.0': {}
 
+  '@babel/compat-data@7.29.7': {}
+
   '@babel/core@7.25.9':
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -7953,6 +8333,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/core@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-compilation-targets': 7.29.7
+      '@babel/helper-module-transforms': 7.29.7(@babel/core@7.29.7)
+      '@babel/helpers': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/generator@7.29.1':
     dependencies:
       '@babel/parser': 7.29.2
@@ -7961,10 +8361,22 @@ snapshots:
       '@jridgewell/trace-mapping': 0.3.31
       jsesc: 3.1.0
 
+  '@babel/generator@7.29.8':
+    dependencies:
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.1.0
+
   '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
       '@babel/types': 7.29.0
 
+  '@babel/helper-annotate-as-pure@7.29.7':
+    dependencies:
+      '@babel/types': 7.29.8
+
   '@babel/helper-compilation-targets@7.28.6':
     dependencies:
       '@babel/compat-data': 7.29.0
@@ -7973,29 +8385,37 @@ snapshots:
       lru-cache: 5.1.1
       semver: 6.3.1
 
-  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.25.9)':
+  '@babel/helper-compilation-targets@7.29.7':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/compat-data': 7.29.7
+      '@babel/helper-validator-option': 7.29.7
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.25.9)
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
       '@babel/traverse': 7.29.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.25.9)':
+  '@babel/helper-create-regexp-features-plugin@7.28.5(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-annotate-as-pure': 7.27.3
       regexpu-core: 6.4.0
       semver: 6.3.1
 
-  '@babel/helper-define-polyfill-provider@0.6.6(@babel/core@7.25.9)':
+  '@babel/helper-define-polyfill-provider@0.6.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-compilation-targets': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
       debug: 4.4.3
@@ -8006,6 +8426,8 @@ snapshots:
 
   '@babel/helper-globals@7.28.0': {}
 
+  '@babel/helper-globals@7.29.7': {}
+
   '@babel/helper-member-expression-to-functions@7.28.5':
     dependencies:
       '@babel/traverse': 7.29.0
@@ -8020,6 +8442,13 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/helper-module-imports@7.29.7':
+    dependencies:
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/helper-module-transforms@7.28.6(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
@@ -8029,24 +8458,44 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-optimise-call-expression@7.27.1':
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.29.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+      '@babel/traverse': 7.29.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
     dependencies:
       '@babel/types': 7.29.0
 
   '@babel/helper-plugin-utils@7.28.6': {}
 
-  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.25.9)':
+  '@babel/helper-plugin-utils@7.29.7': {}
+
+  '@babel/helper-remap-async-to-generator@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-wrap-function': 7.28.6
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/helper-replace-supers@7.28.6(@babel/core@7.25.9)':
+  '@babel/helper-replace-supers@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-member-expression-to-functions': 7.28.5
       '@babel/helper-optimise-call-expression': 7.27.1
       '@babel/traverse': 7.29.0
@@ -8062,10 +8511,16 @@ snapshots:
 
   '@babel/helper-string-parser@7.27.1': {}
 
+  '@babel/helper-string-parser@7.29.7': {}
+
   '@babel/helper-validator-identifier@7.28.5': {}
 
+  '@babel/helper-validator-identifier@7.29.7': {}
+
   '@babel/helper-validator-option@7.27.1': {}
 
+  '@babel/helper-validator-option@7.29.7': {}
+
   '@babel/helper-wrap-function@7.28.6':
     dependencies:
       '@babel/template': 7.28.6
@@ -8079,6 +8534,11 @@ snapshots:
       '@babel/template': 7.28.6
       '@babel/types': 7.29.0
 
+  '@babel/helpers@7.29.7':
+    dependencies:
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
+
   '@babel/highlight@7.25.9':
     dependencies:
       '@babel/helper-validator-identifier': 7.28.5
@@ -8090,102 +8550,126 @@ snapshots:
     dependencies:
       '@babel/types': 7.29.0
 
-  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.25.9)':
+  '@babel/parser@7.29.8':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/types': 7.29.8
+
+  '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.25.9(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-bugfix-safari-class-field-initializer-scope@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.25.9)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-decorators@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-proposal-decorators@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.25.9)
+      '@babel/plugin-syntax-decorators': 7.28.6(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-proposal-export-default-from@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-proposal-export-default-from@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.9)':
+  '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
 
   '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-decorators@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-decorators@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-export-default-from@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-export-default-from@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-import-assertions@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-flow@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-syntax-import-assertions@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
   '@babel/plugin-syntax-import-attributes@7.28.6(@babel/core@7.25.9)':
@@ -8193,226 +8677,291 @@ snapshots:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-import-attributes@7.28.6(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-jsx@7.27.1(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-jsx@7.29.7(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+
   '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
+  '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.25.9)':
     dependencies:
       '@babel/core': 7.25.9
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-async-generator-functions@7.29.0(@babel/core@7.25.9)':
+  '@babel/plugin-transform-arrow-functions@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.25.9)
+
+  '@babel/plugin-transform-async-generator-functions@7.29.0(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.29.7)
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-async-to-generator@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-async-to-generator@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-module-imports': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.25.9)
+      '@babel/helper-remap-async-to-generator': 7.27.1(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-block-scoped-functions@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-block-scoping@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-block-scoping@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-class-properties@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-class-properties@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-class-static-block@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-class-static-block@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-classes@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-classes@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-annotate-as-pure': 7.27.3
       '@babel/helper-compilation-targets': 7.28.6
       '@babel/helper-globals': 7.28.0
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.25.9)
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.7)
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-computed-properties@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-computed-properties@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/template': 7.28.6
 
-  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.25.9)':
+  '@babel/plugin-transform-destructuring@7.28.5(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-dotall-regex@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-dotall-regex@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-duplicate-keys@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-duplicate-keys@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-duplicate-named-capturing-groups-regex@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-dynamic-import@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-dynamic-import@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-exponentiation-operator@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-exponentiation-operator@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-export-namespace-from@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-export-namespace-from@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-flow-strip-types@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.25.9)
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.29.7)
 
-  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-for-of@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-function-name@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-compilation-targets': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-json-strings@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-json-strings@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-literals@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-literals@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-logical-assignment-operators@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-logical-assignment-operators@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-member-expression-literals@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-modules-amd@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
     transitivePeerDependencies:
       - supports-color
@@ -8425,328 +8974,324 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-systemjs@7.29.0(@babel/core@7.25.9)':
+  '@babel/plugin-transform-modules-commonjs@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.7)
+      '@babel/helper-plugin-utils': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-modules-systemjs@7.29.0(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-validator-identifier': 7.28.5
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-modules-umd@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-named-capturing-groups-regex@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-new-target@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-nullish-coalescing-operator@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-nullish-coalescing-operator@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-numeric-separator@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-numeric-separator@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-object-rest-spread@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-object-rest-spread@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-compilation-targets': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.25.9)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.25.9)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.7)
       '@babel/traverse': 7.29.0
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-object-super@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.25.9)
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-optional-catch-binding@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-optional-catch-binding@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-optional-chaining@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-optional-chaining@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.25.9)':
+  '@babel/plugin-transform-parameters@7.27.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-private-methods@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-private-methods@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-private-property-in-object@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-private-property-in-object@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.25.9)
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-property-literals@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-property-literals@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.25.9)':
+  '@babel/plugin-transform-react-display-name@7.28.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-react-jsx-development@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-react-jsx@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-react-jsx@7.29.7(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.25.9)
-      '@babel/types': 7.29.0
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/types': 7.29.8
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-react-pure-annotations@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7
+      '@babel/helper-annotate-as-pure': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
 
-  '@babel/plugin-transform-regenerator@7.29.0(@babel/core@7.25.9)':
+  '@babel/plugin-transform-regenerator@7.29.0(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-reserved-words@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-reserved-words@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-runtime@7.28.5(@babel/core@7.25.9)':
+  '@babel/plugin-transform-runtime@7.28.5(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-module-imports': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
-      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.25.9)
-      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.25.9)
-      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.25.9)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs3: 0.13.0(@babel/core@7.29.7)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.29.7)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-shorthand-properties@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-spread@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-spread@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-sticky-regex@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-sticky-regex@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-template-literals@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-typeof-symbol@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.25.9)':
+  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-annotate-as-pure': 7.27.3
-      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.25.9)
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
-      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.25.9)
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/plugin-transform-unicode-escapes@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-unicode-escapes@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-unicode-property-regex@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-unicode-property-regex@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.25.9)':
+  '@babel/plugin-transform-unicode-regex@7.27.1(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/plugin-transform-unicode-sets-regex@7.25.9(@babel/core@7.25.9)':
+  '@babel/plugin-transform-unicode-sets-regex@7.25.9(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-create-regexp-features-plugin': 7.28.5(@babel/core@7.29.7)
       '@babel/helper-plugin-utils': 7.28.6
 
-  '@babel/preset-env@7.25.9(@babel/core@7.25.9)':
+  '@babel/preset-env@7.25.9(@babel/core@7.29.7)':
     dependencies:
       '@babel/compat-data': 7.29.0
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-compilation-targets': 7.28.6
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.25.9)
-      '@babel/plugin-syntax-import-assertions': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-async-generator-functions': 7.29.0(@babel/core@7.25.9)
-      '@babel/plugin-transform-async-to-generator': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-class-static-block': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.25.9)
-      '@babel/plugin-transform-dotall-regex': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-duplicate-keys': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-dynamic-import': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-exponentiation-operator': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-json-strings': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-logical-assignment-operators': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-systemjs': 7.29.0(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-optional-catch-binding': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.25.9)
-      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-property-literals': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-regenerator': 7.29.0(@babel/core@7.25.9)
-      '@babel/plugin-transform-reserved-words': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-unicode-escapes': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-unicode-property-regex': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-unicode-sets-regex': 7.25.9(@babel/core@7.25.9)
-      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.25.9)
-      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.25.9)
-      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.25.9)
-      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.25.9)
+      '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-class-field-initializer-scope': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-assertions': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-generator-functions': 7.29.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-to-generator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoped-functions': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-static-block': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-dotall-regex': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-keys': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-duplicate-named-capturing-groups-regex': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-dynamic-import': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-exponentiation-operator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-json-strings': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-member-expression-literals': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-amd': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-systemjs': 7.29.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-umd': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-new-target': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-object-super': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-catch-binding': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-property-literals': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-regenerator': 7.29.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-reserved-words': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-typeof-symbol': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-escapes': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-property-regex': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-sets-regex': 7.25.9(@babel/core@7.29.7)
+      '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs2: 0.4.14(@babel/core@7.29.7)
+      babel-plugin-polyfill-corejs3: 0.10.6(@babel/core@7.29.7)
+      babel-plugin-polyfill-regenerator: 0.6.5(@babel/core@7.29.7)
       core-js-compat: 3.48.0
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.25.9)':
+  '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
       '@babel/helper-plugin-utils': 7.28.6
       '@babel/types': 7.29.0
       esutils: 2.0.3
 
-  '@babel/preset-react@7.28.5(@babel/core@7.25.9)':
+  '@babel/preset-typescript@7.28.5(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/core': 7.29.7
+      '@babel/helper-plugin-utils': 7.29.7
       '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.25.9)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-react-pure-annotations': 7.27.1(@babel/core@7.25.9)
-    transitivePeerDependencies:
-      - supports-color
-
-  '@babel/preset-typescript@7.28.5(@babel/core@7.25.9)':
-    dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-plugin-utils': 7.28.6
-      '@babel/helper-validator-option': 7.27.1
-      '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.25.9)
+      '@babel/plugin-syntax-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
@@ -8770,6 +9315,12 @@ snapshots:
       '@babel/parser': 7.29.2
       '@babel/types': 7.29.0
 
+  '@babel/template@7.29.7':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/types': 7.29.8
+
   '@babel/traverse@7.29.0':
     dependencies:
       '@babel/code-frame': 7.29.0
@@ -8782,15 +9333,33 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/traverse@7.29.8':
+    dependencies:
+      '@babel/code-frame': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/helper-globals': 7.29.7
+      '@babel/parser': 7.29.8
+      '@babel/template': 7.29.7
+      '@babel/types': 7.29.8
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@babel/types@7.29.0':
     dependencies:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
+  '@babel/types@7.29.8':
+    dependencies:
+      '@babel/helper-string-parser': 7.29.7
+      '@babel/helper-validator-identifier': 7.29.7
+
   '@bcoe/v8-coverage@0.2.3': {}
 
-  '@bugsnag/cli@3.5.1':
+  '@bugsnag/cli@3.10.6':
     dependencies:
+      undici: 6.29.0
       yaml: 2.8.2
 
   '@bugsnag/core@8.6.0':
@@ -8870,10 +9439,6 @@ snapshots:
       glob: 7.2.3
       read-pkg-up: 7.0.1
 
-  '@egjs/hammerjs@2.0.17':
-    dependencies:
-      '@types/hammerjs': 2.0.46
-
   '@emnapi/core@1.8.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -8991,32 +9556,34 @@ snapshots:
 
   '@eslint/js@8.57.1': {}
 
-  '@expo/cli@54.0.20(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))':
+  '@expo/cli@57.0.25(@expo/dom-webview@57.0.1)(expo-constants@57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo-font@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(expo@57.0.23)(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2)':
     dependencies:
-      '@0no-co/graphql.web': 1.2.0
-      '@expo/code-signing-certificates': 0.0.5
-      '@expo/config': 12.0.13
-      '@expo/config-plugins': 54.0.4
+      '@expo/code-signing-certificates': 0.0.6
+      '@expo/config': 57.0.9(typescript@7.0.2)
+      '@expo/config-plugins': 57.0.9(typescript@7.0.2)
       '@expo/devcert': 1.2.1
-      '@expo/env': 2.0.8
-      '@expo/image-utils': 0.8.8
-      '@expo/json-file': 10.0.8
-      '@expo/metro': 54.2.0
-      '@expo/metro-config': 54.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
-      '@expo/osascript': 2.3.8
-      '@expo/package-manager': 1.9.9
-      '@expo/plist': 0.4.8
-      '@expo/prebuild-config': 54.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
-      '@expo/schema-utils': 0.1.8
-      '@expo/spawn-async': 1.7.2
-      '@expo/ws-tunnel': 1.0.6
-      '@expo/xcpretty': 4.3.2
-      '@react-native/dev-middleware': 0.81.5
-      '@urql/core': 5.2.0
-      '@urql/exchange-retry': 1.3.2(@urql/core@5.2.0)
+      '@expo/env': 2.4.3
+      '@expo/image-utils': 0.11.5(typescript@7.0.2)
+      '@expo/inline-modules': 0.1.7(typescript@7.0.2)
+      '@expo/json-file': 11.0.1
+      '@expo/log-box': 57.0.4(@expo/dom-webview@57.0.1)(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      '@expo/metro': 56.0.2
+      '@expo/metro-config': 57.0.12(expo@57.0.23)(typescript@7.0.2)
+      '@expo/metro-file-map': 57.0.3
+      '@expo/osascript': 2.7.1
+      '@expo/package-manager': 1.13.1
+      '@expo/plist': 0.8.1
+      '@expo/prebuild-config': 57.0.16(typescript@7.0.2)
+      '@expo/require-utils': 57.0.5(typescript@7.0.2)
+      '@expo/router-server': 57.0.10(expo-constants@57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo-font@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(expo-server@57.0.3)(expo@57.0.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@expo/schema-utils': 57.0.2
+      '@expo/spawn-async': 1.8.0
+      '@expo/ws-tunnel': 2.0.0(ws@8.18.3)
+      '@expo/xcpretty': 4.4.5
+      '@react-native/dev-middleware': 0.86.3
       accepts: 1.3.8
+      agent-cli-detector: 0.1.7
       arg: 5.0.2
-      better-opn: 3.0.2
       bplist-creator: 0.1.0
       bplist-parser: 0.3.2
       chalk: 4.1.2
@@ -9024,51 +9591,51 @@ snapshots:
       compression: 1.8.1
       connect: 3.7.0
       debug: 4.4.3
-      env-editor: 0.4.2
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      expo-server: 1.0.5
-      freeport-async: 2.0.0
+      dnssd-advertise: 1.1.6
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      expo-server: 57.0.3
+      fetch-nodeshim: 0.4.10
       getenv: 2.0.0
       glob: 13.0.0
-      lan-network: 0.1.7
-      minimatch: 9.0.5
+      lan-network: 0.2.1
+      multitars: 1.0.2
       node-forge: 1.3.3
       npm-package-arg: 11.0.3
       ora: 3.4.0
-      picomatch: 3.0.1
-      pretty-bytes: 5.6.0
+      picomatch: 4.0.5
       pretty-format: 29.7.0
       progress: 2.0.3
       prompts: 2.4.2
-      qrcode-terminal: 0.11.0
-      require-from-string: 2.0.2
-      requireg: 0.2.2
-      resolve: 1.22.11
       resolve-from: 5.0.0
-      resolve.exports: 2.0.3
+      sandbox-cli-detector: 0.2.0
       semver: 7.7.4
       send: 0.19.2
       slugify: 1.6.6
-      source-map-support: 0.5.21
       stacktrace-parser: 0.1.11
       structured-headers: 0.4.1
-      tar: 7.5.2
       terminal-link: 2.1.1
-      undici: 6.22.0
+      toqr: 0.1.1
       wrap-ansi: 7.0.0
       ws: 8.18.3
+      zod: 3.25.76
     optionalDependencies:
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     transitivePeerDependencies:
+      - '@expo/dom-webview'
+      - '@expo/metro-runtime'
       - bufferutil
-      - graphql
+      - expo-constants
+      - expo-font
+      - react
+      - react-dom
+      - react-server-dom-webpack
       - supports-color
+      - typescript
       - utf-8-validate
 
-  '@expo/code-signing-certificates@0.0.5':
+  '@expo/code-signing-certificates@0.0.6':
     dependencies:
       node-forge: 1.3.3
-      nullthrows: 1.1.1
 
   '@expo/config-plugins@10.1.2':
     dependencies:
@@ -9089,46 +9656,44 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@expo/config-plugins@54.0.4':
+  '@expo/config-plugins@57.0.9(typescript@7.0.2)':
     dependencies:
-      '@expo/config-types': 54.0.10
-      '@expo/json-file': 10.0.8
-      '@expo/plist': 0.4.8
+      '@expo/config-types': 57.0.2
+      '@expo/json-file': 11.0.1
+      '@expo/plist': 0.8.1
+      '@expo/require-utils': 57.0.5(typescript@7.0.2)
       '@expo/sdk-runtime-versions': 1.0.0
       chalk: 4.1.2
       debug: 4.4.3
       getenv: 2.0.0
       glob: 13.0.0
-      resolve-from: 5.0.0
       semver: 7.7.4
-      slash: 3.0.0
       slugify: 1.6.6
       xcode: 3.0.1
       xml2js: 0.6.0
     transitivePeerDependencies:
       - supports-color
+      - typescript
 
   '@expo/config-types@53.0.5': {}
 
-  '@expo/config-types@54.0.10': {}
+  '@expo/config-types@57.0.2': {}
 
-  '@expo/config@12.0.13':
+  '@expo/config@57.0.9(typescript@7.0.2)':
     dependencies:
-      '@babel/code-frame': 7.10.4
-      '@expo/config-plugins': 54.0.4
-      '@expo/config-types': 54.0.10
-      '@expo/json-file': 10.0.8
+      '@expo/config-plugins': 57.0.9(typescript@7.0.2)
+      '@expo/config-types': 57.0.2
+      '@expo/json-file': 11.0.1
+      '@expo/require-utils': 57.0.5(typescript@7.0.2)
       deepmerge: 4.3.1
       getenv: 2.0.0
       glob: 13.0.0
-      require-from-string: 2.0.2
-      resolve-from: 5.0.0
       resolve-workspace-root: 2.0.0
       semver: 7.7.4
       slugify: 1.6.6
-      sucrase: 3.35.1
     transitivePeerDependencies:
       - supports-color
+      - typescript
 
   '@expo/devcert@1.2.1':
     dependencies:
@@ -9137,55 +9702,68 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@expo/devtools@0.1.8(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@expo/devtools@57.0.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
       chalk: 4.1.2
     optionalDependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+
+  '@expo/dom-webview@57.0.1(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@expo/env@2.0.8':
+  '@expo/env@2.4.3':
     dependencies:
       chalk: 4.1.2
       debug: 4.4.3
-      dotenv: 16.4.7
-      dotenv-expand: 11.0.7
       getenv: 2.0.0
     transitivePeerDependencies:
       - supports-color
 
-  '@expo/fingerprint@0.15.4':
+  '@expo/expo-modules-macros-plugin@0.6.1': {}
+
+  '@expo/fingerprint@0.20.13':
     dependencies:
-      '@expo/spawn-async': 1.7.2
+      '@expo/env': 2.4.3
+      '@expo/spawn-async': 1.8.0
       arg: 5.0.2
       chalk: 4.1.2
       debug: 4.4.3
       getenv: 2.0.0
       glob: 13.0.0
       ignore: 5.3.2
-      minimatch: 9.0.5
-      p-limit: 3.1.0
+      minimatch: 10.2.6
       resolve-from: 5.0.0
       semver: 7.7.4
     transitivePeerDependencies:
       - supports-color
 
-  '@expo/image-utils@0.8.8':
+  '@expo/image-utils@0.11.5(typescript@7.0.2)':
     dependencies:
-      '@expo/spawn-async': 1.7.2
+      '@expo/require-utils': 57.0.5(typescript@7.0.2)
+      '@expo/spawn-async': 1.8.0
       chalk: 4.1.2
       getenv: 2.0.0
       jimp-compact: 0.16.1
       parse-png: 2.1.0
-      resolve-from: 5.0.0
-      resolve-global: 1.0.0
       semver: 7.7.4
-      temp-dir: 2.0.0
-      unique-string: 2.0.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
 
-  '@expo/json-file@10.0.8':
+  '@expo/inline-modules@0.1.7(typescript@7.0.2)':
     dependencies:
-      '@babel/code-frame': 7.10.4
+      '@expo/config-plugins': 57.0.9(typescript@7.0.2)
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@expo/json-file@11.0.1':
+    dependencies:
+      '@babel/code-frame': 7.29.0
       json5: 2.2.3
 
   '@expo/json-file@9.1.5':
@@ -9193,66 +9771,96 @@ snapshots:
       '@babel/code-frame': 7.10.4
       json5: 2.2.3
 
-  '@expo/metro-config@54.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))':
+  '@expo/local-build-cache-provider@57.0.8(typescript@7.0.2)':
+    dependencies:
+      '@expo/config': 57.0.9(typescript@7.0.2)
+      chalk: 4.1.2
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@expo/log-box@57.0.4(@expo/dom-webview@57.0.1)(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@expo/dom-webview': 57.0.1(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      anser: 1.4.10
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      stacktrace-parser: 0.1.11
+
+  '@expo/metro-config@57.0.12(expo@57.0.23)(typescript@7.0.2)':
     dependencies:
       '@babel/code-frame': 7.29.0
       '@babel/core': 7.25.9
       '@babel/generator': 7.29.1
-      '@expo/config': 12.0.13
-      '@expo/env': 2.0.8
-      '@expo/json-file': 10.0.8
-      '@expo/metro': 54.2.0
-      '@expo/spawn-async': 1.7.2
+      '@expo/config': 57.0.9(typescript@7.0.2)
+      '@expo/env': 2.4.3
+      '@expo/json-file': 11.0.1
+      '@expo/metro': 56.0.2
+      '@expo/require-utils': 57.0.5(typescript@7.0.2)
+      '@expo/spawn-async': 1.8.0
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/remapping': 2.3.5
+      '@jridgewell/sourcemap-codec': 1.5.5
       browserslist: 4.28.1
       chalk: 4.1.2
       debug: 4.4.3
-      dotenv: 16.4.7
-      dotenv-expand: 11.0.7
       getenv: 2.0.0
       glob: 13.0.0
-      hermes-parser: 0.29.1
+      hermes-parser: 0.36.1
       jsc-safe-url: 0.2.4
       lightningcss: 1.30.2
-      minimatch: 9.0.5
-      postcss: 8.4.49
+      picomatch: 4.0.5
+      postcss: 8.5.28
       resolve-from: 5.0.0
     optionalDependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
+      - typescript
       - utf-8-validate
 
-  '@expo/metro@54.2.0':
-    dependencies:
-      metro: 0.83.3
-      metro-babel-transformer: 0.83.3
-      metro-cache: 0.83.3
-      metro-cache-key: 0.83.3
-      metro-config: 0.83.3
-      metro-core: 0.83.3
-      metro-file-map: 0.83.3
-      metro-minify-terser: 0.83.3
-      metro-resolver: 0.83.3
-      metro-runtime: 0.83.3
-      metro-source-map: 0.83.3
-      metro-symbolicate: 0.83.3
-      metro-transform-plugins: 0.83.3
-      metro-transform-worker: 0.83.3
+  '@expo/metro-file-map@57.0.3':
+    dependencies:
+      debug: 4.4.3
+      fb-watchman: 2.0.2
+      invariant: 2.2.4
+      jest-worker: 29.7.0
+      micromatch: 4.0.8
+      walker: 1.0.8
+    transitivePeerDependencies:
+      - supports-color
+
+  '@expo/metro@56.0.2':
+    dependencies:
+      metro: 0.84.5
+      metro-babel-transformer: 0.84.5
+      metro-cache: 0.84.5
+      metro-cache-key: 0.84.5
+      metro-config: 0.84.5
+      metro-core: 0.84.5
+      metro-file-map: 0.84.5
+      metro-minify-terser: 0.84.5
+      metro-resolver: 0.84.5
+      metro-runtime: 0.84.5
+      metro-source-map: 0.84.5
+      metro-symbolicate: 0.84.5
+      metro-transform-plugins: 0.84.5
+      metro-transform-worker: 0.84.5
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  '@expo/osascript@2.3.8':
+  '@expo/osascript@2.7.1':
     dependencies:
-      '@expo/spawn-async': 1.7.2
-      exec-async: 2.2.0
+      '@expo/spawn-async': 1.8.0
 
-  '@expo/package-manager@1.9.9':
+  '@expo/package-manager@1.13.1':
     dependencies:
-      '@expo/json-file': 10.0.8
-      '@expo/spawn-async': 1.7.2
+      '@expo/json-file': 11.0.1
+      '@expo/spawn-async': 1.8.0
       chalk: 4.1.2
       npm-package-arg: 11.0.3
       ora: 3.4.0
@@ -9264,51 +9872,90 @@ snapshots:
       base64-js: 1.5.1
       xmlbuilder: 15.1.1
 
-  '@expo/plist@0.4.8':
+  '@expo/plist@0.8.1':
     dependencies:
       '@xmldom/xmldom': 0.8.11
       base64-js: 1.5.1
       xmlbuilder: 15.1.1
 
-  '@expo/prebuild-config@54.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))':
+  '@expo/prebuild-config@57.0.16(typescript@7.0.2)':
     dependencies:
-      '@expo/config': 12.0.13
-      '@expo/config-plugins': 54.0.4
-      '@expo/config-types': 54.0.10
-      '@expo/image-utils': 0.8.8
-      '@expo/json-file': 10.0.8
-      '@react-native/normalize-colors': 0.81.5
+      '@expo/config': 57.0.9(typescript@7.0.2)
+      '@expo/config-plugins': 57.0.9(typescript@7.0.2)
+      '@expo/config-types': 57.0.2
+      '@expo/image-utils': 0.11.5(typescript@7.0.2)
+      '@expo/json-file': 11.0.1
+      '@react-native/normalize-colors': 0.86.3
       debug: 4.4.3
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo-modules-autolinking: 57.0.13(typescript@7.0.2)
       resolve-from: 5.0.0
       semver: 7.7.4
-      xml2js: 0.6.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@expo/require-utils@57.0.5(typescript@7.0.2)':
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/core': 7.25.9
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.25.9)
+    optionalDependencies:
+      typescript: 7.0.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@expo/router-server@57.0.10(expo-constants@57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo-font@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(expo-server@57.0.3)(expo@57.0.23)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      debug: 4.4.3
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      expo-constants: 57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
+      expo-font: 57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      expo-server: 57.0.3
+      react: 19.2.3
+    optionalDependencies:
+      react-dom: 19.2.3(react@19.2.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@expo/schema-utils@0.1.8': {}
+  '@expo/schema-utils@57.0.2': {}
 
   '@expo/sdk-runtime-versions@1.0.0': {}
 
-  '@expo/spawn-async@1.7.2':
+  '@expo/spawn-async@1.8.0':
     dependencies:
       cross-spawn: 7.0.6
 
   '@expo/sudo-prompt@9.3.2': {}
 
-  '@expo/vector-icons@15.0.3(expo-font@14.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@expo/ui@57.0.19(@babel/core@7.29.7)(@types/react@19.2.18)(expo@57.0.23)(react-dom@19.2.3(react@19.2.3))(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      expo-font: 14.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      sf-symbols-typescript: 2.2.0
+      vaul: 1.1.2(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    optionalDependencies:
+      '@babel/core': 7.29.7
+      react-dom: 19.2.3(react@19.2.3)
+      react-native-worklets: 0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
 
-  '@expo/ws-tunnel@1.0.6': {}
+  '@expo/vector-icons@15.0.3(expo-font@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      expo-font: 57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@expo/xcpretty@4.3.2':
+  '@expo/ws-tunnel@2.0.0(ws@8.18.3)':
     dependencies:
-      '@babel/code-frame': 7.10.4
+      ws: 8.18.3
+
+  '@expo/xcpretty@4.4.5':
+    dependencies:
+      '@babel/code-frame': 7.29.0
       chalk: 4.1.2
-      find-up: 5.0.0
       js-yaml: 4.1.1
 
   '@firebase/analytics-compat@0.2.17(@firebase/app-compat@0.2.50)(@firebase/app@0.11.1)':
@@ -9375,10 +10022,10 @@ snapshots:
       idb: 7.1.1
       tslib: 2.8.1
 
-  '@firebase/auth-compat@0.5.18(@firebase/app-compat@0.2.50)(@firebase/app-types@0.9.3)(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))':
+  '@firebase/auth-compat@0.5.18(@firebase/app-compat@0.2.50)(@firebase/app-types@0.9.3)(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))':
     dependencies:
       '@firebase/app-compat': 0.2.50
-      '@firebase/auth': 1.9.0(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))
+      '@firebase/auth': 1.9.0(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))
       '@firebase/auth-types': 0.13.0(@firebase/app-types@0.9.3)(@firebase/util@1.10.3)
       '@firebase/component': 0.6.12
       '@firebase/util': 1.10.3
@@ -9395,7 +10042,7 @@ snapshots:
       '@firebase/app-types': 0.9.3
       '@firebase/util': 1.10.3
 
-  '@firebase/auth@1.9.0(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))':
+  '@firebase/auth@1.9.0(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))':
     dependencies:
       '@firebase/app': 0.11.1
       '@firebase/component': 0.6.12
@@ -9403,7 +10050,7 @@ snapshots:
       '@firebase/util': 1.10.3
       tslib: 2.8.1
     optionalDependencies:
-      '@react-native-async-storage/async-storage': 2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+      '@react-native-async-storage/async-storage': 2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
 
   '@firebase/component@0.6.12':
     dependencies:
@@ -9631,22 +10278,22 @@ snapshots:
 
   '@firebase/webchannel-wrapper@1.0.3': {}
 
-  '@gorhom/bottom-sheet@5.2.8(@types/react@19.1.17)(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@gorhom/bottom-sheet@5.2.8(6a38a83ca283ae4d61e53fcd24ae5b68)':
     dependencies:
-      '@gorhom/portal': 1.0.14(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@gorhom/portal': 1.0.14(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       invariant: 2.2.4
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-gesture-handler: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.1.17
+      '@types/react': 19.2.18
 
-  '@gorhom/portal@1.0.14(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@gorhom/portal@1.0.14(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
       nanoid: 3.3.11
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
   '@grpc/grpc-js@1.9.15':
     dependencies:
@@ -9666,9 +10313,9 @@ snapshots:
     dependencies:
       '@hapi/hoek': 9.3.0
 
-  '@hookform/resolvers@2.9.11(react-hook-form@7.34.2(react@19.1.0))':
+  '@hookform/resolvers@2.9.11(react-hook-form@7.34.2(react@19.2.3))':
     dependencies:
-      react-hook-form: 7.34.2(react@19.1.0)
+      react-hook-form: 7.34.2(react@19.2.3)
 
   '@humanwhocodes/config-array@0.13.0':
     dependencies:
@@ -9682,8 +10329,6 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
-  '@ide/backoff@1.0.0': {}
-
   '@inquirer/external-editor@1.0.3(@types/node@25.0.3)':
     dependencies:
       chardet: 2.1.1
@@ -9706,10 +10351,6 @@ snapshots:
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: wrap-ansi@7.0.0
 
-  '@isaacs/fs-minipass@4.0.1':
-    dependencies:
-      minipass: 7.1.2
-
   '@isaacs/ttlcache@1.4.1': {}
 
   '@istanbuljs/load-nyc-config@1.1.0':
@@ -9901,6 +10542,11 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.5.5
       '@jridgewell/trace-mapping': 0.3.31
 
+  '@jridgewell/remapping@2.3.5':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
   '@jridgewell/resolve-uri@3.1.2': {}
 
   '@jridgewell/source-map@0.3.11':
@@ -9915,21 +10561,29 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@lodev09/react-native-true-sheet@3.7.3(261280a80c394a7dcf8d9609d62c37ca)':
+  '@legendapp/list@3.4.0(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
-      '@gorhom/bottom-sheet': 5.2.8(@types/react@19.1.17)(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      '@react-navigation/native': 7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-worklets: 0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react-dom: 19.2.3(react@19.2.3)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@magrinj/expo-quick-look@0.4.0(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@lodev09/react-native-true-sheet@3.7.3(4eac27da23d45fdf91d899c57069aba2)':
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+    optionalDependencies:
+      '@gorhom/bottom-sheet': 5.2.8(6a38a83ca283ae4d61e53fcd24ae5b68)
+      '@react-navigation/native': 7.4.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-worklets: 0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+
+  '@magrinj/expo-quick-look@0.4.0(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
   '@napi-rs/wasm-runtime@0.2.12':
     dependencies:
@@ -10108,19 +10762,150 @@ snapshots:
 
   '@protobufjs/utf8@1.1.0': {}
 
-  '@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))':
+  '@radix-ui/primitive@1.1.7': {}
+
+  '@radix-ui/react-compose-refs@1.1.5(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-context@1.2.2(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dialog@1.1.23(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-context': 1.2.2(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.19(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.6(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.16(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.17(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.10(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.10(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.6(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.18)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-dismissable-layer@1.1.19(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.10(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-focus-guards@1.1.6(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-focus-scope@1.1.16(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.10(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-id@1.1.4(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-portal@1.1.17(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.10(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-presence@1.1.10(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-primitive@2.1.10(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-slot': 1.3.3(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-slot@1.3.3(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.5(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-callback-ref@1.1.4(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-controllable-state@1.2.6(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.7
+      '@radix-ui/react-use-effect-event': 0.0.5(@types/react@19.2.18)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-effect-event@0.0.5(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.4(@types/react@19.2.18)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@radix-ui/react-use-layout-effect@1.1.4(@types/react@19.2.18)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  '@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))':
     dependencies:
       merge-options: 3.0.4
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@react-native-camera-roll/camera-roll@7.10.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))':
+  '@react-native-camera-roll/camera-roll@7.10.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))':
     dependencies:
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@react-native-clipboard/clipboard@1.16.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-native-clipboard/clipboard@1.16.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
   '@react-native-community/cli-clean@20.0.0':
     dependencies:
@@ -10278,197 +11063,198 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@react-native-community/datetimepicker@8.4.4(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-native-community/datetimepicker@9.1.0(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
       invariant: 2.2.4
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     optionalDependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
 
-  '@react-native-community/hooks@100.1.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-native-community/hooks@100.1.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@react-native-community/netinfo@11.4.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))':
+  '@react-native-community/netinfo@12.0.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@react-native-community/slider@5.0.1': {}
+  '@react-native-community/slider@5.2.0': {}
 
-  '@react-native-cookies/cookies@6.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))':
+  '@react-native-cookies/cookies@6.2.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))':
     dependencies:
       invariant: 2.2.4
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@react-native-firebase/analytics@21.14.0(@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))':
+  '@react-native-firebase/analytics@21.14.0(@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))':
     dependencies:
-      '@react-native-firebase/app': 21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-native-firebase/app': 21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       superstruct: 2.0.2
 
-  '@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      firebase: 11.3.1(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      firebase: 11.3.1(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     optionalDependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
     transitivePeerDependencies:
       - '@react-native-async-storage/async-storage'
 
-  '@react-native-firebase/crashlytics@21.14.0(7f31d425d6e3bb1976dd842bb1e41e49)':
+  '@react-native-firebase/crashlytics@21.14.0(@react-native-firebase/app@21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(expo@57.0.23)':
     dependencies:
-      '@react-native-firebase/app': 21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-native-firebase/app': 21.14.0(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       stacktrace-js: 2.0.2
     optionalDependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
 
-  '@react-native-masked-view/masked-view@0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-native-masked-view/masked-view@0.3.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@react-native-picker/picker@2.11.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-native-picker/picker@2.11.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@react-native/assets-registry@0.81.5': {}
+  '@react-native/assets-registry@0.86.3': {}
 
-  '@react-native/babel-plugin-codegen@0.81.5(@babel/core@7.25.9)':
+  '@react-native/babel-plugin-codegen@0.86.3(@babel/core@7.29.7)':
     dependencies:
-      '@babel/traverse': 7.29.0
-      '@react-native/codegen': 0.81.5(@babel/core@7.25.9)
+      '@babel/traverse': 7.29.8
+      '@react-native/codegen': 0.86.3(@babel/core@7.29.7)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
 
-  '@react-native/babel-preset@0.81.5(@babel/core@7.25.9)':
-    dependencies:
-      '@babel/core': 7.25.9
-      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.25.9)
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-async-generator-functions': 7.29.0(@babel/core@7.25.9)
-      '@babel/plugin-transform-async-to-generator': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-computed-properties': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.25.9)
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-function-name': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-literals': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-logical-assignment-operators': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-numeric-separator': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-optional-catch-binding': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.25.9)
-      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.25.9)
-      '@babel/plugin-transform-react-jsx': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-regenerator': 7.29.0(@babel/core@7.25.9)
-      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.25.9)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-spread': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-sticky-regex': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.25.9)
-      '@babel/template': 7.28.6
-      '@react-native/babel-plugin-codegen': 0.81.5(@babel/core@7.25.9)
-      babel-plugin-syntax-hermes-parser: 0.29.1
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.25.9)
+  '@react-native/babel-preset@0.86.3(@babel/core@7.29.7)':
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-generator-functions': 7.29.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-to-generator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-catch-binding': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-regenerator': 7.29.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.7)
+      '@react-native/babel-plugin-codegen': 0.86.3(@babel/core@7.29.7)
+      babel-plugin-syntax-hermes-parser: 0.36.0
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.29.7)
       react-refresh: 0.14.2
     transitivePeerDependencies:
       - supports-color
 
-  '@react-native/codegen@0.80.2(@babel/core@7.25.9)':
+  '@react-native/codegen@0.86.3(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      glob: 7.2.3
-      hermes-parser: 0.28.1
-      invariant: 2.2.4
-      nullthrows: 1.1.1
-      yargs: 17.7.2
-
-  '@react-native/codegen@0.81.5(@babel/core@7.25.9)':
-    dependencies:
-      '@babel/core': 7.25.9
-      '@babel/parser': 7.29.2
-      glob: 7.2.3
-      hermes-parser: 0.29.1
+      '@babel/core': 7.29.7
+      '@babel/parser': 7.29.8
+      hermes-parser: 0.36.0
       invariant: 2.2.4
       nullthrows: 1.1.1
+      tinyglobby: 0.2.15
       yargs: 17.7.2
 
-  '@react-native/community-cli-plugin@0.81.5(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))':
+  '@react-native/community-cli-plugin@0.86.3(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))':
     dependencies:
-      '@react-native/dev-middleware': 0.81.5
+      '@react-native/dev-middleware': 0.86.3
       debug: 4.4.3
       invariant: 2.2.4
-      metro: 0.83.3
-      metro-config: 0.83.3
-      metro-core: 0.83.3
+      metro: 0.84.6
+      metro-config: 0.84.6
+      metro-core: 0.84.6
       semver: 7.5.2
     optionalDependencies:
       '@react-native-community/cli': 20.0.0(typescript@7.0.2)
-      '@react-native/metro-config': 0.81.5(@babel/core@7.25.9)
+      '@react-native/metro-config': 0.86.3(@babel/core@7.29.7)
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  '@react-native/debugger-frontend@0.81.5': {}
+  '@react-native/debugger-frontend@0.86.3': {}
+
+  '@react-native/debugger-shell@0.86.3':
+    dependencies:
+      cross-spawn: 7.0.6
+      debug: 4.4.3
+      fb-dotslash: 0.5.8
+    transitivePeerDependencies:
+      - supports-color
 
-  '@react-native/dev-middleware@0.81.5':
+  '@react-native/dev-middleware@0.86.3':
     dependencies:
       '@isaacs/ttlcache': 1.4.1
-      '@react-native/debugger-frontend': 0.81.5
+      '@react-native/debugger-frontend': 0.86.3
+      '@react-native/debugger-shell': 0.86.3
       chrome-launcher: 0.15.2
-      chromium-edge-launcher: 0.2.0
+      chromium-edge-launcher: 0.3.0
       connect: 3.7.0
       debug: 4.4.3
       invariant: 2.2.4
       nullthrows: 1.1.1
       open: 7.4.2
       serve-static: 1.16.3
-      ws: 6.2.3
+      ws: 7.5.10
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  '@react-native/gradle-plugin@0.81.5': {}
+  '@react-native/gradle-plugin@0.86.3': {}
 
-  '@react-native/js-polyfills@0.81.5': {}
+  '@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3)':
+    dependencies:
+      '@jest/create-cache-key-function': 29.7.0
+      '@react-native/js-polyfills': 0.86.3
+      babel-jest: 29.7.0(@babel/core@7.29.7)
+      jest-environment-node: 29.7.0
+      react: 19.2.3
+      regenerator-runtime: 0.13.11
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
+  '@react-native/js-polyfills@0.86.3': {}
 
-  '@react-native/metro-babel-transformer@0.81.5(@babel/core@7.25.9)':
+  '@react-native/metro-babel-transformer@0.86.3(@babel/core@7.29.7)':
     dependencies:
-      '@babel/core': 7.25.9
-      '@react-native/babel-preset': 0.81.5(@babel/core@7.25.9)
-      hermes-parser: 0.29.1
+      '@babel/core': 7.29.7
+      '@react-native/babel-preset': 0.86.3(@babel/core@7.29.7)
+      hermes-parser: 0.36.0
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - supports-color
 
-  '@react-native/metro-config@0.81.5(@babel/core@7.25.9)':
+  '@react-native/metro-config@0.86.3(@babel/core@7.29.7)':
     dependencies:
-      '@react-native/js-polyfills': 0.81.5
-      '@react-native/metro-babel-transformer': 0.81.5(@babel/core@7.25.9)
-      metro-config: 0.83.3
-      metro-runtime: 0.83.3
+      '@react-native/js-polyfills': 0.86.3
+      '@react-native/metro-babel-transformer': 0.86.3(@babel/core@7.29.7)
+      metro-config: 0.84.6
+      metro-runtime: 0.84.6
     transitivePeerDependencies:
       - '@babel/core'
       - bufferutil
@@ -10477,87 +11263,86 @@ snapshots:
 
   '@react-native/normalize-color@2.1.0': {}
 
-  '@react-native/normalize-colors@0.81.5': {}
+  '@react-native/normalize-colors@0.86.3': {}
 
-  '@react-native/typescript-config@0.81.5': {}
+  '@react-native/typescript-config@0.86.3': {}
 
-  '@react-native/virtualized-lists@0.81.5(@types/react@19.1.17)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-native/virtualized-lists@0.86.3(@types/react@19.2.18)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
       invariant: 2.2.4
       nullthrows: 1.1.1
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.1.17
+      '@types/react': 19.2.18
 
-  '@react-navigation/core@7.21.1(react@19.1.0)':
+  '@react-navigation/core@7.22.1(react@19.2.3)':
     dependencies:
-      '@react-navigation/routers': 7.6.0
+      '@react-navigation/routers': 7.6.4
       escape-string-regexp: 4.0.0
       fast-deep-equal: 3.1.3
-      nanoid: 3.3.11
-      query-string: 7.1.3
-      react: 19.1.0
-      react-is: 19.1.0
-      use-latest-callback: 0.2.6(react@19.1.0)
-      use-sync-external-store: 1.6.0(react@19.1.0)
+      nanoid: 3.3.19
+      react: 19.2.3
+      react-is: 19.3.0
+      use-latest-callback: 0.2.6(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
 
-  '@react-navigation/drawer@7.12.2(1791ab06baac4955f4dd8054e3baaac6)':
+  '@react-navigation/drawer@7.14.2(2bc054b45d80945c6bf73a8ade7ad73e)':
     dependencies:
-      '@react-navigation/elements': 2.9.25(@react-native-masked-view/masked-view@0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(@react-navigation/native@7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      '@react-navigation/native': 7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-navigation/elements': 2.9.43(322efc84ae2b5bd2002572a8329e2a5c)
+      '@react-navigation/native': 7.4.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       color: 4.2.3
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-drawer-layout: 4.2.5(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-safe-area-context: 5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-screens: 4.17.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      use-latest-callback: 0.2.6(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-drawer-layout: 4.2.10(106987a3d5ae1ef5de78591772a14578)
+      react-native-gesture-handler: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-safe-area-context: 5.10.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-screens: 4.28.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      use-latest-callback: 0.2.6(react@19.2.3)
     transitivePeerDependencies:
       - '@react-native-masked-view/masked-view'
 
-  '@react-navigation/elements@2.9.25(@react-native-masked-view/masked-view@0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(@react-navigation/native@7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-navigation/elements@2.9.43(322efc84ae2b5bd2002572a8329e2a5c)':
     dependencies:
-      '@react-navigation/native': 7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-navigation/native': 7.4.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       color: 4.2.3
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-safe-area-context: 5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      use-latest-callback: 0.2.6(react@19.1.0)
-      use-sync-external-store: 1.6.0(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-safe-area-context: 5.10.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      use-latest-callback: 0.2.6(react@19.2.3)
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
-      '@react-native-masked-view/masked-view': 0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-native-masked-view/masked-view': 0.3.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
 
-  '@react-navigation/native-stack@7.17.5(5d5d774b9c7e992721e68b3dbd486565)':
+  '@react-navigation/native-stack@7.19.2(9f93b74e18ae1df429c2a9dc7118e4c2)':
     dependencies:
-      '@react-navigation/elements': 2.9.25(@react-native-masked-view/masked-view@0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(@react-navigation/native@7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      '@react-navigation/native': 7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-navigation/elements': 2.9.43(322efc84ae2b5bd2002572a8329e2a5c)
+      '@react-navigation/native': 7.4.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       color: 4.2.3
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-safe-area-context: 5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-screens: 4.17.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-safe-area-context: 5.10.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-screens: 4.28.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       sf-symbols-typescript: 2.2.0
       warn-once: 0.1.1
     transitivePeerDependencies:
       - '@react-native-masked-view/masked-view'
 
-  '@react-navigation/native@7.3.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@react-navigation/native@7.4.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@react-navigation/core': 7.21.1(react@19.1.0)
+      '@react-navigation/core': 7.22.1(react@19.2.3)
       escape-string-regexp: 4.0.0
       fast-deep-equal: 3.1.3
-      nanoid: 3.3.11
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      standard-navigation: 0.0.7
-      use-latest-callback: 0.2.6(react@19.1.0)
+      nanoid: 3.3.19
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      standard-navigation: 0.0.8(react@19.2.3)
+      use-latest-callback: 0.2.6(react@19.2.3)
 
-  '@react-navigation/routers@7.6.0':
+  '@react-navigation/routers@7.6.4':
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.19
 
   '@redux-saga/core@1.4.2':
     dependencies:
@@ -10597,10 +11382,10 @@ snapshots:
     dependencies:
       tldts: 6.1.86
 
-  '@rocket.chat/mobile-crypto@https://codeload.github.com/RocketChat/rocket.chat-mobile-crypto/tar.gz/69a0a250dd7c6ff0808eb659d7202be1cae7fa1c(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@rocket.chat/mobile-crypto@https://codeload.github.com/RocketChat/rocket.chat-mobile-crypto/tar.gz/69a0a250dd7c6ff0808eb659d7202be1cae7fa1c(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
   '@rocket.chat/sdk@https://codeload.github.com/RocketChat/Rocket.Chat.js.SDK/tar.gz/ecf4fedcf8ab6121e62a6b95bb48823afd805afd':
     dependencies:
@@ -10624,6 +11409,12 @@ snapshots:
 
   '@samchon/openapi@4.7.2': {}
 
+  '@shopify/flash-list@2.3.2(@babel/runtime@7.25.9)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@babel/runtime': 7.25.9
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+
   '@sideway/address@4.1.5':
     dependencies:
       '@hapi/hoek': 9.3.0
@@ -10648,34 +11439,34 @@ snapshots:
 
   '@storybook/global@5.0.0': {}
 
-  '@storybook/react-dom-shim@9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))':
+  '@storybook/react-dom-shim@9.0.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))':
     dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4)
 
-  '@storybook/react-dom-shim@9.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))':
+  '@storybook/react-dom-shim@9.1.17(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))':
     dependencies:
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4)
 
-  '@storybook/react-native-theming@9.1.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@storybook/react-native-theming@9.1.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
       polished: 4.3.1
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  '@storybook/react-native-ui-common@9.1.4(react-dom@19.1.0(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)':
+  '@storybook/react-native-ui-common@9.1.4(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)':
     dependencies:
-      '@storybook/react': 9.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
-      '@storybook/react-native-theming': 9.1.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@storybook/react': 9.1.17(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
+      '@storybook/react-native-theming': 9.1.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       es-toolkit: 1.43.0
       fuse.js: 7.1.0
       memoizerific: 1.11.3
       polished: 4.3.1
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       store2: 2.14.4
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4)
       ts-dedent: 2.2.0
@@ -10683,51 +11474,51 @@ snapshots:
       - react-dom
       - typescript
 
-  '@storybook/react-native-ui@9.1.4(ebecaf8f8fcf1df6c542e15e1e29e0ad)':
+  '@storybook/react-native-ui@9.1.4(db5a63f8584c69639086fd4f0ebb93bd)':
     dependencies:
-      '@gorhom/bottom-sheet': 5.2.8(@types/react@19.1.17)(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      '@storybook/react': 9.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
-      '@storybook/react-native-theming': 9.1.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      '@storybook/react-native-ui-common': 9.1.4(react-dom@19.1.0(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
+      '@gorhom/bottom-sheet': 5.2.8(6a38a83ca283ae4d61e53fcd24ae5b68)
+      '@storybook/react': 9.1.17(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
+      '@storybook/react-native-theming': 9.1.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      '@storybook/react-native-ui-common': 9.1.4(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
       es-toolkit: 1.43.0
       fuse.js: 7.1.0
       memoizerific: 1.11.3
       polished: 4.3.1
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-safe-area-context: 5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-svg: 15.12.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-gesture-handler: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-safe-area-context: 5.10.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-svg: 15.15.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       store2: 2.14.4
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4)
     transitivePeerDependencies:
       - react-dom
       - typescript
 
-  '@storybook/react-native@9.0.18(b3c380f041753120db9b4b839e8df819)':
+  '@storybook/react-native@9.0.18(3981ca50ab547f261d3351bbe700d2a7)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react': 9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
-      '@storybook/react-native-theming': 9.1.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      '@storybook/react-native-ui': 9.1.4(ebecaf8f8fcf1df6c542e15e1e29e0ad)
-      '@storybook/react-native-ui-common': 9.1.4(react-dom@19.1.0(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
+      '@storybook/react': 9.0.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
+      '@storybook/react-native-theming': 9.1.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      '@storybook/react-native-ui': 9.1.4(db5a63f8584c69639086fd4f0ebb93bd)
+      '@storybook/react-native-ui-common': 9.1.4(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)
       commander: 8.3.0
       dedent: 1.6.0(babel-plugin-macros@3.1.0)
       deepmerge: 4.3.1
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-url-polyfill: 2.0.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-url-polyfill: 2.0.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       setimmediate: 1.0.5
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4)
       type-fest: 2.19.0
       util: 0.12.5
       ws: 8.18.3
     optionalDependencies:
-      '@gorhom/bottom-sheet': 5.2.8(@types/react@19.1.17)(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-safe-area-context: 5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@gorhom/bottom-sheet': 5.2.8(6a38a83ca283ae4d61e53fcd24ae5b68)
+      react-native-gesture-handler: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-safe-area-context: 5.10.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
     transitivePeerDependencies:
       - babel-plugin-macros
       - bufferutil
@@ -10736,29 +11527,29 @@ snapshots:
       - typescript
       - utf-8-validate
 
-  '@storybook/react@9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)':
+  '@storybook/react@9.0.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.0.18(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      '@storybook/react-dom-shim': 9.0.18(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4)
     optionalDependencies:
       typescript: 7.0.2
 
-  '@storybook/react@9.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)':
+  '@storybook/react@9.1.17(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))(typescript@7.0.2)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.17(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))
-      react: 19.1.0
-      react-dom: 19.1.0(react@19.1.0)
+      '@storybook/react-dom-shim': 9.1.17(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(storybook@9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4))
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
       storybook: 9.0.18(@testing-library/dom@10.4.1)(prettier@3.7.4)
     optionalDependencies:
       typescript: 7.0.2
 
   '@testing-library/dom@10.4.1':
     dependencies:
-      '@babel/code-frame': 7.29.0
+      '@babel/code-frame': 7.29.7
       '@babel/runtime': 7.25.9
       '@types/aria-query': 5.0.4
       aria-query: 5.3.0
@@ -10776,14 +11567,14 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react-native@13.3.3(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react-test-renderer@19.1.0(react@19.1.0))(react@19.1.0)':
+  '@testing-library/react-native@13.3.3(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react-test-renderer@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       jest-matcher-utils: 30.2.0
       picocolors: 1.1.1
       pretty-format: 30.2.0
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-test-renderer: 19.1.0(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-test-renderer: 19.2.3(react@19.2.3)
       redent: 3.0.0
     optionalDependencies:
       jest: 29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0)
@@ -10836,6 +11627,8 @@ snapshots:
 
   '@types/ejson@2.2.2': {}
 
+  '@types/emscripten@1.41.6': {}
+
   '@types/eslint-scope@3.7.7':
     dependencies:
       '@types/eslint': 9.6.1
@@ -10852,15 +11645,9 @@ snapshots:
     dependencies:
       '@types/node': 25.0.3
 
-  '@types/hammerjs@2.0.46': {}
-
-  '@types/hast@2.3.10':
+  '@types/hoist-non-react-statics@3.3.7(@types/react@19.2.18)':
     dependencies:
-      '@types/unist': 2.0.11
-
-  '@types/hoist-non-react-statics@3.3.7(@types/react@19.1.17)':
-    dependencies:
-      '@types/react': 19.1.17
+      '@types/react': 19.2.18
       hoist-non-react-statics: 3.3.2
 
   '@types/i18n-js@3.8.3': {}
@@ -10910,13 +11697,17 @@ snapshots:
 
   '@types/prop-types@15.7.15': {}
 
+  '@types/react-test-renderer@19.3.0':
+    dependencies:
+      '@types/react': 19.2.18
+
   '@types/react@17.0.90':
     dependencies:
       '@types/prop-types': 15.7.15
       '@types/scheduler': 0.16.8
       csstype: 3.2.3
 
-  '@types/react@19.1.17':
+  '@types/react@19.2.18':
     dependencies:
       csstype: 3.2.3
 
@@ -10930,8 +11721,6 @@ snapshots:
 
   '@types/ua-parser-js@0.7.39': {}
 
-  '@types/unist@2.0.11': {}
-
   '@types/url-parse@1.4.11': {}
 
   '@types/use-sync-external-store@0.0.3': {}
@@ -11063,18 +11852,6 @@ snapshots:
   '@unrs/resolver-binding-win32-x64-msvc@1.11.1':
     optional: true
 
-  '@urql/core@5.2.0':
-    dependencies:
-      '@0no-co/graphql.web': 1.2.0
-      wonka: 6.3.5
-    transitivePeerDependencies:
-      - graphql
-
-  '@urql/exchange-retry@1.3.2(@urql/core@5.2.0)':
-    dependencies:
-      '@urql/core': 5.2.0
-      wonka: 6.3.5
-
   '@vitest/expect@3.2.4':
     dependencies:
       '@types/chai': 5.2.3
@@ -11177,18 +11954,16 @@ snapshots:
 
   '@xmldom/xmldom@0.8.11': {}
 
-  '@xmldom/xmldom@0.9.8': {}
-
   '@xtuc/ieee754@1.2.0': {}
 
   '@xtuc/long@4.2.2': {}
 
   '@yarnpkg/lockfile@1.1.0': {}
 
-  '@zoontek/react-native-navigation-bar@1.1.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
+  '@zoontek/react-native-navigation-bar@1.1.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)':
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
   abab@2.0.6: {}
 
@@ -11201,6 +11976,11 @@ snapshots:
       mime-types: 2.1.35
       negotiator: 0.6.3
 
+  accepts@2.0.0:
+    dependencies:
+      mime-types: 3.0.2
+      negotiator: 1.1.0
+
   acorn-globals@7.0.1:
     dependencies:
       acorn: 8.16.0
@@ -11228,6 +12008,8 @@ snapshots:
 
   agent-base@7.1.4: {}
 
+  agent-cli-detector@0.1.7: {}
+
   ajv-formats@2.1.1(ajv@8.18.0):
     optionalDependencies:
       ajv: 8.18.0
@@ -11283,8 +12065,6 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -11300,6 +12080,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
+
   aria-query@5.3.0:
     dependencies:
       dequal: 2.0.3
@@ -11370,14 +12154,6 @@ snapshots:
 
   asap@2.0.6: {}
 
-  assert@2.1.0:
-    dependencies:
-      call-bind: 1.0.8
-      is-nan: 1.3.2
-      object-is: 1.1.6
-      object.assign: 4.1.7
-      util: 0.12.5
-
   assertion-error@2.0.1: {}
 
   ast-types@0.16.1:
@@ -11420,9 +12196,22 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@9.1.3(@babel/core@7.25.9)(webpack@5.106.2(esbuild@0.25.12)):
+  babel-jest@29.7.0(@babel/core@7.29.7):
     dependencies:
-      '@babel/core': 7.25.9
+      '@babel/core': 7.29.7
+      '@jest/transform': 29.7.0
+      '@types/babel__core': 7.20.5
+      babel-plugin-istanbul: 6.1.1
+      babel-preset-jest: 29.6.3(@babel/core@7.29.7)
+      chalk: 4.1.2
+      graceful-fs: 4.2.11
+      slash: 3.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  babel-loader@9.1.3(@babel/core@7.29.7)(webpack@5.106.2(esbuild@0.25.12)):
+    dependencies:
+      '@babel/core': 7.29.7
       find-cache-dir: 4.0.0
       schema-utils: 4.3.3
       webpack: 5.106.2(esbuild@0.25.12)
@@ -11459,35 +12248,35 @@ snapshots:
       reselect: 4.1.8
       resolve: 1.22.11
 
-  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.25.9):
+  babel-plugin-polyfill-corejs2@0.4.14(@babel/core@7.29.7):
     dependencies:
       '@babel/compat-data': 7.29.0
-      '@babel/core': 7.25.9
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.7)
       semver: 6.3.1
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.10.6(@babel/core@7.25.9):
+  babel-plugin-polyfill-corejs3@0.10.6(@babel/core@7.29.7):
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.7)
       core-js-compat: 3.48.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.25.9):
+  babel-plugin-polyfill-corejs3@0.13.0(@babel/core@7.29.7):
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.7)
       core-js-compat: 3.48.0
     transitivePeerDependencies:
       - supports-color
 
-  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.25.9):
+  babel-plugin-polyfill-regenerator@0.6.5(@babel/core@7.29.7):
     dependencies:
-      '@babel/core': 7.25.9
-      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.25.9)
+      '@babel/core': 7.29.7
+      '@babel/helper-define-polyfill-provider': 0.6.6(@babel/core@7.29.7)
     transitivePeerDependencies:
       - supports-color
 
@@ -11497,13 +12286,17 @@ snapshots:
 
   babel-plugin-react-native-web@0.21.2: {}
 
-  babel-plugin-syntax-hermes-parser@0.29.1:
+  babel-plugin-syntax-hermes-parser@0.36.0:
+    dependencies:
+      hermes-parser: 0.36.0
+
+  babel-plugin-syntax-hermes-parser@0.36.1:
     dependencies:
-      hermes-parser: 0.29.1
+      hermes-parser: 0.36.1
 
-  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.25.9):
+  babel-plugin-transform-flow-enums@0.0.2(@babel/core@7.29.7):
     dependencies:
-      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.25.9)
+      '@babel/plugin-syntax-flow': 7.27.1(@babel/core@7.29.7)
     transitivePeerDependencies:
       - '@babel/core'
 
@@ -11530,34 +12323,73 @@ snapshots:
       '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.25.9)
       '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.25.9)
 
-  babel-preset-expo@54.0.9(@babel/core@7.25.9)(@babel/runtime@7.25.9)(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-refresh@0.14.2):
-    dependencies:
-      '@babel/helper-module-imports': 7.28.6
-      '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-class-static-block': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.25.9)
-      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.25.9)
-      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.25.9)
-      '@babel/preset-react': 7.28.5(@babel/core@7.25.9)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.25.9)
-      '@react-native/babel-preset': 0.81.5(@babel/core@7.25.9)
+  babel-preset-current-node-syntax@1.2.0(@babel/core@7.29.7):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.29.7)
+      '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-attributes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.29.7)
+      '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.29.7)
+      '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.29.7)
+
+  babel-preset-expo@57.0.12(@babel/core@7.29.7)(@babel/runtime@7.25.9)(expo@57.0.23)(react-refresh@0.14.2):
+    dependencies:
+      '@babel/generator': 7.29.8
+      '@babel/helper-module-imports': 7.29.7
+      '@babel/plugin-proposal-decorators': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-proposal-export-default-from': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-export-default-from': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-generator-functions': 7.29.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-async-to-generator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-block-scoping': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-static-block': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-destructuring': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-export-namespace-from': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-flow-strip-types': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-for-of': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-logical-assignment-operators': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-modules-commonjs': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-named-capturing-groups-regex': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-object-rest-spread': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-catch-binding': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-parameters': 7.27.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-methods': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-private-property-in-object': 7.25.9(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-display-name': 7.28.0(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx': 7.29.7(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-jsx-development': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-react-pure-annotations': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-runtime': 7.28.5(@babel/core@7.29.7)
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.7)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.7)
+      '@react-native/babel-plugin-codegen': 0.86.3(@babel/core@7.29.7)
       babel-plugin-react-compiler: 1.0.0
       babel-plugin-react-native-web: 0.21.2
-      babel-plugin-syntax-hermes-parser: 0.29.1
-      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.25.9)
+      babel-plugin-syntax-hermes-parser: 0.36.1
+      babel-plugin-transform-flow-enums: 0.0.2(@babel/core@7.29.7)
       debug: 4.4.3
       react-refresh: 0.14.2
-      resolve-from: 5.0.0
     optionalDependencies:
       '@babel/runtime': 7.25.9
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
     transitivePeerDependencies:
       - '@babel/core'
       - supports-color
@@ -11568,10 +12400,24 @@ snapshots:
       babel-plugin-jest-hoist: 29.6.3
       babel-preset-current-node-syntax: 1.2.0(@babel/core@7.25.9)
 
+  babel-preset-jest@29.6.3(@babel/core@7.29.7):
+    dependencies:
+      '@babel/core': 7.29.7
+      babel-plugin-jest-hoist: 29.6.3
+      babel-preset-current-node-syntax: 1.2.0(@babel/core@7.29.7)
+
   badgin@1.2.3: {}
 
   balanced-match@1.0.2: {}
 
+  balanced-match@4.0.4: {}
+
+  barcode-detector@3.2.2(@types/emscripten@1.41.6):
+    dependencies:
+      zxing-wasm: 3.1.3(@types/emscripten@1.41.6)
+    transitivePeerDependencies:
+      - '@types/emscripten'
+
   bare-events@2.8.2: {}
 
   bare-fs@4.5.2:
@@ -11665,6 +12511,10 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
+  brace-expansion@5.0.12:
+    dependencies:
+      balanced-match: 4.0.4
+
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
@@ -11755,8 +12605,6 @@ snapshots:
 
   chownr@1.1.4: {}
 
-  chownr@3.0.0: {}
-
   chrome-launcher@0.15.2:
     dependencies:
       '@types/node': 25.0.3
@@ -11768,14 +12616,13 @@ snapshots:
 
   chrome-trace-event@1.0.4: {}
 
-  chromium-edge-launcher@0.2.0:
+  chromium-edge-launcher@0.3.0:
     dependencies:
       '@types/node': 25.0.3
       escape-string-regexp: 4.0.0
       is-wsl: 2.2.0
       lighthouse-logger: 1.4.2
       mkdirp: 1.0.4
-      rimraf: 3.0.2
     transitivePeerDependencies:
       - supports-color
 
@@ -11845,8 +12692,6 @@ snapshots:
     dependencies:
       delayed-stream: 1.0.0
 
-  comma-separated-tokens@2.0.3: {}
-
   command-exists@1.2.9: {}
 
   command-line-args@5.2.1:
@@ -11871,8 +12716,6 @@ snapshots:
 
   commander@2.20.3: {}
 
-  commander@4.1.1: {}
-
   commander@7.2.0: {}
 
   commander@8.3.0: {}
@@ -11924,6 +12767,8 @@ snapshots:
 
   content-type@1.0.5: {}
 
+  content-type@2.1.0: {}
+
   convert-source-map@2.0.0: {}
 
   core-js-compat@3.48.0:
@@ -11971,8 +12816,6 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
-  crypto-random-string@2.0.0: {}
-
   css-select@5.2.2:
     dependencies:
       boolbase: 1.0.0
@@ -11981,8 +12824,6 @@ snapshots:
       domutils: 3.2.2
       nth-check: 2.1.1
 
-  css-selector-parser@1.4.1: {}
-
   css-tree@1.1.3:
     dependencies:
       mdn-data: 2.0.14
@@ -12051,8 +12892,6 @@ snapshots:
 
   decimal.js@10.6.0: {}
 
-  decode-uri-component@0.2.2: {}
-
   decompress-response@6.0.0:
     dependencies:
       mimic-response: 3.1.0
@@ -12086,6 +12925,7 @@ snapshots:
       define-data-property: 1.1.4
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
+    optional: true
 
   delayed-stream@1.0.0: {}
 
@@ -12107,8 +12947,12 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
+  detect-node-es@1.1.0: {}
+
   diff-sequences@29.6.3: {}
 
+  dnssd-advertise@1.1.6: {}
+
   doctrine@2.1.0:
     dependencies:
       esutils: 2.0.3
@@ -12144,14 +12988,6 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
-  dotenv-expand@11.0.7:
-    dependencies:
-      dotenv: 16.6.1
-
-  dotenv@16.4.7: {}
-
-  dotenv@16.6.1: {}
-
   drange@1.1.1: {}
 
   dunder-proto@1.0.1:
@@ -12197,8 +13033,6 @@ snapshots:
 
   entities@6.0.1: {}
 
-  env-editor@0.4.2: {}
-
   env-paths@2.2.1: {}
 
   envinfo@7.21.0: {}
@@ -12491,8 +13325,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  esm@3.2.25: {}
-
   espree@9.6.1:
     dependencies:
       acorn: 8.16.0
@@ -12529,8 +13361,6 @@ snapshots:
 
   events@3.3.0: {}
 
-  exec-async@2.2.0: {}
-
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -12555,182 +13385,202 @@ snapshots:
       jest-message-util: 29.7.0
       jest-util: 29.7.0
 
-  expo-apple-authentication@8.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  expo-apple-authentication@57.0.2(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo-application@7.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)):
+  expo-application@57.0.3(expo@57.0.23):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
 
-  expo-asset@12.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-asset@57.0.17(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2):
     dependencies:
-      '@expo/image-utils': 0.8.8
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      expo-constants: 18.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      '@expo/image-utils': 0.11.5(typescript@7.0.2)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      expo-constants: 57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     transitivePeerDependencies:
       - supports-color
+      - typescript
 
-  expo-audio@0.4.9(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-audio@57.0.5(expo-asset@57.0.17(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2))(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      expo-asset: 57.0.17(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo-camera@17.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-camera@57.0.5(@types/emscripten@1.41.6)(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      invariant: 2.2.4
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      barcode-detector: 3.2.2(@types/emscripten@1.41.6)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+    transitivePeerDependencies:
+      - '@types/emscripten'
 
-  expo-constants@18.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  expo-constants@57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      '@expo/config': 12.0.13
-      '@expo/env': 2.0.8
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      '@expo/env': 2.4.3
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     transitivePeerDependencies:
       - supports-color
 
-  expo-device@8.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)):
+  expo-device@57.0.2(expo@57.0.23):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
       ua-parser-js: 1.0.2
 
-  expo-document-picker@14.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)):
+  expo-document-picker@57.0.2(expo@57.0.23):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
 
-  expo-file-system@19.0.21(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  expo-file-system@57.0.7(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo-font@14.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-font@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
       fontfaceobserver: 2.3.0
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo-haptics@15.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)):
+  expo-haptics@57.0.3(expo@57.0.23):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
 
-  expo-image@3.0.11(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-image@57.0.5(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      sf-symbols-typescript: 2.2.0
 
-  expo-keep-awake@15.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react@19.1.0):
+  expo-keep-awake@57.0.2(expo@57.0.23)(react@19.2.3):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
 
-  expo-local-authentication@17.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)):
+  expo-local-authentication@57.0.3(expo@57.0.23):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
       invariant: 2.2.4
 
-  expo-modules-autolinking@3.0.23:
+  expo-modules-autolinking@57.0.13(typescript@7.0.2):
     dependencies:
-      '@expo/spawn-async': 1.7.2
+      '@expo/require-utils': 57.0.5(typescript@7.0.2)
+      '@expo/spawn-async': 1.8.0
       chalk: 4.1.2
       commander: 7.2.0
-      require-from-string: 2.0.2
-      resolve-from: 5.0.0
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
 
-  expo-modules-core@3.0.29(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-modules-core@57.0.18(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
+      '@expo/expo-modules-macros-plugin': 0.6.1
+      expo-modules-jsi: 57.1.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
       invariant: 2.2.4
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+    optionalDependencies:
+      react-native-worklets: 0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+
+  expo-modules-jsi@57.1.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
+    dependencies:
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo-notifications@0.32.15(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-notifications@57.0.19(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2):
     dependencies:
-      '@expo/image-utils': 0.8.8
-      '@ide/backoff': 1.0.0
+      '@expo/image-utils': 0.11.5(typescript@7.0.2)
       abort-controller: 3.0.0
-      assert: 2.1.0
       badgin: 1.2.3
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      expo-application: 7.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
-      expo-constants: 18.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      expo-application: 57.0.3(expo@57.0.23)
+      expo-constants: 57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     transitivePeerDependencies:
       - supports-color
+      - typescript
 
-  expo-server@1.0.5: {}
+  expo-server@57.0.3: {}
 
-  expo-status-bar@3.0.9(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-status-bar@57.0.1(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-is-edge-to-edge: 1.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo-system-ui@6.0.9(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  expo-system-ui@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      '@react-native/normalize-colors': 0.81.5
+      '@react-native/normalize-colors': 0.86.3
       debug: 4.4.3
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     transitivePeerDependencies:
       - supports-color
 
-  expo-video-thumbnails@10.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)):
+  expo-video-thumbnails@57.0.2(expo@57.0.23):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
 
-  expo-video@3.0.16(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo-video@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo-web-browser@15.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  expo-web-browser@57.0.3(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  expo@57.0.23(8132ea204d39ca81423aaa5e2384dd28):
     dependencies:
       '@babel/runtime': 7.25.9
-      '@expo/cli': 54.0.20(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
-      '@expo/config': 12.0.13
-      '@expo/config-plugins': 54.0.4
-      '@expo/devtools': 0.1.8(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      '@expo/fingerprint': 0.15.4
-      '@expo/metro': 54.2.0
-      '@expo/metro-config': 54.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))
-      '@expo/vector-icons': 15.0.3(expo-font@14.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@expo/cli': 57.0.25(@expo/dom-webview@57.0.1)(expo-constants@57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))(expo-font@57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(expo@57.0.23)(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2)
+      '@expo/config': 57.0.9(typescript@7.0.2)
+      '@expo/config-plugins': 57.0.9(typescript@7.0.2)
+      '@expo/devtools': 57.0.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      '@expo/fingerprint': 0.20.13
+      '@expo/local-build-cache-provider': 57.0.8(typescript@7.0.2)
+      '@expo/log-box': 57.0.4(@expo/dom-webview@57.0.1)(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      '@expo/metro': 56.0.2
+      '@expo/metro-config': 57.0.12(expo@57.0.23)(typescript@7.0.2)
       '@ungap/structured-clone': 1.3.0
-      babel-preset-expo: 54.0.9(@babel/core@7.25.9)(@babel/runtime@7.25.9)(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-refresh@0.14.2)
-      expo-asset: 12.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      expo-constants: 18.0.12(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
-      expo-file-system: 19.0.21(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))
-      expo-font: 14.0.10(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      expo-keep-awake: 15.0.8(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react@19.1.0)
-      expo-modules-autolinking: 3.0.23
-      expo-modules-core: 3.0.29(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      babel-preset-expo: 57.0.12(@babel/core@7.29.7)(@babel/runtime@7.25.9)(expo@57.0.23)(react-refresh@0.14.2)
+      expo-asset: 57.0.17(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(typescript@7.0.2)
+      expo-constants: 57.0.18(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
+      expo-file-system: 57.0.7(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))
+      expo-font: 57.0.4(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      expo-keep-awake: 57.0.2(expo@57.0.23)(react@19.2.3)
+      expo-modules-autolinking: 57.0.13(typescript@7.0.2)
+      expo-modules-core: 57.0.18(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       pretty-format: 29.7.0
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       react-refresh: 0.14.2
-      whatwg-url-without-unicode: 8.0.0-3
+      whatwg-url-minimum: 0.1.2
     optionalDependencies:
-      react-native-webview: 13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@expo/dom-webview': 57.0.1(expo@57.0.23)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-dom: 19.2.3(react@19.2.3)
+      react-native-webview: 13.16.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
     transitivePeerDependencies:
       - '@babel/core'
       - bufferutil
       - expo-router
-      - graphql
+      - expo-widgets
+      - react-native-worklets
+      - react-server-dom-webpack
       - supports-color
+      - typescript
       - utf-8-validate
 
   exponential-backoff@3.1.3: {}
@@ -12765,6 +13615,8 @@ snapshots:
     dependencies:
       websocket-driver: 0.7.4
 
+  fb-dotslash@0.5.8: {}
+
   fb-watchman@2.0.2:
     dependencies:
       bser: 2.1.1
@@ -12773,6 +13625,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.3
 
+  fetch-nodeshim@0.4.10: {}
+
   figures@3.2.0:
     dependencies:
       escape-string-regexp: 1.0.5
@@ -12785,8 +13639,6 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
-  filter-obj@1.1.0: {}
-
   finalhandler@1.1.2:
     dependencies:
       debug: 2.6.9
@@ -12835,7 +13687,7 @@ snapshots:
     dependencies:
       micromatch: 4.0.8
 
-  firebase@11.3.1(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))):
+  firebase@11.3.1(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))):
     dependencies:
       '@firebase/analytics': 0.10.11(@firebase/app@0.11.1)
       '@firebase/analytics-compat': 0.2.17(@firebase/app-compat@0.2.50)(@firebase/app@0.11.1)
@@ -12844,8 +13696,8 @@ snapshots:
       '@firebase/app-check-compat': 0.3.18(@firebase/app-compat@0.2.50)(@firebase/app@0.11.1)
       '@firebase/app-compat': 0.2.50
       '@firebase/app-types': 0.9.3
-      '@firebase/auth': 1.9.0(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))
-      '@firebase/auth-compat': 0.5.18(@firebase/app-compat@0.2.50)(@firebase/app-types@0.9.3)(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)))
+      '@firebase/auth': 1.9.0(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))
+      '@firebase/auth-compat': 0.5.18(@firebase/app-compat@0.2.50)(@firebase/app-types@0.9.3)(@firebase/app@0.11.1)(@react-native-async-storage/async-storage@2.2.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)))
       '@firebase/data-connect': 0.3.0(@firebase/app@0.11.1)
       '@firebase/database': 1.0.12
       '@firebase/database-compat': 2.0.3
@@ -12907,8 +13759,6 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
-  freeport-async@2.0.0: {}
-
   fresh@0.5.2: {}
 
   fs-constants@1.0.0: {}
@@ -12972,6 +13822,8 @@ snapshots:
       hasown: 2.0.2
       math-intrinsics: 1.1.0
 
+  get-nonce@1.0.1: {}
+
   get-package-type@0.1.0: {}
 
   get-proto@1.0.1:
@@ -13037,10 +13889,6 @@ snapshots:
       minipass: 4.2.8
       path-scurry: 1.11.1
 
-  global-dirs@0.1.1:
-    dependencies:
-      ini: 1.3.8
-
   globals@13.24.0:
     dependencies:
       type-fest: 0.20.2
@@ -13085,43 +13933,27 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hast-util-from-selector@2.0.1:
-    dependencies:
-      '@types/hast': 2.3.10
-      css-selector-parser: 1.4.1
-      hastscript: 7.2.0
-
-  hast-util-parse-selector@3.1.1:
-    dependencies:
-      '@types/hast': 2.3.10
-
-  hastscript@7.2.0:
-    dependencies:
-      '@types/hast': 2.3.10
-      comma-separated-tokens: 2.0.3
-      hast-util-parse-selector: 3.1.1
-      property-information: 6.5.0
-      space-separated-tokens: 2.0.2
-
   he@1.2.0: {}
 
-  hermes-estree@0.28.1: {}
+  hermes-compiler@250829098.0.17: {}
 
-  hermes-estree@0.29.1: {}
+  hermes-estree@0.35.0: {}
 
-  hermes-estree@0.32.0: {}
+  hermes-estree@0.36.0: {}
 
-  hermes-parser@0.28.1:
+  hermes-estree@0.36.1: {}
+
+  hermes-parser@0.35.0:
     dependencies:
-      hermes-estree: 0.28.1
+      hermes-estree: 0.35.0
 
-  hermes-parser@0.29.1:
+  hermes-parser@0.36.0:
     dependencies:
-      hermes-estree: 0.29.1
+      hermes-estree: 0.36.0
 
-  hermes-parser@0.32.0:
+  hermes-parser@0.36.1:
     dependencies:
-      hermes-estree: 0.32.0
+      hermes-estree: 0.36.1
 
   hoist-non-react-statics@3.3.2:
     dependencies:
@@ -13197,10 +14029,6 @@ snapshots:
 
   ignore@5.3.2: {}
 
-  image-size@1.2.1:
-    dependencies:
-      queue: 6.0.2
-
   import-fresh@3.3.1:
     dependencies:
       parent-module: 1.0.1
@@ -13346,11 +14174,6 @@ snapshots:
   is-map@2.0.3:
     optional: true
 
-  is-nan@1.3.2:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-
   is-negative-zero@2.0.3:
     optional: true
 
@@ -13608,24 +14431,24 @@ snapshots:
       jest-mock: 29.7.0
       jest-util: 29.7.0
 
-  jest-expo@54.0.16(@babel/core@7.25.9)(expo@54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  jest-expo@57.0.5(@babel/core@7.29.7)(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(expo@57.0.23)(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@expo/config': 12.0.13
-      '@expo/json-file': 10.0.8
       '@jest/create-cache-key-function': 29.7.0
       '@jest/globals': 29.7.0
-      babel-jest: 29.7.0(@babel/core@7.25.9)
-      expo: 54.0.30(@babel/core@7.25.9)(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-native/jest-preset': 0.86.3(@babel/core@7.29.7)(react@19.2.3)
+      babel-jest: 29.7.0(@babel/core@7.29.7)
       jest-environment-jsdom: 29.7.0
       jest-snapshot: 29.7.0
       jest-watch-select-projects: 2.0.0
       jest-watch-typeahead: 2.2.1(jest@29.7.0(@types/node@25.0.3)(babel-plugin-macros@3.1.0))
       json5: 2.2.3
       lodash: 4.17.21
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-test-renderer: 19.1.0(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-test-renderer: 19.2.3(react@19.2.3)
       server-only: 0.0.1
       stacktrace-js: 2.0.2
+    optionalDependencies:
+      expo: 57.0.23(8132ea204d39ca81423aaa5e2384dd28)
     transitivePeerDependencies:
       - '@babel/core'
       - bufferutil
@@ -13977,7 +14800,7 @@ snapshots:
 
   kleur@3.0.3: {}
 
-  lan-network@0.1.7: {}
+  lan-network@0.2.1: {}
 
   launch-editor@2.12.0:
     dependencies:
@@ -14135,13 +14958,6 @@ snapshots:
 
   math-intrinsics@1.1.0: {}
 
-  mathjax-full@3.2.2:
-    dependencies:
-      esm: 3.2.25
-      mhchemparser: 4.2.1
-      mj-context-menu: 0.6.1
-      speech-rule-engine: 4.1.2
-
   mdn-data@2.0.14: {}
 
   media-typer@0.3.0: {}
@@ -14160,50 +14976,109 @@ snapshots:
 
   merge2@1.4.1: {}
 
-  metro-babel-transformer@0.83.3:
+  metro-babel-transformer@0.84.5:
+    dependencies:
+      '@babel/core': 7.25.9
+      flow-enums-runtime: 0.0.6
+      hermes-parser: 0.35.0
+      metro-cache-key: 0.84.5
+      nullthrows: 1.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  metro-babel-transformer@0.84.6:
     dependencies:
       '@babel/core': 7.25.9
       flow-enums-runtime: 0.0.6
-      hermes-parser: 0.32.0
+      hermes-parser: 0.35.0
+      metro-cache-key: 0.84.6
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - supports-color
 
-  metro-cache-key@0.83.3:
+  metro-cache-key@0.84.5:
+    dependencies:
+      flow-enums-runtime: 0.0.6
+
+  metro-cache-key@0.84.6:
+    dependencies:
+      flow-enums-runtime: 0.0.6
+
+  metro-cache@0.84.5:
     dependencies:
+      exponential-backoff: 3.1.3
       flow-enums-runtime: 0.0.6
+      https-proxy-agent: 7.0.6
+      metro-core: 0.84.5
+    transitivePeerDependencies:
+      - supports-color
 
-  metro-cache@0.83.3:
+  metro-cache@0.84.6:
     dependencies:
       exponential-backoff: 3.1.3
       flow-enums-runtime: 0.0.6
       https-proxy-agent: 7.0.6
-      metro-core: 0.83.3
+      metro-core: 0.84.6
+    transitivePeerDependencies:
+      - supports-color
+
+  metro-config@0.84.5:
+    dependencies:
+      connect: 3.7.0
+      flow-enums-runtime: 0.0.6
+      jest-validate: 29.7.0
+      metro: 0.84.5
+      metro-cache: 0.84.5
+      metro-core: 0.84.5
+      metro-runtime: 0.84.5
+      yaml: 2.8.2
     transitivePeerDependencies:
+      - bufferutil
       - supports-color
+      - utf-8-validate
 
-  metro-config@0.83.3:
+  metro-config@0.84.6:
     dependencies:
       connect: 3.7.0
       flow-enums-runtime: 0.0.6
       jest-validate: 29.7.0
-      metro: 0.83.3
-      metro-cache: 0.83.3
-      metro-core: 0.83.3
-      metro-runtime: 0.83.3
+      metro: 0.84.6
+      metro-cache: 0.84.6
+      metro-core: 0.84.6
+      metro-runtime: 0.84.6
       yaml: 2.8.2
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  metro-core@0.83.3:
+  metro-core@0.84.5:
+    dependencies:
+      flow-enums-runtime: 0.0.6
+      lodash.throttle: 4.1.1
+      metro-resolver: 0.84.5
+
+  metro-core@0.84.6:
     dependencies:
       flow-enums-runtime: 0.0.6
       lodash.throttle: 4.1.1
-      metro-resolver: 0.83.3
+      metro-resolver: 0.84.6
+
+  metro-file-map@0.84.5:
+    dependencies:
+      debug: 4.4.3
+      fb-watchman: 2.0.2
+      flow-enums-runtime: 0.0.6
+      graceful-fs: 4.2.11
+      invariant: 2.2.4
+      jest-worker: 29.7.0
+      micromatch: 4.0.8
+      nullthrows: 1.1.1
+      walker: 1.0.8
+    transitivePeerDependencies:
+      - supports-color
 
-  metro-file-map@0.83.3:
+  metro-file-map@0.84.6:
     dependencies:
       debug: 4.4.3
       fb-watchman: 2.0.2
@@ -14217,47 +15092,96 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  metro-minify-terser@0.83.3:
+  metro-minify-terser@0.84.5:
     dependencies:
       flow-enums-runtime: 0.0.6
       terser: 5.44.1
 
-  metro-resolver@0.83.3:
+  metro-minify-terser@0.84.6:
     dependencies:
       flow-enums-runtime: 0.0.6
+      terser: 5.44.1
+
+  metro-resolver@0.84.5:
+    dependencies:
+      flow-enums-runtime: 0.0.6
+
+  metro-resolver@0.84.6:
+    dependencies:
+      flow-enums-runtime: 0.0.6
+
+  metro-runtime@0.84.5:
+    dependencies:
+      '@babel/runtime': 7.25.9
+      flow-enums-runtime: 0.0.6
 
-  metro-runtime@0.83.3:
+  metro-runtime@0.84.6:
     dependencies:
       '@babel/runtime': 7.25.9
       flow-enums-runtime: 0.0.6
 
-  metro-source-map@0.83.3:
+  metro-source-map@0.84.5:
+    dependencies:
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      flow-enums-runtime: 0.0.6
+      invariant: 2.2.4
+      metro-symbolicate: 0.84.5
+      nullthrows: 1.1.1
+      ob1: 0.84.5
+      source-map: 0.5.7
+      vlq: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  metro-source-map@0.84.6:
     dependencies:
       '@babel/traverse': 7.29.0
-      '@babel/traverse--for-generate-function-map': '@babel/traverse@7.29.0'
       '@babel/types': 7.29.0
       flow-enums-runtime: 0.0.6
       invariant: 2.2.4
-      metro-symbolicate: 0.83.3
+      metro-symbolicate: 0.84.6
+      nullthrows: 1.1.1
+      ob1: 0.84.6
+      source-map: 0.5.7
+      vlq: 1.0.1
+    transitivePeerDependencies:
+      - supports-color
+
+  metro-symbolicate@0.84.5:
+    dependencies:
+      flow-enums-runtime: 0.0.6
+      invariant: 2.2.4
+      metro-source-map: 0.84.5
       nullthrows: 1.1.1
-      ob1: 0.83.3
       source-map: 0.5.7
       vlq: 1.0.1
     transitivePeerDependencies:
       - supports-color
 
-  metro-symbolicate@0.83.3:
+  metro-symbolicate@0.84.6:
     dependencies:
       flow-enums-runtime: 0.0.6
       invariant: 2.2.4
-      metro-source-map: 0.83.3
+      metro-source-map: 0.84.6
       nullthrows: 1.1.1
       source-map: 0.5.7
       vlq: 1.0.1
     transitivePeerDependencies:
       - supports-color
 
-  metro-transform-plugins@0.83.3:
+  metro-transform-plugins@0.84.5:
+    dependencies:
+      '@babel/core': 7.25.9
+      '@babel/generator': 7.29.1
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      flow-enums-runtime: 0.0.6
+      nullthrows: 1.1.1
+    transitivePeerDependencies:
+      - supports-color
+
+  metro-transform-plugins@0.84.6:
     dependencies:
       '@babel/core': 7.25.9
       '@babel/generator': 7.29.1
@@ -14268,27 +15192,47 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  metro-transform-worker@0.83.3:
+  metro-transform-worker@0.84.5:
+    dependencies:
+      '@babel/core': 7.25.9
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.2
+      '@babel/types': 7.29.0
+      flow-enums-runtime: 0.0.6
+      metro: 0.84.5
+      metro-babel-transformer: 0.84.5
+      metro-cache: 0.84.5
+      metro-cache-key: 0.84.5
+      metro-minify-terser: 0.84.5
+      metro-source-map: 0.84.5
+      metro-transform-plugins: 0.84.5
+      nullthrows: 1.1.1
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  metro-transform-worker@0.84.6:
     dependencies:
       '@babel/core': 7.25.9
       '@babel/generator': 7.29.1
       '@babel/parser': 7.29.2
       '@babel/types': 7.29.0
       flow-enums-runtime: 0.0.6
-      metro: 0.83.3
-      metro-babel-transformer: 0.83.3
-      metro-cache: 0.83.3
-      metro-cache-key: 0.83.3
-      metro-minify-terser: 0.83.3
-      metro-source-map: 0.83.3
-      metro-transform-plugins: 0.83.3
+      metro: 0.84.6
+      metro-babel-transformer: 0.84.6
+      metro-cache: 0.84.6
+      metro-cache-key: 0.84.6
+      metro-minify-terser: 0.84.6
+      metro-source-map: 0.84.6
+      metro-transform-plugins: 0.84.6
       nullthrows: 1.1.1
     transitivePeerDependencies:
       - bufferutil
       - supports-color
       - utf-8-validate
 
-  metro@0.83.3:
+  metro@0.84.5:
     dependencies:
       '@babel/code-frame': 7.29.0
       '@babel/core': 7.25.9
@@ -14297,33 +15241,31 @@ snapshots:
       '@babel/template': 7.28.6
       '@babel/traverse': 7.29.0
       '@babel/types': 7.29.0
-      accepts: 1.3.8
-      chalk: 4.1.2
+      accepts: 2.0.0
       ci-info: 2.0.0
       connect: 3.7.0
       debug: 4.4.3
       error-stack-parser: 2.1.4
       flow-enums-runtime: 0.0.6
       graceful-fs: 4.2.11
-      hermes-parser: 0.32.0
-      image-size: 1.2.1
+      hermes-parser: 0.35.0
       invariant: 2.2.4
       jest-worker: 29.7.0
       jsc-safe-url: 0.2.4
       lodash.throttle: 4.1.1
-      metro-babel-transformer: 0.83.3
-      metro-cache: 0.83.3
-      metro-cache-key: 0.83.3
-      metro-config: 0.83.3
-      metro-core: 0.83.3
-      metro-file-map: 0.83.3
-      metro-resolver: 0.83.3
-      metro-runtime: 0.83.3
-      metro-source-map: 0.83.3
-      metro-symbolicate: 0.83.3
-      metro-transform-plugins: 0.83.3
-      metro-transform-worker: 0.83.3
-      mime-types: 2.1.35
+      metro-babel-transformer: 0.84.5
+      metro-cache: 0.84.5
+      metro-cache-key: 0.84.5
+      metro-config: 0.84.5
+      metro-core: 0.84.5
+      metro-file-map: 0.84.5
+      metro-resolver: 0.84.5
+      metro-runtime: 0.84.5
+      metro-source-map: 0.84.5
+      metro-symbolicate: 0.84.5
+      metro-transform-plugins: 0.84.5
+      metro-transform-worker: 0.84.5
+      mime-types: 3.0.2
       nullthrows: 1.1.1
       serialize-error: 2.1.0
       source-map: 0.5.7
@@ -14335,7 +15277,50 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  mhchemparser@4.2.1: {}
+  metro@0.84.6:
+    dependencies:
+      '@babel/code-frame': 7.29.0
+      '@babel/core': 7.25.9
+      '@babel/generator': 7.29.1
+      '@babel/parser': 7.29.2
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.29.0
+      '@babel/types': 7.29.0
+      accepts: 2.0.0
+      ci-info: 2.0.0
+      connect: 3.7.0
+      debug: 4.4.3
+      error-stack-parser: 2.1.4
+      flow-enums-runtime: 0.0.6
+      graceful-fs: 4.2.11
+      hermes-parser: 0.35.0
+      invariant: 2.2.4
+      jest-worker: 29.7.0
+      jsc-safe-url: 0.2.4
+      lodash.throttle: 4.1.1
+      metro-babel-transformer: 0.84.6
+      metro-cache: 0.84.6
+      metro-cache-key: 0.84.6
+      metro-config: 0.84.6
+      metro-core: 0.84.6
+      metro-file-map: 0.84.6
+      metro-resolver: 0.84.6
+      metro-runtime: 0.84.6
+      metro-source-map: 0.84.6
+      metro-symbolicate: 0.84.6
+      metro-transform-plugins: 0.84.6
+      metro-transform-worker: 0.84.6
+      mime-types: 3.0.2
+      nullthrows: 1.1.1
+      serialize-error: 2.1.0
+      source-map: 0.5.7
+      throat: 5.0.0
+      ws: 7.5.10
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
 
   micromatch@4.0.8:
     dependencies:
@@ -14352,6 +15337,10 @@ snapshots:
     dependencies:
       mime-db: 1.52.0
 
+  mime-types@3.0.2:
+    dependencies:
+      mime-db: 1.54.0
+
   mime@1.6.0: {}
 
   mime@2.6.0: {}
@@ -14368,6 +15357,10 @@ snapshots:
     dependencies:
       '@isaacs/brace-expansion': 5.0.0
 
+  minimatch@10.2.6:
+    dependencies:
+      brace-expansion: 5.0.12
+
   minimatch@3.1.2:
     dependencies:
       brace-expansion: 1.1.12
@@ -14386,14 +15379,8 @@ snapshots:
 
   minipass@7.1.2: {}
 
-  minizlib@3.1.0:
-    dependencies:
-      minipass: 7.1.2
-
   mitt@3.0.1: {}
 
-  mj-context-menu@0.6.1: {}
-
   mkdirp-classic@0.5.3: {}
 
   mkdirp@1.0.4: {}
@@ -14404,18 +15391,16 @@ snapshots:
 
   ms@2.1.3: {}
 
-  mute-stream@0.0.8: {}
+  multitars@1.0.2: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
+  mute-stream@0.0.8: {}
 
   nanoclone@0.2.1: {}
 
   nanoid@3.3.11: {}
 
+  nanoid@3.3.19: {}
+
   napi-build-utils@2.0.0: {}
 
   napi-postinstall@0.3.4: {}
@@ -14426,9 +15411,11 @@ snapshots:
 
   negotiator@0.6.4: {}
 
-  neo-async@2.6.2: {}
+  negotiator@1.1.0:
+    dependencies:
+      content-type: 2.1.0
 
-  nested-error-stacks@2.0.1: {}
+  neo-async@2.6.2: {}
 
   nocache@3.0.4: {}
 
@@ -14479,7 +15466,11 @@ snapshots:
 
   nwsapi@2.2.23: {}
 
-  ob1@0.83.3:
+  ob1@0.84.5:
+    dependencies:
+      flow-enums-runtime: 0.0.6
+
+  ob1@0.84.6:
     dependencies:
       flow-enums-runtime: 0.0.6
 
@@ -14487,11 +15478,6 @@ snapshots:
 
   object-inspect@1.13.4: {}
 
-  object-is@1.1.6:
-    dependencies:
-      call-bind: 1.0.8
-      define-properties: 1.2.1
-
   object-keys@1.1.1: {}
 
   object.assign@4.1.7:
@@ -14502,6 +15488,7 @@ snapshots:
       es-object-atoms: 1.1.1
       has-symbols: 1.1.0
       object-keys: 1.1.1
+    optional: true
 
   object.fromentries@2.0.8:
     dependencies:
@@ -14755,8 +15742,6 @@ snapshots:
 
   picomatch@2.3.1: {}
 
-  picomatch@3.0.1: {}
-
   picomatch@4.0.3: {}
 
   picomatch@4.0.5: {}
@@ -14789,9 +15774,9 @@ snapshots:
 
   possible-typed-array-names@1.1.0: {}
 
-  postcss@8.4.49:
+  postcss@8.5.28:
     dependencies:
-      nanoid: 3.3.11
+      nanoid: 3.3.19
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -14855,8 +15840,6 @@ snapshots:
 
   property-expr@2.0.6: {}
 
-  property-information@6.5.0: {}
-
   protobufjs@7.5.4:
     dependencies:
       '@protobufjs/aspromise': 1.1.2
@@ -14887,29 +15870,16 @@ snapshots:
 
   pure-rand@6.1.0: {}
 
-  qrcode-terminal@0.11.0: {}
-
   qs@6.14.1:
     dependencies:
       side-channel: 1.1.0
 
   quansync@0.2.11: {}
 
-  query-string@7.1.3:
-    dependencies:
-      decode-uri-component: 0.2.2
-      filter-obj: 1.1.0
-      split-on-first: 1.1.0
-      strict-uri-encode: 2.0.0
-
   querystringify@2.2.0: {}
 
   queue-microtask@1.2.3: {}
 
-  queue@6.0.2:
-    dependencies:
-      inherits: 2.0.4
-
   randexp@0.5.3:
     dependencies:
       drange: 1.1.1
@@ -14939,18 +15909,18 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  react-dom@19.1.0(react@19.1.0):
+  react-dom@19.2.3(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      scheduler: 0.26.0
+      react: 19.2.3
+      scheduler: 0.27.0
 
-  react-freeze@1.0.4(react@19.1.0):
+  react-freeze@1.0.4(react@19.2.3):
     dependencies:
-      react: 19.1.0
+      react: 19.2.3
 
-  react-hook-form@7.34.2(react@19.1.0):
+  react-hook-form@7.34.2(react@19.2.3):
     dependencies:
-      react: 19.1.0
+      react: 19.2.3
 
   react-is@16.13.1: {}
 
@@ -14958,18 +15928,18 @@ snapshots:
 
   react-is@18.3.1: {}
 
-  react-is@19.1.0: {}
+  react-is@19.3.0: {}
 
-  react-native-a11y-order@0.4.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-a11y-order@0.4.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
   react-native-animatable@1.3.3:
     dependencies:
       prop-types: 15.8.1
 
-  react-native-bootsplash@6.3.11(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-bootsplash@6.3.11(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
       '@expo/config-plugins': 10.1.2
       '@react-native-community/cli-config-android': 18.0.1
@@ -14981,9 +15951,9 @@ snapshots:
       node-html-parser: 7.0.1
       picocolors: 1.1.1
       prettier: 3.7.4
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-is-edge-to-edge: 1.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-is-edge-to-edge: 1.2.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       sharp: 0.32.6
       ts-dedent: 2.2.0
       xml-formatter: 3.6.7
@@ -14993,254 +15963,255 @@ snapshots:
       - react-native-b4a
       - supports-color
 
-  react-native-callkeep@4.3.16(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  react-native-callkeep@4.3.16(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-console-time-polyfill@1.2.3(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-console-time-polyfill@1.2.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-device-info@11.1.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  react-native-device-info@11.1.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-drawer-layout@4.2.5(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-drawer-layout@4.2.10(106987a3d5ae1ef5de78591772a14578):
     dependencies:
       color: 4.2.3
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      use-latest-callback: 0.2.6(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-gesture-handler: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      use-latest-callback: 0.2.6(react@19.2.3)
 
   react-native-easy-grid@0.2.2:
     dependencies:
       lodash: 4.17.21
 
-  react-native-easy-toast@2.3.0(prop-types@15.8.1)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  react-native-easy-toast@2.3.0(prop-types@15.8.1)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
       deprecated-react-native-prop-types: 2.3.0
       prop-types: 15.8.1
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-external-keyboard@0.9.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-enriched-markdown@1.0.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-external-keyboard@0.9.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@egjs/hammerjs': 2.0.17
-      hoist-non-react-statics: 3.3.2
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+
+  react-native-gesture-handler@3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@types/react-test-renderer': 19.3.0
       invariant: 2.2.4
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-image-crop-picker@https://codeload.github.com/RocketChat/react-native-image-crop-picker/tar.gz/47092e8c90550a54d45fe307f7cb2a24c9535ed5(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-image-crop-picker@https://codeload.github.com/RocketChat/react-native-image-crop-picker/tar.gz/47092e8c90550a54d45fe307f7cb2a24c9535ed5(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-incall-manager@4.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  react-native-incall-manager@4.2.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-is-edge-to-edge@1.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-is-edge-to-edge@1.2.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-katex@https://codeload.github.com/RocketChat/react-native-katex/tar.gz/37e579804fe238732d8a4b06dec073610ab062b1(react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-is-edge-to-edge@1.3.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-webview: 13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-keyboard-controller@1.18.5(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-keyboard-controller@1.18.5(react-native-reanimated@4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-is-edge-to-edge: 1.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-is-edge-to-edge: 1.3.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
 
   react-native-keychain@10.0.0: {}
 
-  react-native-linear-gradient@2.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-linear-gradient@2.8.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-localize@3.7.0(@expo/config-plugins@54.0.4)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-localize@3.7.0(@expo/config-plugins@57.0.9(typescript@7.0.2))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     optionalDependencies:
-      '@expo/config-plugins': 54.0.4
-
-  react-native-math-view@3.9.5(react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
-    dependencies:
-      hast-util-from-selector: 2.0.1
-      lodash: 4.17.21
-      mathjax-full: 3.2.2
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-svg: 15.12.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      transformation-matrix: 2.16.1
+      '@expo/config-plugins': 57.0.9(typescript@7.0.2)
 
   react-native-mime-types@2.3.0:
     dependencies:
       mime-db: 1.37.0
 
-  react-native-mmkv@4.1.2(react-native-nitro-modules@0.33.9(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-mmkv@4.3.2(react-native-nitro-modules@0.37.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-nitro-modules: 0.33.9(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-nitro-modules: 0.37.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
 
-  react-native-modal@13.0.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-modal@13.0.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
       prop-types: 15.8.1
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       react-native-animatable: 1.3.3
 
-  react-native-nitro-modules@0.33.9(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-nitro-modules@0.37.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-notifier@1.6.1(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-notifier@1.6.1(react-native-gesture-handler@3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-gesture-handler: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
 
-  react-native-picker-select@9.0.1(@react-native-picker/picker@2.11.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)):
+  react-native-picker-select@9.0.1(@react-native-picker/picker@2.11.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)):
     dependencies:
-      '@react-native-picker/picker': 2.11.4(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-native-picker/picker': 2.11.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       lodash.isequal: 4.5.0
 
+  react-native-plain-text@0.8.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+
   react-native-popover-view@5.1.7:
     dependencies:
       deprecated-react-native-prop-types: 2.3.0
       prop-types: 15.8.1
 
-  react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-reanimated@4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@babel/core': 7.25.9
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-is-edge-to-edge: 1.2.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-worklets: 0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      semver: 7.7.2
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-is-edge-to-edge: 1.3.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-worklets: 0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      semver: 7.7.4
 
-  react-native-safe-area-context@5.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-safe-area-context@5.10.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
 
-  react-native-screens@4.17.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-screens@4.28.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-freeze: 1.0.4(react@19.1.0)
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-freeze: 1.0.4(react@19.2.3)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       warn-once: 0.1.1
 
-  react-native-skeleton-placeholder@5.2.4(@react-native-masked-view/masked-view@0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-linear-gradient@2.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-skeleton-placeholder@5.2.4(@react-native-masked-view/masked-view@0.3.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native-linear-gradient@2.8.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@react-native-masked-view/masked-view': 0.3.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-linear-gradient: 2.6.2(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-native-masked-view/masked-view': 0.3.2(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-linear-gradient: 2.8.3(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
 
-  react-native-svg@15.12.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-svg@15.15.4(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
       css-select: 5.2.2
       css-tree: 1.1.3
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       warn-once: 0.1.1
 
-  react-native-url-polyfill@2.0.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  react-native-url-polyfill@2.0.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       whatwg-url-without-unicode: 8.0.0-3
 
-  react-native-webrtc@124.0.7(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)):
+  react-native-webrtc@124.0.7(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)):
     dependencies:
       base64-js: 1.5.1
       debug: 4.3.4
       event-target-shim: 6.0.2
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
     transitivePeerDependencies:
       - supports-color
 
-  react-native-webview@13.16.1(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  react-native-webview@13.16.1(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
     dependencies:
       escape-string-regexp: 4.0.0
       invariant: 2.2.4
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-
-  react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
-    dependencies:
-      '@babel/core': 7.25.9
-      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.25.9)
-      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.25.9)
-      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.25.9)
-      '@babel/preset-typescript': 7.28.5(@babel/core@7.25.9)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+
+  react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@babel/core': 7.29.7
+      '@babel/generator': 7.29.8
+      '@babel/plugin-transform-arrow-functions': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-class-properties': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-classes': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-nullish-coalescing-operator': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-optional-chaining': 7.28.6(@babel/core@7.29.7)
+      '@babel/plugin-transform-shorthand-properties': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-template-literals': 7.27.1(@babel/core@7.29.7)
+      '@babel/plugin-transform-unicode-regex': 7.27.1(@babel/core@7.29.7)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.29.7)
+      '@babel/traverse': 7.29.8
+      '@babel/types': 7.29.8
+      '@react-native/metro-config': 0.86.3(@babel/core@7.29.7)
       convert-source-map: 2.0.0
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      semver: 7.7.2
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      semver: 7.7.4
     transitivePeerDependencies:
       - supports-color
 
-  react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0):
+  react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3):
     dependencies:
-      '@jest/create-cache-key-function': 29.7.0
-      '@react-native/assets-registry': 0.81.5
-      '@react-native/codegen': 0.81.5(@babel/core@7.25.9)
-      '@react-native/community-cli-plugin': 0.81.5(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))
-      '@react-native/gradle-plugin': 0.81.5
-      '@react-native/js-polyfills': 0.81.5
-      '@react-native/normalize-colors': 0.81.5
-      '@react-native/virtualized-lists': 0.81.5(@types/react@19.1.17)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      '@react-native/assets-registry': 0.86.3
+      '@react-native/codegen': 0.86.3(@babel/core@7.29.7)
+      '@react-native/community-cli-plugin': 0.86.3(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))
+      '@react-native/gradle-plugin': 0.86.3
+      '@react-native/js-polyfills': 0.86.3
+      '@react-native/normalize-colors': 0.86.3
+      '@react-native/virtualized-lists': 0.86.3(@types/react@19.2.18)(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
       abort-controller: 3.0.0
       anser: 1.4.10
       ansi-regex: 5.0.1
-      babel-jest: 29.7.0(@babel/core@7.25.9)
-      babel-plugin-syntax-hermes-parser: 0.29.1
+      babel-plugin-syntax-hermes-parser: 0.36.0
       base64-js: 1.5.1
       commander: 12.1.0
       flow-enums-runtime: 0.0.6
-      glob: 7.2.3
+      hermes-compiler: 250829098.0.17
       invariant: 2.2.4
-      jest-environment-node: 29.7.0
       memoize-one: 5.2.1
-      metro-runtime: 0.83.3
-      metro-source-map: 0.83.3
+      metro-runtime: 0.84.6
+      metro-source-map: 0.84.6
       nullthrows: 1.1.1
       pretty-format: 29.7.0
       promise: 8.3.0
-      react: 19.1.0
+      react: 19.2.3
       react-devtools-core: 6.1.5
       react-refresh: 0.14.2
       regenerator-runtime: 0.13.11
-      scheduler: 0.26.0
+      scheduler: 0.27.0
       semver: 7.5.2
       stacktrace-parser: 0.1.11
+      tinyglobby: 0.2.15
       whatwg-fetch: 3.6.20
-      ws: 6.2.3
+      ws: 7.5.10
       yargs: 17.7.2
     optionalDependencies:
-      '@types/react': 19.1.17
+      '@react-native/jest-preset': 0.86.3(@babel/core@7.29.7)(react@19.2.3)
+      '@types/react': 19.2.18
     transitivePeerDependencies:
       - '@babel/core'
       - '@react-native-community/cli'
@@ -15249,30 +16220,57 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  react-redux@8.0.5(@types/react@19.1.17)(react-dom@19.1.0(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)(redux@4.2.0):
+  react-redux@8.0.5(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)(redux@4.2.0):
     dependencies:
       '@babel/runtime': 7.25.9
-      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.1.17)
+      '@types/hoist-non-react-statics': 3.3.7(@types/react@19.2.18)
       '@types/use-sync-external-store': 0.0.3
       hoist-non-react-statics: 3.3.2
-      react: 19.1.0
+      react: 19.2.3
       react-is: 18.3.1
-      use-sync-external-store: 1.6.0(react@19.1.0)
+      use-sync-external-store: 1.6.0(react@19.2.3)
     optionalDependencies:
-      '@types/react': 19.1.17
-      react-dom: 19.1.0(react@19.1.0)
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
+      '@types/react': 19.2.18
+      react-dom: 19.2.3(react@19.2.3)
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
       redux: 4.2.0
 
   react-refresh@0.14.2: {}
 
-  react-test-renderer@19.1.0(react@19.1.0):
+  react-remove-scroll-bar@2.3.8(@types/react@19.2.18)(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.3)
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react-remove-scroll@2.7.2(@types/react@19.2.18)(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-remove-scroll-bar: 2.3.8(@types/react@19.2.18)(react@19.2.3)
+      react-style-singleton: 2.2.3(@types/react@19.2.18)(react@19.2.3)
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/react@19.2.18)(react@19.2.3)
+      use-sidecar: 1.1.3(@types/react@19.2.18)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react-style-singleton@2.2.3(@types/react@19.2.18)(react@19.2.3):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 19.2.3
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  react-test-renderer@19.2.3(react@19.2.3):
     dependencies:
-      react: 19.1.0
-      react-is: 19.1.0
-      scheduler: 0.26.0
+      react: 19.2.3
+      react-is: 19.3.0
+      scheduler: 0.27.0
 
-  react@19.1.0: {}
+  react@19.2.3: {}
 
   read-pkg-up@7.0.1:
     dependencies:
@@ -15293,12 +16291,12 @@ snapshots:
       string_decoder: 1.3.0
       util-deprecate: 1.0.2
 
-  reanimated-tab-view@0.3.0(react-native-gesture-handler@2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
+  reanimated-tab-view@0.3.0(106987a3d5ae1ef5de78591772a14578):
     dependencies:
-      react: 19.1.0
-      react-native: 0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0)
-      react-native-gesture-handler: 2.28.0(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
-      react-native-reanimated: 4.1.3(@babel/core@7.25.9)(react-native-worklets@0.6.1(@babel/core@7.25.9)(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.5(@babel/core@7.25.9)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/metro-config@0.81.5(@babel/core@7.25.9))(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
+      react: 19.2.3
+      react-native: 0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3)
+      react-native-gesture-handler: 3.3.0(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
+      react-native-reanimated: 4.6.0(react-native-worklets@0.12.2(@babel/core@7.29.7)(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3))(react-native@0.86.3(@babel/core@7.29.7)(@react-native-community/cli@20.0.0(typescript@7.0.2))(@react-native/jest-preset@0.86.3(@babel/core@7.29.7)(react@19.2.3))(@react-native/metro-config@0.86.3(@babel/core@7.29.7))(@types/react@19.2.18)(react@19.2.3))(react@19.2.3)
 
   recast@0.23.11:
     dependencies:
@@ -15383,12 +16381,6 @@ snapshots:
 
   require-main-filename@2.0.0: {}
 
-  requireg@0.2.2:
-    dependencies:
-      nested-error-stacks: 2.0.1
-      rc: 1.2.8
-      resolve: 1.7.1
-
   requires-port@1.0.0: {}
 
   reselect@4.0.0: {}
@@ -15403,10 +16395,6 @@ snapshots:
 
   resolve-from@5.0.0: {}
 
-  resolve-global@1.0.0:
-    dependencies:
-      global-dirs: 0.1.1
-
   resolve-pkg-maps@1.0.0: {}
 
   resolve-workspace-root@2.0.0: {}
@@ -15419,10 +16407,6 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
-  resolve@1.7.1:
-    dependencies:
-      path-parse: 1.0.7
-
   restore-cursor@2.0.0:
     dependencies:
       onetime: 2.0.1
@@ -15476,13 +16460,15 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sandbox-cli-detector@0.2.0: {}
+
   sax@1.4.3: {}
 
   saxes@6.0.0:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.26.0: {}
+  scheduler@0.27.0: {}
 
   schema-utils@4.3.3:
     dependencies:
@@ -15499,8 +16485,6 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  semver@7.7.2: {}
-
   semver@7.7.4: {}
 
   send@0.19.2:
@@ -15679,8 +16663,6 @@ snapshots:
 
   source-map@0.6.1: {}
 
-  space-separated-tokens@2.0.2: {}
-
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
@@ -15695,14 +16677,6 @@ snapshots:
 
   spdx-license-ids@3.0.22: {}
 
-  speech-rule-engine@4.1.2:
-    dependencies:
-      '@xmldom/xmldom': 0.9.8
-      commander: 13.1.0
-      wicked-good-xpath: 1.3.0
-
-  split-on-first@1.1.0: {}
-
   sprintf-js@1.0.3: {}
 
   sql-escape-string@1.1.0: {}
@@ -15734,7 +16708,9 @@ snapshots:
     dependencies:
       type-fest: 0.7.1
 
-  standard-navigation@0.0.7: {}
+  standard-navigation@0.0.8(react@19.2.3):
+    dependencies:
+      react: 19.2.3
 
   statuses@1.5.0: {}
 
@@ -15780,8 +16756,6 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  strict-uri-encode@2.0.0: {}
-
   string-length@4.0.2:
     dependencies:
       char-regex: 1.0.2
@@ -15865,16 +16839,6 @@ snapshots:
 
   structured-headers@0.4.1: {}
 
-  sucrase@3.35.1:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.13
-      commander: 4.1.1
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      tinyglobby: 0.2.15
-      ts-interface-checker: 0.1.13
-
   superstruct@2.0.2: {}
 
   supports-color@5.5.0:
@@ -15905,6 +16869,8 @@ snapshots:
       typical: 5.2.0
       wordwrapjs: 4.0.1
 
+  tagged-tag@1.0.0: {}
+
   tapable@2.3.3: {}
 
   tar-fs@2.1.4:
@@ -15943,16 +16909,6 @@ snapshots:
       - bare-abort-controller
       - react-native-b4a
 
-  tar@7.5.2:
-    dependencies:
-      '@isaacs/fs-minipass': 4.0.1
-      chownr: 3.0.0
-      minipass: 7.1.2
-      minizlib: 3.1.0
-      yallist: 5.0.0
-
-  temp-dir@2.0.0: {}
-
   terminal-link@2.1.1:
     dependencies:
       ansi-escapes: 4.3.2
@@ -15989,14 +16945,6 @@ snapshots:
 
   text-table@0.2.0: {}
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   throat@5.0.0: {}
 
   through@2.3.8: {}
@@ -16034,6 +16982,8 @@ snapshots:
 
   toposort@2.0.2: {}
 
+  toqr@0.1.1: {}
+
   tough-cookie@4.1.4:
     dependencies:
       psl: 1.15.0
@@ -16045,16 +16995,12 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  transformation-matrix@2.16.1: {}
-
   transliteration@2.3.5:
     dependencies:
       yargs: 17.7.2
 
   ts-dedent@2.2.0: {}
 
-  ts-interface-checker@0.1.13: {}
-
   tsconfig-paths@3.15.0:
     dependencies:
       '@types/json5': 0.0.29
@@ -16087,6 +17033,10 @@ snapshots:
 
   type-fest@2.19.0: {}
 
+  type-fest@5.9.0:
+    dependencies:
+      tagged-tag: 1.0.0
+
   type-is@1.6.18:
     dependencies:
       media-typer: 0.3.0
@@ -16202,7 +17152,7 @@ snapshots:
 
   undici-types@7.16.0: {}
 
-  undici@6.22.0: {}
+  undici@6.29.0: {}
 
   unicode-canonical-property-names-ecmascript@2.0.1: {}
 
@@ -16215,10 +17165,6 @@ snapshots:
 
   unicode-property-aliases-ecmascript@2.2.0: {}
 
-  unique-string@2.0.0:
-    dependencies:
-      crypto-random-string: 2.0.0
-
   universal-websocket-client@1.0.3:
     dependencies:
       ws: 8.18.3
@@ -16273,24 +17219,39 @@ snapshots:
       querystringify: 2.2.0
       requires-port: 1.0.0
 
-  use-debounce@9.0.4(react@19.1.0):
+  use-callback-ref@1.3.3(@types/react@19.2.18)(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
+
+  use-debounce@9.0.4(react@19.2.3):
     dependencies:
-      react: 19.1.0
+      react: 19.2.3
 
-  use-deep-compare-effect@1.6.1(react@19.1.0):
+  use-deep-compare-effect@1.6.1(react@19.2.3):
     dependencies:
       '@babel/runtime': 7.25.9
       '@types/react': 17.0.90
       dequal: 2.0.3
-      react: 19.1.0
+      react: 19.2.3
+
+  use-latest-callback@0.2.6(react@19.2.3):
+    dependencies:
+      react: 19.2.3
 
-  use-latest-callback@0.2.6(react@19.1.0):
+  use-sidecar@1.1.3(@types/react@19.2.18)(react@19.2.3):
     dependencies:
-      react: 19.1.0
+      detect-node-es: 1.1.0
+      react: 19.2.3
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 19.2.18
 
-  use-sync-external-store@1.6.0(react@19.1.0):
+  use-sync-external-store@1.6.0(react@19.2.3):
     dependencies:
-      react: 19.1.0
+      react: 19.2.3
 
   util-deprecate@1.0.2: {}
 
@@ -16321,6 +17282,15 @@ snapshots:
 
   vary@1.1.2: {}
 
+  vaul@1.1.2(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      '@radix-ui/react-dialog': 1.1.23(@types/react@19.2.18)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - '@types/react'
+      - '@types/react-dom'
+
   vlq@1.0.1: {}
 
   w3c-xmlserializer@4.0.0:
@@ -16397,6 +17367,8 @@ snapshots:
 
   whatwg-mimetype@3.0.0: {}
 
+  whatwg-url-minimum@0.1.2: {}
+
   whatwg-url-without-unicode@8.0.0-3:
     dependencies:
       buffer: 5.7.1
@@ -16458,10 +17430,6 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
-  wicked-good-xpath@1.3.0: {}
-
-  wonka@6.3.5: {}
-
   word-wrap@1.2.5: {}
 
   wordwrapjs@4.0.1:
@@ -16538,8 +17506,6 @@ snapshots:
 
   yallist@4.0.0: {}
 
-  yallist@5.0.0: {}
-
   yaml@1.10.2:
     optional: true
 
@@ -16590,8 +17556,15 @@ snapshots:
       property-expr: 2.0.6
       toposort: 2.0.2
 
-  zustand@5.0.12(@types/react@19.1.17)(react@19.1.0)(use-sync-external-store@1.6.0(react@19.1.0)):
+  zod@3.25.76: {}
+
+  zustand@5.0.12(@types/react@19.2.18)(react@19.2.3)(use-sync-external-store@1.6.0(react@19.2.3)):
     optionalDependencies:
-      '@types/react': 19.1.17
-      react: 19.1.0
-      use-sync-external-store: 1.6.0(react@19.1.0)
+      '@types/react': 19.2.18
+      react: 19.2.3
+      use-sync-external-store: 1.6.0(react@19.2.3)
+
+  zxing-wasm@3.1.3(@types/emscripten@1.41.6):
+    dependencies:
+      '@types/emscripten': 1.41.6
+      type-fest: 5.9.0